Guia Prático de Server Components no Next.js

O que são Server Components?

Server Components são componentes React que executam exclusivamente no servidor. Eles permitem acessar bancos de dados, APIs e o sistema de arquivos diretamente, sem enviar JavaScript para o navegador.

Quando usar Server Components

Use Server Components quando o componente:

• Busca dados de uma API ou banco de dados
• Acessa recursos do servidor (sistema de arquivos, variáveis de ambiente)
• Não precisa de interatividade no cliente
• Não usa hooks como useState ou useEffect

Quando usar Client Components

Marque um componente com "use client" quando ele:

• Usa hooks do React
• Precisa de event handlers (onClick, onChange)
• Usa APIs do navegador (localStorage, window)
• Precisa de estado local

Padrão de composição

A estratégia mais eficiente é manter Server Components como wrappers que buscam dados e passam para Client Components menores que lidam com interatividade.

async function ProductPage({ id }: { id: string }) {
  const product = await getProduct(id);
  return <ProductDetails product={product} />;
}

Performance na prática

Server Components reduzem significativamente o bundle JavaScript enviado ao cliente. Em um projeto recente, migrar para Server Components reduziu o JavaScript total em 40%, melhorando o Core Web Vitals consideravelmente.

Conclusão

Server Components não substituem Client Components. Eles são complementares. A chave é entender o papel de cada um e compor sua aplicação de forma inteligente.