Understanding Next.js Caching
Next.js has four distinct caching mechanisms. Understanding when and how each works is crucial for building performant applications.
0:00
0% complete
LearnStep 1 of 4
The Four Caching Layers
Learning Objectives
- •Understand Request Memoization
- •Master the Data Cache
- •Control the Full Route Cache
- •Work with the Router Cache
Lesson Outline
LearnStep 1/4
The Four Caching Layers
1. Request Memoization
React automatically memoizes fetch requests with the same URL and options during a single render.
tsx
Key: Memoization only works within a single render pass. It's automatically cleared after the component tree renders.
2. Data Cache
Next.js extends fetch to cache responses on the server, persisting across requests.
tsx
3. Full Route Cache
At build time (or revalidation), Next.js caches the rendered HTML and RSC Payload.
tsx
4. Router Cache (Client-side)
The browser caches visited routes and prefetched routes.
tsx