Client-side Rendering (CSR)

Core Idea

Renderização inteiramente no browser: HTML mínimo baixado, JS busca e monta o DOM. No Pages Router, usada via useEffect ou (recomendado) uma lib de data fetching como SWR/TanStack Query.

Key Concepts

• CSR puro: página inicial mostra HTML mínimo, JS baixa/parseia/executa antes do conteúdo completo aparecer; navegações subsequentes são mais rápidas.
• useEffect para fetch: padrão manual, mais visto em apps React antigos.
• SWR / TanStack Query: libs recomendadas para fetch client-side com cache, revalidação e updates otimistas.

Code Examples

import React, { useState, useEffect } from 'react'

export function Page() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data')
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      const result = await response.json()
      setData(result)
    }
    fetchData().catch((e) => console.error('An error occurred while fetching the data: ', e))
  }, [])

  return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

• O que demonstra: fetch client-side manual com useEffect, mostrando estado de loading.

import useSWR from 'swr'

export function Page() {
  const { data, error, isLoading } = useSWR('https://api.example.com/data', fetcher)
  if (error) return <p>Failed to load.</p>
  if (isLoading) return <p>Loading...</p>
  return <p>Your Data: {data}</p>
}

• O que demonstra: fetch client-side recomendado via SWR, com estados de erro/loading prontos.

Anti-patterns

• CSR puro para páginas que precisam de SEO: crawlers que não executam JS só veem o estado inicial vazio/loading.
• CSR em conexões/dispositivos lentos: usuário espera todo o JS carregar antes de ver conteúdo completo.

Key Takeaways

1. Next.js recomenda abordagem híbrida: SSR/SSG para o essencial + CSR só para partes que realmente precisam ser client-only.
2. SWR/TanStack Query são preferíveis a useEffect manual por causa de cache, revalidação e updates otimistas.
3. No App Router, Suspense (loading.js) resolve o problema de estado de loading de forma nativa.

Connects To

• server-side-rendering-ssr / static-site-generation-ssg: alternativas de prerendering que reduzem a dependência de CSR puro.
• data-fetching: página-índice que lista todos os métodos de data fetching do Pages Router.