Entendendo o novo comportamento de cache

O comportamento antigo do Fetch no Next.js

Anteriormente, ao realizar requisições do tipo GET utilizando fetch dentro de componentes, páginas ou handlers no Next.js, a resposta era automaticamente cacheada. Isso significava que, ao recarregar a página diversas vezes (F5), os dados retornados permaneciam os mesmos, mesmo que a fonte dos dados tivesse mudado.

Para evitar esse comportamento, era necessário adicionar o parâmetro <code>cache: 'no-store'</code> à requisição, o que informava explicitamente ao Next para não reutilizar os dados do cache.

Como funciona o Fetch agora no Next.js 14

O Next.js mudou o comportamento padrão: agora, por padrão, nenhuma chamada com fetch é cacheada automaticamente. Isso torna as requisições mais previsíveis e alinhadas com o comportamento tradicional de aplicações web.

Como forçar o cache em determinadas rotas ou páginas

Caso deseje que páginas ou fetches específicos sejam cacheados, o Next.js também permite uma configuração explícita. Existem três formas principais de aplicar o caching manualmente:

Comparando comportamentos

Cuidados adicionais

Checklist de controle de cache no Next.js