O armazenamento em cache no Next.js não se trata apenas de economizar tempo - trata-se de reduzir solicitações de rede redundantes, manter os dados atualizados e fazer com que seu aplicativo funcione como uma estrela do rock.
Esteja você tentando manter os dados em cache por mais tempo ou atualizá-los sob demanda, Next.js oferece todas as ferramentas de que você precisa. Neste artigo, explicaremos como usar o cache de maneira eficaz em Next.js

Next.js estende a API de busca para fornecer superpoderes quando se trata de armazenamento em cache. Com opções de busca simples como cache: 'no-store' e cache: 'force-cache', você pode controlar facilmente quando e como os dados são armazenados em cache.

Sempre atualizado com cache: 'no-store' (equivalente a instável_noStore())

Deseja sempre dados atualizados? cache: 'no-store' é o ideal. Esta opção de busca ignora totalmente o cache e obtém os dados mais recentes em cada solicitação. É perfeito quando você precisa de precisão em tempo real – não são permitidos restos da busca de ontem.

Nota: Você também pode usar unstable_noStore() se quiser ignorar o cache em um componente do servidor. A sintaxe pode mudar posteriormente, então use cache: 'no-store' para estabilidade.

Reutilizar dados com cache: 'force-cache' (equivalente a instável_cache())

Por outro lado, se você concorda em usar dados em cache (pense em conteúdo estático que não muda com frequência), escolha cache: 'force-cache'. Isso salvará a resposta para uso futuro e ignorará solicitações de rede redundantes.

Nota: unstable_cache() também armazena dados em cache, mas usar o estável cache: 'force-cache' é mais confiável se você estiver evitando surpresas no futuro.

Mantenha tudo atualizado com revalidações

Às vezes, os dados armazenados em cache precisam de uma atualização, seja após um determinado período ou quando acionados por um evento. Para sua sorte, Next.js permite revalidar seus dados armazenados em cache de várias maneiras.

Revalidar com o tempo: next.revalidate

Se seus dados precisarem ser atualizados periodicamente (como a cada hora ou dia), você pode definir um período de revalidação usando a opção next.revalidate em sua solicitação de busca. Ele coletará os dados mais recentes após o tempo especificado, mantendo os itens em cache pelo resto do tempo.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

Revalidação sob demanda com tags: revalidateTag()

Agora, imagine que você pode dizer ao Next.js para atualizar bits específicos de dados em cache quando algo importante acontece, como o envio de um formulário ou uma nova postagem de blog indo ao ar. Você pode atribuir tags aos seus dados em cache e revalidar essas tags sempre que necessário.

Dessa forma, você pode atualizar manualmente partes do seu cache sob demanda, sem esperar pela próxima revalidação agendada.

Usando os métodos instáveis

Se você é do tipo aventureiro, também pode usar os métodos unstable_noStore() e unstable_cache() diretamente nos componentes do servidor para gerenciar o comportamento de cache. Apenas tenha em mente que eles são "instáveis" por um motivo, então podem mudar no futuro (ou podem ter sido alterados no momento em que você está lendo).

Ou se você gosta de cache, veja como você pode usar instável_cache():

Ignore a perfuração de suporte

Aqui está um truque interessante: se você estiver buscando os mesmos dados em vários componentes (como Layout, Página e alguns componentes internos), não se preocupe em buscá-los uma vez no topo e passá-los para baixo ou ter que faça uma solicitação desses dados várias vezes em vários componentes que causam lentidão no desempenho. Next.js memoiza automaticamente as solicitações de busca durante a renderização do servidor, o que significa que se você buscar os mesmos dados várias vezes, é inteligente o suficiente para acessar a rede apenas uma vez e compartilhar o resultado em vários componentes.

Resumindo

Next.js oferece todas as ferramentas necessárias para gerenciar o cache de maneira eficaz, seja por meio de opções de API de busca, como cache: 'no-store' e cache: 'force-cache', ou os métodos mais experimentais instável_noStore() e instável_cache(). Adicione estratégias de revalidação como next.revalidate e revalidateTag, e você terá tudo o que precisa para manter seus dados atualizados sem suar a camisa.

Fontes:
Cache Next.js