0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

The Four Caches: Request, Data, Full Route, and Router

Map how each cache layer interacts and where stale data originates in App Router apps.

The Four Caches: Request, Data, Full Route, and Router is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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?

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.

Frequently asked questions

Is the “The Four Caches: Request, Data, Full Route, and Router” lesson free?

Yes — the full text of “The Four Caches: Request, Data, Full Route, and Router” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.

What will I learn in “The Four Caches: Request, Data, Full Route, and Router”?

Map how each cache layer interacts and where stale data originates in App Router apps. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?

No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Four Caches: Request, Data, Full Route, and Router” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?

Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The Four Caches: Request, Data, Full Route, and Router
  2. Time-Based and On-Demand Revalidation Strategies
  3. Tag-Based Invalidation for Granular Cache Busting
  4. Opting Out: Dynamic Rendering and no-store
← Back to Next.js 15 Fullstack (App Router + Server Actions)