The Next.js 15 Caching System: Request Memoization & Data Cache

Next.js features an enterprise-grade multi-tier caching architecture designed to optimize latency and minimize database load. In Next.js 15, caching defaults are engineered to be uncached by default for fetch requests, ensuring developers have complete, explicit control over caching behaviors.

1. The Four Caching Layers in Next.js

1. 1
   Request Memoization (React Component Tree): Deduplicates identical fetch(url) calls made across multiple components during a single server render pass.
2. 2
   Data Cache (Persistent Cross-Request Cache): Stores data fetch results across user requests and deployments.
3. 3
   Full Route Cache (Server): Caches the rendered HTML and React Server Component Payload of static routes on the server.
4. 4
   Router Cache (Client Browser): In-memory cache in the browser that stores previously visited route segments for instant back/forward navigation.

2. Explicit Caching with fetch() in Next.js 15

In Next.js 15, fetch requests are no longer cached by default (defaulting to cache: 'no-store'). Developers explicitly define caching strategies:

1. Force Cache (Static Data)

Ideal for blog articles, course listings, or product catalogs that rarely change:

2. Time-Based Revalidation (ISR - Incremental Static Regeneration)

Cache data for a specific duration (e.g. 60 seconds), then automatically revalidate in the background when requested:

3. No-Store (Dynamic Real-Time Data)

Always fetch fresh data directly from the upstream source on every request:

3. On-Demand Cache Invalidation with Tags

Next.js provides cache tagging for fine-grained, instantaneous cache purging:

When an admin updates product 10 in a dashboard, you can purge the cache on-demand instantly using revalidateTag('product-10')!