React Academy · Aula

fetch() com opções de cache no Next.js

Use as opções force-cache, no-store e revalidate em fetch para controlar o comportamento do armazenamento em cache.

Aula 1 de 413 etapas

fetch() com opções de cache no Next.js é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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.

Obtenção de dados estendida no Next.js

O Next.js estende a API nativa fetch() com uma opção next para controlar o armazenamento em cache e a revalidação. Isso funciona somente em componentes de servidor e manipuladores de rota.

Armazenamento forçado em cache (padrão)

Por padrão, o fetch() no Next.js usa force-cache — armazena a resposta indefinidamente e a reutiliza em todas as solicitações até que seja revalidada explicitamente.

// Cached forever (build-time static)
const res = await fetch('https://api.example.com/config', {
  cache: 'force-cache',
});
const config = await res.json();

Sem armazenamento — sempre atualizado

no-store desativa completamente o armazenamento em cache. Todas as solicitações chegam à origem. Use-o para dados personalizados ou confidenciais.

// Never cached — fresh on every request
const res = await fetch('https://api.example.com/user/me', {
  cache: 'no-store',
});
const user = await res.json();

revalidate — ISR baseada em tempo

A opção next.revalidate armazena a resposta em cache, mas a revalida a cada N segundos em segundo plano (padrão de atualização durante o uso de dados obsoletos).

// Revalidate every 60 seconds
const res = await fetch('https://api.example.com/products', {
  next: { revalidate: 60 },
});
const products = await res.json();

revalidate no nível do segmento

Exporte uma constante revalidate de uma página ou layout para aplicar um intervalo de revalidação a todas as obtenções de dados nesse segmento.

// app/products/page.tsx
export const revalidate = 60; // all fetches in this page revalidate every 60s

export default async function ProductsPage() {
  const products = await fetch('https://api.example.com/products').then(r => r.json());
  return <ProductList products={products} />;
}

next.tags — Revalidação baseada em marcadores

Atribua marcadores a uma chamada de obtenção com next.tags. Use revalidateTag(tag) em uma ação de servidor ou em um manipulador de rota para invalidar sob demanda todos os caches associados ao marcador.

const res = await fetch('https://api.example.com/posts', {
  next: { tags: ['posts'] },
});

// In a Server Action or route handler:
import { revalidateTag } from 'next/cache';
revalidateTag('posts'); // invalidates all fetches tagged 'posts'

revalidatePath

revalidatePath(path) invalida o cache de um caminho de URL específico, fazendo com que ele seja regenerado na próxima solicitação.

import { revalidatePath } from 'next/cache';

// After creating a new post:
revalidatePath('/blog'); // purge /blog page cache
revalidatePath('/blog/[slug]', 'page'); // purge all /blog/[slug] pages

Desativação do cache por funções dinâmicas

Chamar cookies(), headers() ou ler searchParams em uma página faz com que ela se torne dinâmica — o armazenamento em cache é totalmente desativado para essa página.

import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const token = cookies().get('token');
  // This page is now dynamic — not cached
  const user = await getUser(token?.value);
  return <Profile user={user} />;
}

Desduplicação

O Next.js elimina chamadas de obtenção idênticas durante uma única passagem de renderização — se dois componentes de servidor obtiverem os dados do mesmo endereço, apenas uma solicitação será feita.

Memoização de solicitações vs. armazenamento em cache

Há duas camadas de armazenamento: Memoização de solicitações (desduplicação por solicitação, automática) e o armazenamento de dados (persistente, controlado pelas opções de armazenamento e revalidate).

Depuração do comportamento do armazenamento

Execute next build e verifique a saída da compilação — cada rota mostra sua estratégia de renderização: Estática (em cache), Dinâmica (sem cache) ou ISR (intervalo de revalidação).

Verificação rápida

Qual opção de armazenamento em cache da obtenção de dados você deve usar para dados que mudam raramente, mas precisam ser atualizados sem uma nova implantação completa?

Responda na aula interativa

Recapitulação

Use cache: 'force-cache' para dados estáticos, cache: 'no-store' para dados sempre atualizados e next: { revalidate: N } para ISR. Associe marcadores às obtenções de dados com next.tags e chame revalidateTag() para fazer a invalidação sob demanda. As funções dinâmicas desativam automaticamente o armazenamento em cache das páginas.

Grátis para começar

Aprenda React com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 88
Aulas: 324

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “fetch() com opções de cache no Next.js” é grátis?

Sim — o texto completo de “fetch() com opções de cache no Next.js” é 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 “fetch() com opções de cache no Next.js”?

Use as opções force-cache, no-store e revalidate em fetch para controlar o comportamento do armazenamento em cache. 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 1 de 4.

Quanto tempo leva a aula “fetch() com opções de cache no Next.js”?

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