Sign in
Skip to solution
hardSystem Design

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

443 views
01

Understand the problem

The four overlapping caches in the App Router.

nextjscachingdata-cacherouter-cache
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

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.

Solution ready — 2 min read

Classified // press E to declassify

04

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();
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 86 of 95 decoded in the Next.js track. One more won't hurt.

Back to track