Question 1

Qual é o comportamento padrão dos Server Components no Next.js App Router para o data fetching?

Accepted Answer

Os Server Components realizam o data fetching no servidor a cada requisição por padrão, garantindo dados sempre atualizados. Diferente do Pages Router onde getServerSideProps era necessário, os Server Components tornam o SSR implícito. Para cache estático, a opção cache: 'force-cache' deve ser adicionada ao fetch.

Question 2

Qual opção de cache do fetch equivale ao getStaticProps no Pages Router?

Accepted Answer

A opção cache: 'force-cache' diz ao Next.js para armazenar a resposta em cache até ser invalidada manualmente, equivalente ao getStaticProps. Esta estratégia gera conteúdo estático que permanece em cache indefinidamente. A opção 'no-store' equivale ao getServerSideProps (re-fetch a cada requisição), enquanto next.revalidate equivale ao getStaticProps com revalidate (ISR).

Question 3

Como forçar o data fetching dinâmico a cada requisição (equivalente ao getServerSideProps)?

Accepted Answer

A opção cache: 'no-store' desabilita completamente o cache e força o re-fetch a cada requisição, equivalente ao getServerSideProps. Esta estratégia garante dados sempre atualizados mas aumenta a latência. Use para dados em tempo real (dashboards, notificações, preços ao vivo) onde a atualidade é crítica.

Data Fetching no Next.js

Qual é o comportamento padrão dos Server Components no Next.js App Router para o data fetching?

Resposta

Qual opção de cache do fetch equivale ao getStaticProps no Pages Router?

Resposta

Como forçar o data fetching dinâmico a cada requisição (equivalente ao getServerSideProps)?

Resposta

Como implementar ISR (Incremental Static Regeneration) com revalidação a cada hora?

O que faz o export 'export const revalidate = 60' no nível de página?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista