Caching no Next.js
4 camadas de cache: Request Memoization, Data Cache, Full Route Cache, Router Cache.
Definição
Next.js App Router tem 4 camadas de cache: 1) Request Memoization (deduplica fetches no mesmo render). 2) Data Cache (cache persistente de fetch). 3) Full Route Cache (HTML+RSC payload de rotas estáticas). 4) Router Cache (client-side cache do router).
Problema → Solução
Problema
Buscar os mesmos dados múltiplas vezes em uma renderização. Re-renderizar páginas estáticas a cada request. Carregar rotas já visitadas do servidor novamente.Solução
Next.js implementa caching agressivo por padrão em todas as camadas. Você opta por sair via cache:'no-store', dynamic, ou configurações específicas.Dica de entrevista
Tip
O caching agressivo do Next.js 14 confunde devs no início. Quando dados não atualizam, geralmente é cache. Use revalidatePath/Tag ou cache:'no-store' explicitamente.Código
// Data Cache com revalidate
fetch('/api/posts', { next: { revalidate: 60, tags: ['posts'] }});
// Force no cache
fetch('/api/posts', { cache: 'no-store' });
// Invalidar manualmente
'use server';
export async function createPost() {
await db.posts.create(...);
revalidateTag('posts');
}
// unstable_cache para queries não-fetch
const getUser = unstable_cache(
async (id) => await db.users.findUnique({ where: { id }}),
['user'],
{ revalidate: 60, tags: ['user'] }
);Perguntas de entrevista
Q.Como invalidar Data Cache?▾
A.revalidatePath('/posts') ou revalidateTag('posts') em Server Actions/Route Handlers. Ou definir time-based via { next: { revalidate: 60 } } no fetch.
Q.Router Cache é o quê?▾
A.Cache client-side do payload RSC. Quando você navega para uma rota e volta, o Next.js usa o cache em vez de buscar de novo. Configurável via staleTimes em next.config.js.
Q.unstable_cache para que serve?▾
A.Memoiza chamadas a funções server-side (DB, computações) com TTL e tags. Útil para cache de queries que não usam fetch, como Prisma queries.
Termos relacionados
36/122← →