hardSystem Design

What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?

Q: What are the caching layers in Next.js (Request Memoization, Data Cache, Full Route Cache, Router Cache)?

**TL;DR.** Four overlapping caches: **Request Memoization** dedupes identical fetches within one render; the **Data Cache** persists fetch results across requests/deploys; the **Full Route Cache** stores rendered static routes; the **Router Cache** holds visited routes **client-side** for instant back/forward. Each has its own invalidation. Request memoization per render Data Cache fetch results <text class='d-sub' x

443 views

Understand the problem

The four overlapping caches in the App Router.

nextjscachingdata-cacherouter-cache

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Which cache each control touches

// Request memoization: same URL fetched twice in one render → 1 call
await fetch('/api/user'); await fetch('/api/user');

// Data Cache: persist + revalidate
await fetch('/api/posts', { next: { revalidate: 60, tags: ['posts'] } });

// Invalidate Data + Full Route cache:
revalidateTag('posts');
// Refresh the client Router Cache:
router.refresh();

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the Router Cache in Next.js and what are its implications?

How do you implement dynamic Open Graph images in Next.js (ImageResponse)?