devterview_$ iniciar simulação

Server Components x Client Components no App Router

MédioPlenoArquitetura de componentes

Pergunta

No App Router do Next.js, qual a diferença entre Server e Client Components, e o que te obriga a marcar `"use client"`?

Resposta esperada

Server Components rodam só no servidor: podem acessar recursos de servidor direto (DB, fs, secrets), não mandam JS pro cliente e não podem usar estado (`useState`), efeitos (`useEffect`) nem APIs do browser nem handlers de evento. Client Components (marcados com `"use client"` no topo do arquivo) são pré-renderizados no servidor e depois hidratados no cliente, onde ganham interatividade — precisa deles pra estado, efeitos, `onClick`, `window`/`localStorage`, e a maioria das libs que usam Context. O padrão recomendado é manter o máximo como Server Component e empurrar o `"use client"` pra folhas pequenas da árvore (um botão, um campo), pra não arrastar a subárvore toda pro bundle do cliente.

Por que perguntam isso

Pergunta pleno. Erros comuns: achar que Server Component roda no cliente também, ou marcar a página inteira como client 'por segurança'. Bom candidato fala em minimizar a fronteira client.

#server-components#client-components#app-router
publicidade

Perguntas de acompanhamento

Relacionadas