No App Router, um componente React é renderizado no servidor por padrão. Isso permite buscar dados perto da fonte, manter segredos fora do bundle do navegador e enviar HTML já preenchido. A diretiva use client marca uma fronteira: o módulo e suas dependências passam a fazer parte do grafo de código cliente. O efeito aparece no tamanho do JavaScript, na hidratação e no que o navegador pode executar.

Comece pela necessidade do navegador

Um cabeçalho que só mostra o nome do site e links pode continuar no servidor. Um menu que abre com clique precisa de estado e eventos no cliente. A página pode manter o cabeçalho como Server Component e isolar o controle interativo do menu em um componente pequeno. Se todo o layout receber use client, componentes importados abaixo desse limite entram na árvore cliente mesmo que eles próprios não usem hooks.

Essa fronteira também define quais propriedades atravessam a serialização. Dados enviados a um Client Component precisam ser serializáveis. Uma função definida no servidor não pode ser passada como callback comum ao navegador. Server Actions têm um contrato próprio e não devem ser usadas como atalho para transportar qualquer função.

Busque dados onde a apresentação consegue usá-los

Um Server Component pode consultar uma API ou banco diretamente usando código de servidor. A camada de interface recebe o resultado de que precisa e evita uma segunda chamada em useEffect depois que a página abre. Isso reduz estados de carregamento duplicados e evita mostrar uma tela vazia enquanto o cliente busca algo que o servidor já poderia entregar.

A decisão muda quando a informação depende de uma ação no navegador, como um filtro interativo. O estado do filtro pode ficar no cliente, enquanto o servidor entrega os dados iniciais. Para conjuntos grandes, avalie se o filtro deve alterar a URL e provocar nova renderização no servidor. Isso torna a seleção compartilhável e mantém o comportamento ao recarregar a página.

Evite o cliente por conveniência

Colocar toda a tela no cliente parece simples no primeiro momento. Depois, cada recurso precisa de estados para carregar, falhar, atualizar e permanecer sincronizado. O bundle também pode incorporar bibliotecas que uma rota estática não precisava executar. Meça o JavaScript transferido por rota e examine quais dependências chegaram ao navegador antes de criar outro limite cliente.

Um recorte razoável deixa no servidor a estrutura, o acesso protegido a dados e o conteúdo inicial. O cliente fica com formulários que validam enquanto a pessoa digita, controles de mídia e interações que dependem do DOM. A decisão pode ser revisada por componente, sem transformar a aplicação inteira em uma das duas categorias.

Verifique o efeito da fronteira

Inspecione o HTML da resposta antes da hidratação. O título, o resumo e os links principais devem estar presentes quando a rota precisa entregar conteúdo indexável. Depois, use as ferramentas de rede para identificar os arquivos JavaScript carregados e compare a rota antes e depois da mudança. Teste também a navegação essencial sem JavaScript quando ela deveria continuar disponível.

Confira o grafo de imports. Um Server Component pode compor um Client Component e passar elementos do servidor como children, mas não deve importar por acidente uma biblioteca de acesso ao banco para dentro do código cliente. O build ajuda a localizar fronteiras inválidas; a análise do bundle mostra o custo que continuou válido para o compilador.

Next.js: Server and Client Components · React: diretiva use client