Caching Mechanics
Overview
Next.js has a complex, multi-layered caching system to maximize speed. It caches data requests (Data Cache), entire rendered routes (Full Route Cache), React render payloads (Router Cache), and memoizes fetch requests during a single render.
Syntax
// 1. Request Memoization (per-request)
const data = await fetch('https://api.com'); // deduplicated
// 2. Data Cache (persistent across requests)
fetch('https://api.com', { cache: 'force-cache' });
// 3. Full Route Cache
// Entire page HTML is cached if there are no dynamic functionsCommon Pitfalls
Not realizing that the Next.js cache persists across deployments in some environments unless explicitly cleared or revalidated.
Confusing Request Memoization (cleared after rendering) with the Data Cache (persistent).
Interview Questions
What is Request Memoization in Next.js?
It is a React feature that Next.js uses to deduplicate fetch requests with the exact same URL and options within a single render pass, avoiding redundant network calls.
Real-World Example
Fetching the same user data in a layout and a nested page without performance penalties.
// layout.tsx
const user = await fetchUser(id); // hits API
// page.tsx (child)
const user = await fetchUser(id); // memoized! No extra API call.Check Your Knowledge
Test your understanding of Caching Mechanics with these quick questions.