React
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.
Next.jsCaching
Carregando
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.
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.
Como converter sua aplicação Next.js Pages para TanStack Start: diferenças práticas, perigos escondidos, pontos...
Como o Partial Pre-Rendering (PPR) pode revolucionar a performance e a flexibilidade do seu site em...
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.
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.
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.
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.
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:
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.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.
Caches automáticos com fetch do tipo GET, exigindo configuração manual para evitar caching.
Sem caching implícito. Cabe ao desenvolvedor decidir o que deve ser cacheado.
Se esquecer de configurar <code>force-cache</code> em páginas onde caching é importante, a aplicação poderá fazer chamadas desnecessárias constantemente, afetando performance.
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.