Topic 32 of 39
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
tsx
// 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
Q:
What is Request Memoization in Next.js?
A:
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.
example
tsx
// 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.