Por anos, o desenvolvimento React seguiu um padrão: baixar um bundle JS gigante, hidratar a página e então buscar dados (Waterfall). Os React Server Components (RSC) invertem essa lógica.
O Que São RSCs?
Imagine componentes que renderizam exclusivamente no servidor. Eles têm acesso direto ao Banco de Dados, File System e APIs internas, mas nunca são enviados para o navegador como JavaScript.
O resultado? Zero Bundle Size para esses componentes.
Cliente vs Servidor
- Server Component (Padrão no Next.js App Router):
- Busca de dados.
- Acesso a tokens/chaves secretas.
- Renderização de Markdown/Texto pesado.
- Client Component (
'use client'):- Interatividade (
useState,useEffect). - Event Listeners (
onClick). - Browser APIs (
localStorage,window).
- Interatividade (
O Padrão de Composição
O segredo é empurrar o 'use client' para as folhas da árvore de componentes (as pontas), mantendo o tronco e os galhos no servidor.
// Page.js (Server Component)
import { db } from '@/db';
import { Chart } from './Chart'; // Client Component
export default async function Dashboard() {
const data = await db.sales.findMany(); // Executa no servidor!
return (
<main>
<h1>Vendas Totais</h1>
{/* Passamos os dados prontos para o componente cliente */}
<Chart data={data} />
</main>
);
}
Note que a biblioteca de gráficos (pesada) só é carregada no Chart, mas o processamento de dados e a lógica de negócio ficaram no servidor, invisíveis ao usuário.
Benefícios Reais
- Segurança: Suas chaves de API nunca vazam, pois o código do Server Component nunca sai do servidor.
- Performance: Menos JS para o celular do usuário processar e analisar.
- DX (Developer Experience): Acesso direto ao backend sem precisar criar APIs intermediárias para tudo.
"RSCs não substituem o SSR. Eles são complementares."
O Futuro é Híbrido
Dominar RSCs é o diferencial do desenvolvedor React sênior em 2026. A habilidade de discernir o que deve ser estático e o que deve ser interativo define a qualidade da sua arquitetura.