React Academy · Aula

unstable_cache e React cache()

Armazene resultados de funções dispendiosas em cache por solicitação ou entre solicitações com os utilitários de cache do Next.js.

unstable_cache e React cache() é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Duas utilidades de armazenamento em cache

O Next.js fornece duas utilidades de armazenamento complementares: unstable_cache para armazenamento persistente entre solicitações e o cache() do React para desduplicação por solicitação.

cache() do React — Desduplicação por solicitação

cache(fn) do React memoriza o resultado de uma função durante uma única passagem de renderização no servidor. Dois componentes de servidor que chamam a mesma função armazenada recebem o mesmo resultado sem uma segunda chamada ao banco de dados ou ao serviço.

import { cache } from 'react';

export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both components call getUser(id) — only one DB query fires per request
// component A: const user = await getUser('1');
// component B: const user = await getUser('1'); // uses cached result

unstable_cache — Cache persistente

unstable_cache(fn, keyParts, options) mantém o resultado entre as solicitações até que ele seja revalidado explicitamente. Pense nele como fetch({ next: { revalidate } }), mas para qualquer função assíncrona (consultas ao banco de dados, chamadas ao Redis etc.).

import { unstable_cache } from 'next/cache';

const getProducts = unstable_cache(
  async () => db.products.findMany(),
  ['products-list'],      // cache key parts
  { revalidate: 60, tags: ['products'] } // options
);

// In a Server Component:
const products = await getProducts();

Partes da chave do cache

O segundo argumento de unstable_cache é uma matriz de strings que formam a chave do cache. Inclua todas as variáveis que afetam a saída.

const getUserPosts = unstable_cache(
  async (userId: string) => db.posts.findMany({ where: { userId } }),
  ['user-posts'],         // base key
  { tags: [`user-${userId}-posts`] } // per-user tag
);

// Call with userId — Next.js appends the argument to the key:
const posts = await getUserPosts(userId);

Etiquetas para revalidação sob demanda

Adicione etiquetas às funções armazenadas em cache e invalide-as com revalidateTag() quando os dados mudarem — por exemplo, após uma mutação em uma ação do servidor.

// Server Action
async function createProduct(data: FormData) {
  'use server';
  await db.products.create({ data: parseFormData(data) });
  revalidateTag('products'); // invalidates all cached functions tagged 'products'
  redirect('/products');
}

Revalidação baseada em tempo

Defina revalidate: N nas opções para revalidar o cache após N segundos, de forma semelhante ao ISR nas chamadas fetch.

const getStats = unstable_cache(
  async () => computeHeavyStats(),
  ['dashboard-stats'],
  { revalidate: 300 } // recompute at most every 5 minutes
);

Combinando cache() e unstable_cache

Use cache() dentro de unstable_cache para funções chamadas de vários lugares durante uma renderização: elimine duplicatas dentro da solicitação e mantenha o resultado entre solicitações.

// Deduplicate the DB call within a request:
export const getRawUser = cache(async (id: string) => db.user.findUnique({ where: { id } }));

// And cache the result persistently:
export const getUser = unstable_cache(getRawUser, ['user'], { revalidate: 60, tags: ['user'] });

Limitações de unstable_cache

unstable_cache é marcado como instável porque a API pode mudar antes de ser estabilizada. As funções armazenadas em cache não podem acessar dados específicos da solicitação, como cookies ou cabeçalhos.

cache() do React para dados do leiaute

Envolva as buscas de dados no nível do leiaute com cache() para que tanto o leiaute quanto qualquer página aninhada que chame a mesma função compartilhem o resultado durante uma única renderização.

// lib/data.ts
export const getCurrentUser = cache(async () => {
  const session = await getServerSession();
  return db.user.findUnique({ where: { id: session?.userId } });
});

// layout.tsx and page.tsx both call getCurrentUser() — one DB query

Quando usar cada um

cache(): elimina chamadas idênticas duplicadas durante uma renderização (na mesma solicitação). unstable_cache: mantém os resultados entre várias solicitações até que sejam revalidados. Use fetch + next.revalidate ao chamar APIs HTTP externas.

Verificação rápida

Qual é a principal diferença entre o cache() do React e o unstable_cache do Next.js?

Recapitulação

cache(fn) elimina chamadas duplicadas durante uma única passagem de renderização — ideal para dados compartilhados entre leiautes e páginas. unstable_cache(fn, keys, { revalidate, tags }) mantém os resultados entre solicitações, com invalidação baseada em tempo ou em etiquetas — ideal para consultas dispendiosas ao banco de dados.

Perguntas Frequentes

A aula “unstable_cache e React cache()” é grátis?

Sim — o texto completo de “unstable_cache e React cache()” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “unstable_cache e React cache()”?

Armazene resultados de funções dispendiosas em cache por solicitação ou entre solicitações com os utilitários de cache do Next.js. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “unstable_cache e React cache()”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

fetch() com opções de cache no Next.js
unstable_cache e React cache()
Regeneração estática incremental (ISR)
Ações de servidor para mutações de dados

← Voltar para React Academy