The Four Distinct Cache Layers in Next.js
Next.js incorporates four distinct caching layers: 1) Request Memoization (per-request in-memory deduplication via React.cache), 2) Data Cache (persistent cross-request data store on the server), 3) Full Route Cache (static HTML and RSC Flight payload cached on the server at build/revalidation time), and 4) Router Cache (client-side in-memory cache of RSC payloads during a user session).
Learning Objectives
Distinguish the lifecycle, storage location, and scope of each of the four Next.js cache layers.
Explain how invalidating one layer (e.g. Data Cache) affects upstream layers (Full Route Cache).
Trace how an incoming HTTP request navigates through the caching hierarchy.
Diagnose unexpected cache hits and stale data across client and server boundaries.
Prerequisites & Background Knowledge
Why Interviewers Care
The definitive Next.js caching interview question. Candidates who cannot delineate these four layers struggle with debugging production caching bugs.
The Challenge
Diagram and contrast the four distinct caching layers in Next.js. Explain the lifetime, storage location, invalidation triggers, and purpose of each layer.
Code Architecture & Implementation
1/*2┌──────────────────────────────────────────────────────────────────────────┐3│ NEXT.JS 4-LAYER CACHING ARCHITECTURE │4├─────────────────────┬──────────────┬───────────────┬─────────────────────┤5│ Cache Mechanism │ Where Stored │ Lifetime │ Purpose │6├─────────────────────┼──────────────┼───────────────┼─────────────────────┤7│ 1. Request │ Server │ Single HTTP │ Deduplicate calls │8│ Memoization │ (Memory) │ Request │ in component tree │9├─────────────────────┼──────────────┼───────────────┼─────────────────────┤10│ 2. Data Cache │ Server │ Persistent │ Store data across │11│ │ (Disk/Redis) │ (Until tag/ │ user requests and │12│ │ │ time expiry) │ deployments │13├─────────────────────┼──────────────┼───────────────┼─────────────────────┤14│ 3. Full Route Cache │ Server │ Persistent │ Store static HTML │15│ │ (Disk/CDN) │ (Until │ & RSC payload for │16│ │ │ revalidated) │ instant delivery │17├─────────────────────┼──────────────┼───────────────┼─────────────────────┤18│ 4. Router Cache │ Client │ Browser │ Instant back/next │19│ │ (Browser RAM)│ Session │ client navigation │20└─────────────────────┴──────────────┴───────────────┴─────────────────────┘21*/2223// Example invalidating Server layers:24import { revalidateTag, revalidatePath } from 'next/cache';2526export async function updateArticleAction(articleId: string) {27 'use server';28 await db.updateArticle(articleId);2930 // 1. Purges Data Cache entry tagged 'articles'31 // 2. Automatically invalidates Full Route Cache for routes using this data!32 revalidateTag('articles');33}
Architectural Explanation
Understanding the interaction between layers is crucial: When a user visits a static route, Next.js checks the Full Route Cache. If present, it skips rendering entirely. If missing, it renders RSC components. During rendering, repeated fetches hit Request Memoization. Behind the scenes, fetch requests consult the Data Cache. If cached, data is read from disk/Redis. When data changes, calling revalidateTag() purges the Data Cache entry AND invalidates the Full Route Cache. Finally, when the user navigates on the client, the client-side Router Cache avoids refetching recently viewed RSC payloads.
Common Mistakes & Anti-Patterns
Confusing the client-side Router Cache with the server-side Full Route Cache.
Expecting server-side revalidateTag() to instantly update an open browser tab without triggering a page refresh or navigation.
Assuming Data Cache is wiped on every new deployment (in serverless/container architectures, persistent caching layers can survive deploys).
Interview Follow-Up Traps
The interviewer asks: "If I call revalidateTag() in a Server Action, why does the user still see old data when clicking the browser Back button?" Explain that the browser Back button reads from the client-side Router Cache or browser bfcache!
Frequently Asked Questions
Where is the Data Cache physically stored in self-hosted Docker containers?
It is stored on the container filesystem under `.next/cache/fetch-cache` unless a custom Incremental Cache handler (e.g. Redis/S3) is configured.
Does Request Memoization persist across different users?
No. Request Memoization is tied to a single React render pass and is destroyed once the response is sent.