What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?

Q: What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Hard > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Imagine a busy café. Memoization is the barista remembering that three people at the same table ordered the same flat white and making it once. The Data Cache is the batch of cold brew made in the morning and poured all day until someone decides it is stale. The Full Route Cache is the pre-packed sandwich in the fridge: ready before you arrive. The Router Cache is the tray you are already carrying back to your seat, so go

The problem

Question presented to candidate: "Next.js has several caches that interact. Name them, tell me where each lives and how long it lasts, and how you invalidate each one."

What a strong answer should cover:

Request Memoization: identical fetch GETs within one server render run once; lives for one request.
Data Cache: fetch results opted in with force-cache or revalidate, persisted across requests and deployments until revalidated.
Full Route Cache: the HTML and RSC payload of static routes, produced at build time or revalidation.
Router Cache (now called the Client Cache): RSC payloads kept in the browser memory for back and forward navigation and prefetched routes.
Invalidation: revalidatePath, revalidateTag, time-based revalidate, and router.refresh() for the client side; Next.js 16 docs label this four-cache model the "previous model", superseded by Cache Components.

Clarifying questions expected:

"Is Cache Components enabled?" — with it, caching is opt-in with 'use cache' and the old layer names mostly disappear.
"Where is the stale data showing up: first load or client navigation?" — it points to a different layer.

Code / implementation expected: Optional — a fetch that touches each layer, and the calls that clear them.

nextjs
caching
data-cache
router-cache

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Hard

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Imagine a busy café. Memoization is the barista remembering that three people at the same table ordered the same flat white and making it once. The Data Cache is the batch of cold brew made in the morning and poured all day until someone decides it is stale. The Full Route Cache is the pre-packed sandwich in the fridge: rea

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

One fetch touching each layer, and what clears it

// app/products/page.tsx  (static route -> Full Route Cache)
export default async function Products() {
  // Data Cache: persisted until the tag is revalidated
  const res = await fetch("https://api.example.com/products", {
    cache: "force-cache",
    next: { tags: ["products"] },
  });
  const products = await res.json();
  return <ul>{products.map((p: { id: string; name: string }) => <li key={p.id}>{p.name}</li>)}</ul>;
}

// app/products/actions.ts
"use server";
import { revalidateTag, revalidatePath } from "next/cache";

export async function productChanged() {
  revalidateTag("products", "max");   // Data Cache entries tagged "products"
  revalidatePath("/products");        // the prerendered route and client payloads
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.