Mergulho Profundo em Caching no Next.js - Entenda e controle as quatro camadas de cache

// Camada 1: Memoização de Requisição - dedup automático dentro de um único render
// Ambos os componentes chamam a mesma função, mas apenas UMA consulta ao banco de dados é executada
async function getUser(id: string) {
  // O React deduplica isso automaticamente durante um único passe de renderização
  return db.user.findUnique({ where: { id } });
}
 
// Camada 2: Cache de Dados - cache persistente para resultados de fetch()
const data = await fetch("https://api.example.com/products", {
  next: { revalidate: 3600, tags: ["products"] },
});
 
// Camada 3: Cache de Rota Completo - HTML pré-renderizado para rotas estáticas
// Automático para páginas sem funções dinâmicas (cookies, headers, searchParams)
 
// Camada 4: Cache do Roteador - cache do lado do cliente para rotas visitadas
// Automático para todas as navegações, cacheado por 30s (dinâmico) ou 5min (estático)
 
// Invalidação
import { revalidateTag, revalidatePath } from "next/cache";
 
// Direcionado: invalida todos os fetches marcados com "products"
revalidateTag("products");
 
// Amplo: invalida uma rota específica
revalidatePath("/products");

// ---- ANTES: Nenhuma estratégia de cache - cada carregamento de página atinge o banco de dados ----
 
// app/products/page.tsx
export const dynamic = "force-dynamic"; // Desabilita TODO o cache
 
export default async function ProductsPage() {
  // Atinge o banco de dados em CADA requisição - 120ms por visita
  const products = await db.product.findMany({
    include: { category: true },
    orderBy: { createdAt: "desc" },
  });
 
  // Mesma consulta executada NOVAMENTE para a contagem
  const allProducts = await db.product.findMany();
  const totalCount = allProducts.length;
 
  return (
    <div>
      <h1>Products ({totalCount})</h1>
      {products.map((p) => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}
 
// app/products/[id]/page.tsx
export const dynamic = "force-dynamic";
 
export default async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  // Atinge o banco de dados em cada visita - mesmo para o mesmo produto
  const product = await db.product.findUnique({
    where: { id },
    include: { reviews: true, seller: true },
  });
 
  return <ProductDetail product={product} />;
}
 
// Resultado: 120ms por carregamento de página, sem cache, banco de dados sob carga constante
 
// ---- DEPOIS: Estratégia de cache em camadas - sub-50ms para páginas cacheadas ----
 
// lib/data/products.ts - Acesso centralizado a dados com cache
import { cache } from "react";
import { unstable_cache } from "next/cache";
 
// Camada 1: Memoização de Requisição - dedup dentro de um único render
// O cache() do React garante que isso só rode uma vez por passe de renderização,
// mesmo que chamado de múltiplos Server Components
export const getProductById = cache(async (id: string) => {
  return db.product.findUnique({
    where: { id },
    include: { reviews: true, seller: true },
  });
});
 
// Camada 2: Cache de Dados - cache persistente entre requisições
export const getProducts = unstable_cache(
  async () => {
    return db.product.findMany({
      include: { category: true },
      orderBy: { createdAt: "desc" },
    });
  },
  ["products-list"],          // Chave de cache
  {
    revalidate: 3600,          // Revalida a cada hora
    tags: ["products"],        // Tag para invalidação direcionada
  }
);
 
export const getProductCount = unstable_cache(
  async () => {
    return db.product.count();
  },
  ["product-count"],
  {
    revalidate: 3600,
    tags: ["products"],
  }
);
 
// app/products/page.tsx - Usa dados cacheados
export default async function ProductsPage() {
  // Ambos usam o cache "products" - rápido após a primeira requisição
  const [products, totalCount] = await Promise.all([
    getProducts(),
    getProductCount(),
  ]);
 
  return (
    <div>
      <h1>Products ({totalCount})</h1>
      {products.map((p) => (
        <ProductCard key={p.id} product={p} />
      ))}
    </div>
  );
}
 
// Camada 3: Cache de Rota Completo - páginas de produto pré-renderizadas no build time
export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { id: true } });
  return products.map((p) => ({ id: p.id }));
}
 
// app/products/[id]/page.tsx - Estaticamente gerado + ISR
export const revalidate = 3600; // ISR: regenera a cada hora
 
export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = await getProductById(id);
 
  if (!product) notFound();
 
  return <ProductDetail product={product} />;
}
 
// Invalidação: Server Action após atualização do produto
// app/actions/products.ts
"use server";
 
import { revalidateTag, revalidatePath } from "next/cache";
 
export async function updateProduct(id: string, data: ProductUpdateData) {
  await db.product.update({ where: { id }, data });
 
  // Invalida o cache de dados para todos os fetches de produto
  revalidateTag("products");
 
  // Invalida o cache da rota de página de produto específica
  revalidatePath(`/products/${id}`);
}
 
export async function deleteProduct(id: string) {
  await db.product.delete({ where: { id } });
 
  // Invalida tudo marcado com "products"
  revalidateTag("products");
 
  // Invalida a página de listagem de produtos
  revalidatePath("/products");
}

// Sem cache - dados sempre frescos
const data = await fetch("https://api.example.com/live-prices", {
  cache: "no-store",
});
 
// Equivalente: configuração de segmento de rota dinâmica
export const dynamic = "force-dynamic";
export const revalidate = 0;

// Revalidação em nível de página
export const revalidate = 60; // Revalida a cada 60 segundos
 
// Revalidação em nível de fetch
const data = await fetch(url, {
  next: { revalidate: 300 }, // Este fetch específico é cacheado por 5 minutos
});

"use server";
 
import { revalidateTag, revalidatePath } from "next/cache";
 
export async function publishPost(id: string) {
  await db.post.update({
    where: { id },
    data: { published: true },
  });
 
  // Granular: invalida apenas caches relacionados ao blog
  revalidateTag("blog-posts");
  revalidateTag(`post-${id}`);
 
  // Amplo: invalida toda a seção do blog
  revalidatePath("/blog", "layout");
}

// next.config.ts - expõe headers de status de cache
const nextConfig = {
  logging: {
    fetches: {
      fullUrl: true, // Registra URLs de fetch completas com status de cache
    },
  },
};
 
// Verifique os headers de resposta nas Ferramentas de Desenvolvedor:
// x-nextjs-cache: HIT    - servido do Cache de Rota Completo
// x-nextjs-cache: MISS   - renderizado sob demanda, agora cacheado
// x-nextjs-cache: STALE  - servido desatualizado, revalidando em segundo plano