advanced 10 min read

Next.js Caching Architecture & Revalidation Strategies

Next.js App Router implements a 4-layer caching system: Request Memoization (per-render deduplication), Data Cache (cross-request server data), Full Route Cache (static HTML/RSC at build/revalidation), and Client Router Cache (in-browser navigation cache).

Why it matters in interviews

Debugging stale content, unintended cache hits, or excessive origin database hits in Next.js applications requires deep mastery of the 4 caching tiers and revalidation triggers (revalidatePath and revalidateTag).

Visual & Interactive Explanation

Interactive Flow Execution

1. Client Navigation

Router Cache

Check Client Router Cache (Browser session memory). If cached, instant transition.

2. Server Request

Full Route Cache

Check Full Route Cache (HTML & RSC payload on server disk/CDN). If matched, return static output.

3. Data Fetch Call

Data Cache

Check Data Cache (Persistent key-value data across server requests).

4. Request Deduplication

Request Memoization

Check Request Memoization (Deduplicates identical fetch() calls within same render tree).

5. Origin API Call

Origin Database

Fetch from database / remote API, populate Data Cache, and stream rendered RSC to client.

Code Examples & Implementation

Tag-Based On-Demand Cache Invalidation in Server Actions

// lib/api/products.ts
export async function getProduct(id: string) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    // Cache on server indefinitely until invalidated by tag
    next: { tags: ['products', `product-${id}`] },
  });
  return res.json();
}

// app/actions/update-product.ts (Server Action)
'use server';

import { revalidateTag } from 'next/cache';

export async function updateProductPrice(productId: string, newPrice: number) {
  // 1. Update database
  await db.product.update({ where: { id: productId }, data: { price: newPrice } });

  // 2. Invalidate specific product and catalog data cache atomically across all CDN edge nodes
  revalidateTag(`product-${productId}`);
  revalidateTag('products');

  return { success: true };
}

Interview-Ready Answers

Next.js has 4 caching tiers: Request Memoization deduplicates identical fetches in one render; Data Cache persists server data across requests; Full Route Cache stores HTML/RSC on server/CDN; Router Cache keeps RSC payloads in the browser session.

Official Documentation & Specifications

Next.jsNext.js: Caching in Next.js Guide

Next.jsNext.js: revalidateTag and on-demand revalidation

Next.jsNext.js: Data Fetching and Caching

Follow-up Questions & Deep Dives

Common Mistakes & Anti-Patterns

Thinking that 'no-store' disables React request memoization (memoization still deduplicates calls within the same render pass).
Expecting revalidatePath to update other users' browser client Router Cache immediately without them navigating.
Using non-fetch libraries (like raw axios or prisma) without wrapping in React's cache() function for request deduplication.

Real-World Architectural Scenario

A product detail page has a static layout but user-specific stock badges. How do you prevent full-page dynamic SSR while keeping stock fresh?

Rate Your Readiness

Rate how comfortably you can explain this in an interview to update your global readiness gauge:

Rate your confidence: