Perguntas de entrevista Next.js

Qual é a diferença entre SSR, SSG, ISR e CSR? Quando você usa cada um?

SSG constrói HTML em tempo de deploy — o mais rápido e barato, correto para conteúdo que raramente muda. SSR renderiza a cada request, necessário quando a página depende do usuário ou de dados que precisam estar atualizados. ISR serve uma página estática e a regenera em background depois de um intervalo de revalidation, dando velocidade estática com dados frescos o suficiente. CSR renderiza no navegador e serve bem para dashboards atrás de login onde SEO não importa.

O que são React Server Components e em que diferem dos client components?

Server components rodam só no servidor, então podem consultar um banco de dados ou ler arquivos diretamente e nunca enviam seu código para o navegador. Eles não podem usar state, effects, ou APIs do navegador. Client components são o modelo tradicional do React e são necessários para interatividade. O padrão é manter as páginas como server components e empurrar "use client" o mais para baixo possível na árvore para que o bundle se mantenha pequeno.

Por que a diretiva "use client" é necessária?

No App Router cada componente é um server component por padrão; "use client" marca a fronteira onde o bundle do cliente começa. Tudo que é importado abaixo dessa fronteira é enviado ao navegador, por isso colocá-la no topo de um layout acidentalmente torna toda a subárvore client-side. Sem ela, chamar useState ou anexar um handler onClick lança um erro em tempo de build.

Como funciona o caching no App Router? O que é revalidate?

O Next faz cache em várias camadas: o cache de resultado de fetch, o cache de rota completa para a saída renderizada, e o cache de router do cliente para navegações. revalidate configura por quanto tempo uma entrada em cache permanece fresca, seja via fetch ou exportado do segmento de rota. Para atualizações orientadas por evento você chama revalidatePath ou revalidateTag depois de uma mutação, o que é mais preciso do que uma janela de tempo.

O que são Server Actions e quando você as usa?

Uma Server Action é uma função async marcada "use server" que um client component pode chamar diretamente, com o Next cuidando da serialização e do round trip de rede. Ela substitui escrever uma rota de API para mutações simples como envios de formulário, e se combina com revalidatePath para atualizar dados depois. Como é um endpoint público por baixo, ela ainda precisa validar o input e verificar a autorização.

Como o next/image otimiza imagens?

Ele gera variantes responsivas em formatos modernos como WebP e AVIF, serve o tamanho que corresponde ao viewport, faz lazy-load por padrão, e reserva espaço de layout para que a página não pule. Exigir width e height explícitos ou a prop fill é o que elimina o cumulative layout shift. O resultado geralmente é a maior melhoria de Core Web Vitals em uma app Next.

O que são streaming e Suspense no Next.js?

Streaming envia HTML ao navegador em chunks à medida que fica pronto em vez de esperar a fonte de dados mais lenta. Envolver um componente lento em Suspense com um fallback deixa o resto da página renderizar imediatamente enquanto essa seção chega depois. Na prática isso significa que um widget lento de recomendações de produto não atrasa mais a página inteira, o que melhora a performance percebida e o time to first byte.

Como você implementa metadata dinâmica para SEO?

Exporte generateMetadata de uma página ou layout — ela recebe os params da rota, pode aguardar dados, e retorna title, description, canonical, e campos de Open Graph. Para páginas estáticas o export de metadata mais simples é suficiente. Adicione um arquivo opengraph-image na pasta da rota e o Next gera a imagem de preview social para essa rota automaticamente.