Boundary RSC no Next.js
Server Components = dados e lógica server-side. Client Components = apenas onde há interatividade.
Definição
No App Router, todos os componentes são Server Components por padrão. 'use client' marca o boundary onde começa o código client. O ideal é empurrar 'use client' para as folhas — apenas onde há useState, eventos ou browser APIs.
Problema → Solução
Problema
'use client' em tudo envia JS desnecessário ao browser — anula os benefícios do RSC.Solução
Empurrar 'use client' para as folhas da árvore — apenas nos componentes com useState/eventos.Dica de entrevista
Tip
Pergunta: 'precisa de useState, useEffect, event handlers ou browser APIs?' Se não → Server Component.Código
// page.tsx — Server Component
async function ProductPage({ params }) {
const product = await db.getProduct(params.id);
return (
<div>
<ProductInfo product={product} />
<AddToCart productId={product.id} />
</div>
);
}
// AddToCart.tsx
'use client';
function AddToCart({ productId }) {
const [qty, setQty] = useState(1);
return <button onClick={...}>Adicionar</button>;
}Perguntas de entrevista
Q.Server Component pode importar Client Component?▾
A.Sim, sem problemas. O Server Component renderiza o HTML inicial e o Client Component é hidratado depois no browser.
Q.Client Component pode importar Server Component?▾
A.Não diretamente. Mas pode RECEBER Server Components como children (props). Padrão: <ClientWrapper><ServerComp /></ClientWrapper> funciona.
Q.Server Components têm bundle no client?▾
A.Não. Zero JS do componente vai para o browser. Apenas o HTML resultante. Por isso libs pesadas (markdown, charts complexos) usadas só no server reduzem o bundle do cliente.
Termos relacionados
14/122← →