Next.js 15 Fullstack (App Router + Server Actions) · Aula

Os quatro caches: requisição, dados, rota completa e roteador

Mapeie como cada camada de cache interage e onde surgem dados obsoletos em aplicações com App Router.

Aula 1 de 413 etapas

Os quatro caches: requisição, dados, rota completa e roteador é uma aula grátis de Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Four Caches, One Mental Model

Next.js 15 App Router has four distinct caching layers. Stale data almost always comes from one of them, so naming them precisely is the first step to debugging.

Request Memoization — dedupes identical fetch calls within a single render pass.
Data Cache — persists fetch results across requests and deployments (server-side, durable).
Full Route Cache — stores the rendered HTML + RSC payload of statically-rendered routes at build time.
Router Cache — an in-memory client-side cache of RSC payloads for visited routes.

They flow roughly client → server: Router Cache lives in the browser; the other three live on the server.

Layer 1: Request Memoization

Request Memoization is React's built-in deduplication of fetch during a single server render. If three components request the same URL with the same options, the network call fires once; the rest reuse the in-flight promise.

Scope: a single render pass (one request). It is not shared across requests.
Key: the fetch URL + options.
Benefit: you can call getUser() in the layout and the page without prop-drilling or refetching.

Only fetch is memoized automatically. For non-fetch work (DB clients, ORMs), wrap it in React's cache().

import { cache } from 'react';
import { db } from '@/lib/db';

// Without fetch, memoize manually so layout + page share one query
export const getUser = cache(async (id: string) => {
  return db.user.findUnique({ where: { id } });
});

// Both calls in the same render hit the DB only once
async function Layout({ id }: { id: string }) {
  const user = await getUser(id);
  return user.name;
}

Memoization Is Per-Render, Not Durable

A common misconception: people think Request Memoization persists data. It does not. The moment the render finishes, the memo cache is discarded.

It exists only to avoid duplicate work within one render tree.
The next incoming request starts with an empty memo cache.
Durability across requests is the job of the Data Cache, not memoization.

So if you see fresh data on request A but the same render reuses it, that's memoization. If data survives a server restart, that's the Data Cache.

Layer 2: The Data Cache

The Data Cache persists fetch results on the server across requests, users, and even deployments (until revalidated). In Next.js 15 the default changed: fetch is now uncached (no-store) unless you opt in.

cache: 'force-cache' → store and reuse the result.
next: { revalidate: N } → store, serve stale up to N seconds, then refresh.
cache: 'no-store' → never store; always hit the source.

This is the layer most responsible for “why is my data stale?” when you forgot it's cached.

// Next.js 15: opt INTO the Data Cache explicitly
async function getProducts() {
  // Revalidate at most every 60s (ISR-style)
  const res = await fetch('https://api.shop.com/products', {
    next: { revalidate: 60 },
  });
  return res.json();
}

async function getCart() {
  // Per-user, never cache
  const res = await fetch('https://api.shop.com/cart', {
    cache: 'no-store',
  });
  return res.json();
}

Tagging and Targeted Revalidation

The Data Cache supports cache tags so you can invalidate exactly the entries tied to a piece of data — ideal after a Server Action mutates the database.

Attach tags at fetch time: next: { tags: ['products'] }.
Invalidate by tag with revalidateTag('products').
Invalidate by path with revalidatePath('/products').

Both functions run on the server (Server Action or Route Handler) and purge the Data Cache and the affected Full Route Cache entries.

'use server';
import { revalidateTag } from 'next/cache';
import { db } from '@/lib/db';

export async function createProduct(formData: FormData) {
  await db.product.create({
    data: { name: String(formData.get('name')) },
  });
  // Purge every fetch tagged 'products' → next read is fresh
  revalidateTag('products');
}

Layer 3: The Full Route Cache

The Full Route Cache stores the fully rendered output of a route — both the HTML and the React Server Component (RSC) payload — on the server at build time. It only applies to statically rendered routes.

A route is static unless it uses dynamic APIs (cookies(), headers(), searchParams) or an uncached fetch.
Static routes are served instantly from this cache with no re-render.
Dynamic routes skip the Full Route Cache and render on every request.

Think of it as the rendered-output sibling of the Data Cache, which holds raw fetch data.

Static vs Dynamic: What Triggers Each

Whether a route lands in the Full Route Cache depends on what it touches during render. Reading a dynamic API opts the whole route into dynamic rendering.

Using cookies(), headers(), draftMode(), or searchParams → dynamic.
A fetch with cache: 'no-store' → dynamic.
Exporting export const dynamic = 'force-dynamic' → dynamic, always.

You can force the other direction with export const dynamic = 'force-static' to keep a route cached.

