Entendendo o novo comportamento de cache no fetch do Next.js 14
Saiba como o Next.js 14 atualizou o comportamento de caching nas funções Fetch e como configurar corretamente páginas e rotas para manter controle total do carregamento de dados.
Por que isso é importante
Com o novo comportamento padrão do fetch no Next.js 14, muitos desenvolvedores podem enfrentar resultados inesperados ao lidar com dados dinâmicos. Entender e controlar o cache é essencial para evitar inconsistências e garantir que os dados apresentados estejam sempre atualizados com a experiência desejada pelo usuário.
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 cache: 'no-store' à requisição, o que informava explicitamente ao Next para não reutilizar os dados do cache.
⚠️Atenção
Esse funcionamento anterior causava bastante confusão, especialmente para quem estava começando no ecossistema do Next.js, por não ser o comportamento esperado de uma chamada de rede padrão.
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.
✅Boa notícia
Isso significa que, a menos que você configure manualmente opções de cache, os dados serão buscados da fonte toda vez que a página for carregada.
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:
cache: 'force-cache' como configuração, o Next irá armazenar e reutilizar a resposta dessa chamada.dynamic = 'force-static' ou 'auto', o que determina o comportamento de cache da página como um todo.export const fetchCache = 'force-cache' direto no arquivo da rota, afetando todas as chamadas fetch da página.ℹ️Atenção ao comportamento por rota
A configuração da rota pode sobrepor configurações individuais feitas nas chamadas fetch. Sempre verifique a precedência das opções para não cair em armadilhas de cache inesperado.
Comparando comportamentos
Comportamento Antigo (pré Next.js 14)
Caches automáticos com fetch do tipo GET, exigindo configuração manual para evitar caching.
Prós
- Boa performance imediata
- Menor número de requisições
Contras
- Comportamento confuso para novatos
- Não reflete mudanças de dados facilmente
Novo Comportamento (Next.js 14+)
Sem caching implícito. Cabe ao desenvolvedor decidir o que deve ser cacheado.
Prós
- Previsível e alinhado ao comportamento padrão da web
- Mais controle sobre estado dos dados
Contras
- Exige configuração cuidadosa caso o cache seja necessário
- Possível aumento de requisições
Cuidados adicionais
❌Evite erros silenciosos
Se esquecer de configurar force-cache em páginas onde caching é importante, a aplicação poderá fazer chamadas desnecessárias constantemente, afetando performance.
⚠️Atenção com previews
Durante desenvolvimento ou pré-visualização de dados dinâmicos, o cache pode mascarar alterações. Certifique-se de invalidar ou desabilitar cache ao testar novas funcionalidades.