Caching in Next.js

🔍 What Is It?

Next.js has four distinct caching mechanisms that work at different levels:

1. Request Memoisation — deduplicates fetch calls within a single render pass. Scope: one request. Automatic.

1. Data Cache — persists fetch results across requests and deployments. Scope: server-side, persistent. Controlled by cache and next.revalidate options.

1. Full Route Cache — caches the rendered HTML and RSC payload for static routes. Scope: server-side, persistent. Invalidated by revalidation.

1. Router Cache — client-side cache of RSC payloads for visited routes. Scope: browser session. Duration: 30s for dynamic, 5min for static (Next.js 14).

🎯 Why Do We Need It?

Each cache layer solves a specific performance problem:

• →Request Memoisation — prevents duplicate DB queries when multiple components need the same data
• →Data Cache — prevents hitting external APIs/DBs on every request
• →Full Route Cache — serves pre-built HTML from CDN without server processing
• →Router Cache — makes client-side navigation instant (no server round trip)

🏗️ What Happens in Real Projects?

Cache layers in a product page request:

1. User navigates to /products/widget (client-side navigation)
2. Router Cache checked — if visited recently, RSC payload returned instantly
3. If not in Router Cache: server request made
4. Full Route Cache checked — if static, pre-built HTML returned from CDN
5. If dynamic: Server Component renders, calls fetchProduct(slug)
6. Data Cache checked — if fetch was cached, return cached data
7. If not cached: network request made
8. Request Memoisation — if same fetch called twice in render, second call returns memoised result

⚙️ How It Works

Controlling each cache layer:

// Data Cache: controlled by fetch options
fetch(url, { cache: 'force-cache' })     // Cache indefinitely
fetch(url, { next: { revalidate: 60 } }) // Cache for 60s
fetch(url, { cache: 'no-store' })        // Never cache

// Full Route Cache: controlled by route segment config
export const dynamic = 'force-static';   // Always static
export const dynamic = 'force-dynamic';  // Always SSR
export const revalidate = 3600;          // ISR: 1 hour

// Router Cache: invalidated by
router.refresh(); // Invalidate current route
revalidatePath('/path'); // Server-side invalidation

💻 Example

Understanding and Controlling the Cache Layers — Practical examples of controlling each cache layer.

// app/products/[slug]/page.tsx

// Option 1: Static with ISR (default for most product pages)
export const revalidate = 3600; // Revalidate every hour

// Option 2: Force dynamic (SSR) — for personalised content
export const dynamic = 'force-dynamic';

// Option 3: Force static — never dynamic, even if cookies() is called
export const dynamic = 'force-static';

// Option 4: Opt out of caching for dynamic params not in generateStaticParams
export const dynamicParams = true; // SSR unknown slugs (default)
export const dynamicParams = false; // 404 unknown slugs

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits