Entendendo o novo comportamento de cache
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
Entendendo o novo comportamento de cache. 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.
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:
- 1. Usando o parâmetro do fetch: ao passar
como configuração, o Next irá armazenar e
reutilizar a resposta dessa chamada. - 2. Configuração por rota: no arquivo da página, é possível
exportardynamic = 'force-static'ou'auto', o que
determina o comportamento de cache da página como um todo. - 3. Recurso global com fetchCache: também é possível definir
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.
Checklist de controle de cache no Next.js
Checklist de Implementação
- Verificou se o comportamento de caching está alinhado com sua necessidade
- Configurou cache: no-store quando necessário para dados dinâmicos
- Utilizou force-cache para otimizar performance em dados estáticos
- Validou o funcionamento em produção e durante o reloading da página
- Testou comportamento com dynamic e fetchCache nas rotas
Perguntas frequentes
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: