Next.js has a multi-layered caching system that stores everything from API responses to rendered component trees.
Interactive Simulation Engine
The 4-Layer Cache Logic
Memoization vs. Persistence
Level 0: Source
Database / APILevel 1: Data Cache
Persistent Storage (Shared)
Level 2: Memoization
In-Memory (Per Request)
Run a simulation to see how Next.js deduplicates multiple fetch calls in a single request.
Data Cache
Memoization
Executable Code Workbench
page.tsx
Live Code Editor1// On-demand revalidation (e.g., in a webhook)
2import { revalidatePath } from 'next/cache'
3
4export async function updateAction() {
5 await db.update()
6 revalidatePath('/dashboard') // Clears cache for this route
7}Mental Model
A memory palace. Next.js tries to remember every piece of work it has done so it doesn't have to do it again next time.
Why This Exists
To make your application incredibly fast. Fetching from cache is thousands of times faster than fetching from a remote database.
Critical Note
"Cache is only on the browser. Next.js has a powerful 'Data Cache' that exists on the server (or CDN)."