CachingThe Four Layers
The Four Cache Layers
Next.js has four caching layers. Here's the 30-second overview.
TL;DR
Caching is the highest-leverage optimization. Four layers: CDN Cache (full responses), Route Cache (pre-rendered pages), Data Cache (fetch results), Request Memoization (deduping). Anything cacheable should be cached.
Caching is the highest-leverage optimization. A cached response costs nothing. An uncached response runs your function every time.
The Layers
Request → CDN Cache → Full Route Cache → Data Cache → Request Memoization → OriginCDN Cache
Full responses at edge - eliminates function calls entirely
Route Cache
Pre-rendered pages - eliminates SSR costs
Data Cache
fetch() results - reduces external API calls
| Layer | What It Caches | Cost Impact |
|---|---|---|
| CDN Cache | Full responses at edge | Eliminates function calls |
| Route Cache | Pre-rendered pages | Eliminates SSR |
| Data Cache | fetch() results | Reduces external calls |
| Request Memoization | Duplicate fetches in render | Minor optimization |
Which Cache Layer Should You Use?
Which Layer Is Active?
Check your build output:
npm run build○Static - Route Cache active●SSG with params - Route Cache activeƒDynamic - No Route Cache, relies on CDN/Data cache
Cost Impact
| Scenario | Without Caching | With Caching | Savings |
|---|---|---|---|
| Product page (10K/day) | 10K runs | 24 runs (ISR) | 99.8% |
| API endpoint (100K/day) | 100K runs | ~300 runs | 99.7% |
| Blog post | 5K runs | 1 run | 99.98% |
The pattern: anything cacheable should be cached.
Start with CDN Cache for API routes, or Route Cache for pages.