Otimizar performance com cache no Next.js: como usar a Next API de cache
11 minutos de leitura
Quando falamos em performance e carregamento instantâneo no Next.js, um conceito fundamental é o uso de cache para API, buscando acelerar o data fetching.
Este artigo explica como usar cache no Next.js, explorando desde conceitos como Next.js cache, Next API, fetch e unstable_cache até exemplos práticos de como otimizar performance em aplicações modernas usando recursos como cache com Prisma e as novas APIs da versão 14.
Confira como revalidar e gerenciar cache, implementar cache components next, usar diretivas como use cache e revalidateTag next, e dicas para migrar do unstable_cache para as soluções mais atuais.
Então, bora lá! :)
O que é e como funciona a Next API de Cache? Cache e performance no Next.js explicados
A partir da versão 14, a equipe do Next.js introduziu a função unstable_cache como uma API de cache de baixo nível.
Importante: esta API foi substituída pela diretiva use cache no Next.js 16 (lançado em outubro de 2025), que agora é a forma recomendada de implementar cache.
O objetivo principal é simplificar o armazenamento de operações custosas, como consultas a bancos de dados, e permitir a reutilização desse cache em várias requisições.
O funcionamento do cache pode ser resumido assim: após uma requisição, os dados são armazenados para uso futuro.
Isso significa que não é necessário acessar novamente o banco de dados para recuperar esses dados, pois já estão disponíveis na camada de cache.
Esta camada geralmente fica mais próxima da aplicação, facilitando e acelerando o acesso às informações.
O fluxo de cache, de maneira simplificada, funciona assim: ao fazer uma chamada de API, primeiro o Next verifica o cache. Se a resposta para essa chamada já está lá, pegamos a resposta do cache e a enviamos para o cliente.
Se não estiver, chamamos o servidor para obter a resposta HTTP. A resposta do servidor é salva primeiro no cache antes de ser enviada ao cliente.
Vantagens e motivos para usar cache no Next.js
Ao armazenar dados frequentemente acessados no cache, é possível reduzir o tempo de resposta, pois as informações podem ser recuperadas rapidamente sem necessidade de consultas adicionais ao servidor ou banco de dados.
Isso não só melhora o carregamento das páginas, como também economiza recursos e aumenta a escalabilidade da aplicação.
Além disso, ao reduzir a latência e melhorar a velocidade, o cache contribui para uma navegação mais fluida, melhorando a experiência de quem utiliza a aplicação.
É importante salientar que a Cache API do Next.js não é equivalente à Cache API do React.
Entender a diferença entre cache de componentes Next (Cache API do React) e cache da API Next.js é importante para não confundir os mecanismos, já que a cache do Next.js armazena fetchs e respostas de API, enquanto a do React é voltada ao cache de componentes do lado do servidor.
Como fazer data fetching com cache no Next.js
A Cache API pode ser utilizada para otimizar a busca de dados (data fetching) em aplicações Next.js.
Ao usar a função fetch, você pode configurar o comportamento de caching e revalidação para cada requisição ao servidor.
O que é revalidação e por que ela é importante?
No contexto de cache, revalidação refere-se ao processo de atualização dos dados armazenados para garantir que estejam sempre atualizados.
Por exemplo, ao realizar a busca de dados usando a função fetch, é possível configurar tanto como e quando os dados são armazenados em cache, quanto como eles serão revalidados.
Isso permite definir regras para verificar se os dados em cache continuam atualizados em relação aos dados do servidor.
Se os dados no cache forem considerados desatualizados ou inválidos, o sistema automaticamente faz uma nova requisição ao servidor para buscar e armazenar a versão mais recente dos dados, garantindo assim que o usuário sempre tenha acesso às informações mais atualizadas.
A revalidação é uma parte importante para manter o equilíbrio entre desempenho (usando dados em cache para respostas mais rápidas) e precisão (garantindo que os dados não estejam desatualizados), contribuindo para a eficiência e a experiência do usuário em aplicações web.
Como usar cache no Next.js: passo a passo com unstable_cache, diretiva use cache e exemplos com Prism
A sintaxe básica para programar cache no Next.js utiliza o método unstable_cache (em breve substituível pela diretiva use cache), e funciona assim:
const data = unstable_cache(fetchData, keyParts, options)() A função fetchData (obrigatória) é uma função assíncrona que você usa para buscar dados (por exemplo, via Prisma, REST, GraphQL) e pode ser integrada ao cache com Prisma Next, otimizando queries custosas.
O keyParts (opcional) serve para identificar dados no cache. Ou seja, para armazenar esses dados de forma eficiente, você utiliza uma chave de cache.
Esta chave é única e ajuda a identificar exatamente quais dados estão sendo armazenados.
Já o options é um objeto que controla o comportamento do cache com as seguintes propriedades:
- tags: você pode usar tags para organizar e gerenciar seus dados em cache. As tags são como etiquetas que ajudam a identificar e agrupar os dados.
- revalidate: aqui você define quanto tempo os dados devem permanecer no cache antes de serem atualizados. Isso é medido em segundos.
Aqui está um exemplo:
'use server'
import { unstable_cache } from "next/cache";
import prisma from '../lib/prisma';
async function Page({ user }) {
// Define a função que busca os posts do usuário
const fetchPosts = async (user) => {
// Consulta ao banco de dados usando Prisma para obter os posts
const posts = await prisma.post.findMany({
where: { user: user },
take: 10
});
return posts;
};
// Uso do cache do Next.js com a função de busca de posts
const posts = await unstable_cache(
() => fetchPosts(user),
undefined,
{ tags: [`posts_${user}`], revalidate: 60 }
);
// ... resto do componente
}
export default Page;Aqui, está sendo utilizado o unstable_cache do Next.js para armazenar em cache o resultado da consulta ao banco de dados. Isso significa que a função fetchPosts é executada e os seus resultados são armazenados em cache.
A próxima vez que a mesma consulta for feita (com os mesmos parâmetros), o Next.js pode entregar os dados diretamente do cache em vez de executar a consulta novamente.
Observação sobre comportamento do cache em desenvolvimento vs produção: Durante o desenvolvimento (next dev), o cache de dados está em grande parte desabilitado por padrão para facilitar o desenvolvimento.
O comportamento de cache completo só é observado em ambiente de produção (next build && next start). Sempre teste o cache em build de produção local antes de fazer deploy.
Isso é especialmente útil para melhorar o desempenho e reduzir a carga no banco de dados.
No exemplo, a opção tags é usada para construir uma tag no formato posts_ seguido pelo identificador da pessoa usuária.
Por exemplo, se o usuário tiver um identificador 123, a tag seria posts_123.
A grande vantagem aqui é que, se quisermos invalidar ou atualizar todos os dados em cache relacionados a posts de um usuário específico, podemos fazer isso facilmente referenciando esta tag.
Por último, mas não menos importante, foi aplicado o revalidate, em que ele é o responsável pelo período de tempo (em segundos) após o qual os dados em cache são considerados desatualizados e, portanto, precisam ser revalidados ou atualizados.
No caso de revalidate: 60, isso significa que 60 segundos após os dados serem armazenados no cache, eles serão marcados para revalidação.
A grande vantagem aqui é que isso garante que os dados não fiquem desatualizados por muito tempo.
Se os dados são críticos e mudam frequentemente, um tempo menor de revalidação pode ser ideal. Em contrapartida, se os dados mudam raramente, um tempo maior pode ser mais apropriado.
Para consultar mais detalhes sobre o unstable_cache visite a documentação oficial.
Vamos analisar outro exemplo?
Veja agora o uso do unstable_cache para revalidar cache no Next.js (revalidar cache Next.js) após inserção ou atualização de dados. O método revalidateTag next permite garantir que os dados mais recentes sejam apresentados sem renunciar à performance.
import { unstable_cache } from "next/cache";
import prisma from '../lib/prisma';
export function NewPostForm() {
'use server';
async function savePost(event) {
event.preventDefault();
// Obter os valores do formulário
const formData = new FormData(event.target);
const post = {
user: formData.get('user'),
content: formData.get('content'),
};
// Insere ou atualiza o post no banco de dados usando Prisma
const savedPost = await prisma.post.upsert({
where: { user: post.user },
update: { content: post.content },
create: { ...post }
});
// Revalida o cache do usuário
await unstable_cache.revalidate(`posts_${post.user}`);
// Redireciona ou atualiza a página, ou lida com o post de outra forma
// ...
}
return (
<form onSubmit={savePost}>
{/* Campos do formulário aqui */}
<input type="text" name="user" required />
<textarea name="content" required></textarea>
<button type="submit">Salvar Post</button>
</form>
);
}Pergunta comum: por que usar o unstable_cache da Next API em vez de alternativas como SWR, React-query ou até revalidar cache no Next.js manualmente?
Vamos esclarecer essas diferenças.
No Next.js, versão 12, muitos de nós optávamos por soluções externas, como a biblioteca SWR, ou recorríamos a funções nativas, como getStaticProps para lidar com o gerenciamento de cache e a busca de dados, principalmente do lado do servidor.
Essas estratégias se mostraram eficientes para armazenar dados estáticos, acelerando o carregamento das páginas.
Com a chegada do Next.js 14, o framework passou a enfatizar o uso do método nativo fetch para caching (Next.js cache fetch), tanto no lado do cliente quanto no servidor. Para casos personalizados, recomenda-se usar cache no Next.js com unstable_cache, e em breve com a diretiva use cache.
Essa abordagem busca padronizar a forma de obtenção de dados, independentemente de onde a aplicação está sendo executada.
Para desenvolver funções personalizadas de busca de dados com ORMs como Prisma (que não usam fetch), o Next.js oferece duas abordagens, dependendo da versão:
Next.js 14-15: use unstable_cache para cachear queries de banco de dados.
Next.js 16+ (junho 2026): A abordagem recomendada é usar a diretiva use cache com cacheLife e cacheTag para controle granular. O unstable_cache ainda funciona, mas não é mais recomendado para código novo.
O prefixo unstable_ no nome da função indica que a API pode sofrer mudanças entre versões maiores do Next.js. No entanto, desde sua introdução na v14, o unstable_cache tem sido amplamente usado em produção e é considerado estável na prática.
Atualização 2026: No Next.js 16, esta função foi oficialmente marcada como legado e substituída pela diretiva use cache, que agora é a API estável e recomendada para novos projetos.
Isso significa que o unstable_cache pode passar por mudanças e talvez não seja a opção mais confiável para ambientes de produção neste momento.
Para maiores detalhes sobre caching em geral com Next.js visite a documentação.
Resumo: como otimizar performance com cache no Next.js
Enquanto o Next.js evolui, especialmente no gerenciamento eficiente de cache e recuperação de dados, o ecossistema vive um estágio de transição e aprendizado.
A tendência é avançar para uma solução nativa, em que o suporte de cache do próprio Next.js tornará o gerenciamento mais flexível e granular, conforme propõe a nova Cache API.
Se quiser se aprofundar no assunto
Na Alura, há vários conteúdos sobre Next.js. Confira:
Além disso, você vai aprender conceitos-chave da ferramenta e ver na prática como criar suas primeiras páginas usando o framework.
Nessa trilha, trabalhamos com a versão 13 do Next. Nela, você aprenderá o que é e como construir um Design System usando as tecnologias mais populares de desenvolvimento web.
Aproveite e veja os conteúdos que a comunidade Next divulgou na última conferência.