// This page becomes DYNAMIC because it reads cookies()
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const store = await cookies(); // Next.js 15: cookies() is async
  const theme = store.get('theme')?.value ?? 'light';

  // Full Route Cache is skipped; rendered fresh per request
  return <main data-theme={theme}>Welcome back</main>;
}

Layer 4: The Router Cache (Client)

The Router Cache is an in-memory, client-side store of RSC payloads for routes the user has visited or prefetched. It makes back/forward navigation instant and avoids refetching on soft navigations.

It lives in the browser and is cleared on a full page reload.
It's why clicking a <Link> back to a page shows the previous payload, even if the server data changed.
In Next.js 15, the default staleTime for page segments is 0, so dynamic pages are refetched on navigation by default.

This is the layer that confuses people most: the server already revalidated, but the client still shows old UI from its Router Cache.

Clearing the Router Cache After a Mutation

Server-side revalidation alone doesn't update the client's Router Cache. After a Server Action, you must invalidate the client cache too.

revalidatePath / revalidateTag inside a Server Action also marks the Router Cache stale, so the next navigation refetches.
router.refresh() from useRouter clears the Router Cache and re-renders server components for the current route.
A full page reload wipes the Router Cache entirely.

Pairing a Server Action's revalidateTag with the cookie-based action response keeps both server and client fresh.

'use client';
import { useRouter } from 'next/navigation';

export function RefreshButton() {
  const router = useRouter();
  return (
    <button onClick={() => router.refresh()}>
      Reload server data
    </button>
  );
}

Tracing a Request Through All Four

Follow a single navigation to see the layers cooperate:

1. Router Cache (client): if a fresh payload exists, render it instantly — stop here.
2. Full Route Cache (server): static route? serve the cached HTML/RSC.
3. Data Cache (server): dynamic render reads fetch results from here if cached/unexpired.
4. Request Memoization: within that render, duplicate fetches collapse into one.

Stale data originates at whichever layer answered first. Debug top-down: rule out the Router Cache before blaming the server.

A Pure-TS Memoization Analogy

Request Memoization is conceptually a per-render memo keyed by arguments. Here's the same idea in plain TypeScript you can run and reason about — it dedupes concurrent calls by caching the in-flight promise.

The real Next.js version resets this map each render; this demo keeps it for the program's lifetime.

function memoize<T>(fn: (k: string) => Promise<T>) {
  const inFlight = new Map<string, Promise<T>>();
  return (key: string): Promise<T> => {
    if (!inFlight.has(key)) inFlight.set(key, fn(key));
    return inFlight.get(key)!;
  };
}

let calls = 0;
const load = memoize(async (k: string) => {
  calls++;
  return `data:${k}`;
});

async function main() {
  const [a, b] = await Promise.all([load('x'), load('x')]);
  console.log(a, b, 'network calls =', calls);
}
main();

Quick Check: Stale UI After a Server Action

You run a Server Action that creates a product and calls revalidateTag('products'). The server's Data Cache and Full Route Cache are now correct, but a user who navigates back via a <Link> still sees the old list. Which layer is serving the stale data?

Responda na aula interativa

Recap: The Four Caches

You can now place any stale-data bug at the right layer:

Request Memoization — per-render fetch dedup; discarded after the render; extend to non-fetch with cache().
Data Cache — durable, cross-request fetch storage; opt in with force-cache/revalidate; purge with revalidateTag/revalidatePath.
Full Route Cache — rendered HTML/RSC for static routes; dynamic APIs opt out.
Router Cache — client-side RSC payloads for visited routes; clear with revalidation or router.refresh().

Debug top-down (client → server): rule out the Router Cache first, then Full Route, Data, and finally memoization.

Grátis para começar

Aprenda TypeScript 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: 22
Aulas: 88

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

Perguntas Frequentes

A aula “Os quatro caches: requisição, dados, rota completa e roteador” é grátis?

Sim — o texto completo de “Os quatro caches: requisição, dados, rota completa e roteador” é 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 Next.js 15 Fullstack (App Router + Server Actions), atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 4 aulas no total.

O que vou aprender em “Os quatro caches: requisição, dados, rota completa e roteador”?

Mapeie como cada camada de cache interage e onde surgem dados obsoletos em aplicações com App Router. Você pratica Next.js 15 Fullstack (App Router + Server Actions) 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 Next.js 15 Fullstack (App Router + Server Actions)?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack (App Router + Server Actions) 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 “Os quatro caches: requisição, dados, rota completa e roteador”?

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 Next.js 15 Fullstack (App Router + Server Actions)?

Sim. Cada aula de Next.js 15 Fullstack (App Router + Server Actions) 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

Os quatro caches: requisição, dados, rota completa e roteador
Estratégias de revalidação por tempo e sob demanda
Invalidação por tags para atualização granular do cache
Optando por não usar cache: renderização dinâmica e no-store

← Voltar para Next.js 15 Fullstack (App Router + Server Actions)