React Server Components: O futuro do React

Server Components permitem renderizar parte da UI no servidor antes de enviar para o cliente. Na prática, isso reduz bundle JavaScript e melhora tempo de carregamento.

No App Router do Next.js, eles já são o padrão.

O que muda no dia a dia

• Data fetching pode acontecer direto no componente de servidor.
• Menos necessidade de useEffect para buscar dados iniciais.
• Componentes interativos continuam no cliente com "use client".

Exemplo simples

// Server Component
export default async function ProductsPage() {
  const products = await fetch("https://api.exemplo.com/products", { cache: "no-store" }).then((r) => r.json());
  return <ProductList products={products} />;
}

Quando usar Client Component

Use "use client" se você precisa de:

• estado local interativo,
• handlers de clique,
• APIs do navegador,
• animações dependentes do cliente.

Estratégia híbrida recomendada

1. Renderize dados e estrutura no servidor.
2. Hidrate só ilhas interativas.
3. Passe props enxutas para componentes cliente.

Esse modelo costuma dar uma UI mais rápida e uma base mais sustentável para crescer.