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.

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;
}

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)