Onde sua app é renderizada?
Uma app de React produz HTML, mas onde e quando esse HTML é gerado muda muito o desempenho e o SEO. Há três estratégias clássicas.
CSR — Client-Side Rendering
O servidor envia um HTML quase vazio e um bundle de JavaScript. O navegador baixa, executa o React e só então desenha a interface. É o que faz uma SPA tradicional (p. ex. com Vite ou Create React App).
- ✅ Simples; após o primeiro carregamento, a navegação é muito fluida.
- ❌ Primeira pintura lenta (é preciso esperar o JS) e SEO ruim: os buscadores recebem uma página vazia no início.
SSR — Server-Side Rendering
O servidor executa o React em cada requisição e devolve o HTML já desenhado. O navegador o mostra de imediato e, depois, o React "o desperta" (processo chamado hidratação) para torná-lo interativo.
- ✅ HTML completo desde o primeiro momento → melhor SEO e primeira pintura rápida.
- ❌ Mais carga no servidor (renderiza a cada visita).
SSG — Static Site Generation
O HTML é gerado uma única vez ao compilar (build time) e é servido como arquivos estáticos a partir de uma CDN. Ideal para conteúdo que muda pouco (blogs, documentação, landing pages).
- ✅ Rapidíssimo e barato (arquivos estáticos, cacheáveis).
- ❌ Não serve para conteúdo muito dinâmico ou personalizado por usuário.
Resumo: CSR renderiza no navegador; SSR no servidor por requisição; SSG no momento de compilar. A maioria dos frameworks modernos permite misturar as três conforme a página.
React Server Components (RSC)
Os Server Components são uma evolução mais recente: componentes que se executam só no servidor e nunca enviam seu JavaScript ao navegador. O servidor renderiza sua saída e a manda pronta; o cliente recebe menos JS.
- Podem acessar diretamente o banco de dados, ler arquivos ou usar segredos, porque rodam no servidor.
- Não podem usar estado nem efeitos (
useState,useEffect) nem manipuladores de eventos: isso é coisa do cliente.
Quando uma parte realmente precisa de interatividade (um botão com estado, um input),
ela é marcada como Client Component com a diretiva "use client" no
início do arquivo:
"use client";
import { useState } from "react";
export function Contador() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>Clicado {n}</button>;
}
Ideia-chave: por padrão, neste modelo os componentes são de servidor (zero JS para o cliente). Você adiciona
"use client"só nas "ilhas" que de fato precisam de interatividade. Assim você envia menos JavaScript.
Next.js e o App Router
Next.js é o framework de React mais usado para SSR/SSG e Server Components.
Seu App Router (a pasta app/) trata cada componente como de servidor por
padrão e usa "use client" para as ilhas interativas. Além disso, deixa você
escolher por página entre renderização estática (SSG) e dinâmica (SSR).
// app/page.tsx → Server Component por padrão
export default async function Pagina() {
const dados = await obterDados(); // executa no servidor
return <Lista dados={dados} />;
}
Por que isso importa?
- Desempenho: o usuário vê conteúdo antes (HTML do servidor) e baixa menos JavaScript (Server Components) → a página fica utilizável o quanto antes.
- SEO: os buscadores e as redes sociais recebem HTML real com o conteúdo, não uma página vazia à espera de JavaScript.
Você não precisa de SSR para tudo. Uma app interna sem SEO pode viver bem com CSR. O profissional é escolher a estratégia por página conforme suas necessidades.