🚀 Caching in Next.js: The Four-Tier System Explained

Next.js provides a sophisticated, multi-layered caching strategy to optimize performance and user experience. Understanding these caching layers is crucial for building fast, scalable applications.

In this article, we'll break down the four primary caching systems in Next.js, explain how they work, and highlight how they interact.

🗂️ The Four Caches in Next.js

Cache Type	Mechanism	Where	Purpose	Duration
Request Memoization	Return values of functions	Server	Re-use data within a single render pass	Per-request lifecycle
Data Cache	Data	Server	Share fetched data across users and builds	Persistent (revalidatable)
Full Route Cache	HTML and RSC Payload	Server	Speed up full page rendering	Persistent (revalidatable)
Router Cache	React Server Component (RSC) Payload	Client	Speed up client-side navigation	Per session or time-based

1️⃣ Request Memoization (Server: In-Memory)

✅ What It Is:

Memoization of fetch results during a single server render pass.

✅ How It Works:

• The first fetch for a specific request is a MISS.
• Subsequent fetches for the same request within the same render pass are HITs.
• Cleared after the render completes.

✅ Key Points:

• Only applies to GET requests.
• Automatically enabled in Next.js.
• Greatly reduces redundant fetches in large React trees.

2️⃣ Data Cache (Server: Persistent)

✅ What It Is:

A persistent cache for fetched data across multiple user requests and deployments.

✅ How It Works:

• Fetch results are stored based on cache-control headers.
• Can persist even after a deployment.
• Can be revalidated using Next.js APIs like revalidatePath and revalidateTag.

✅ Key Points:

• Invalidation of this cache also invalidates the Full Route Cache.
• Supports long-term caching of data like blog posts, user profiles, etc.

3️⃣ Full Route Cache (Server: Persistent)

✅ What It Is:

Caches the HTML and React Server Component (RSC) Payload for entire routes.

✅ How It Works:

• Built at build time for static pages.
• Can be dynamically cached or revalidated.
• Supports streaming: doesn't wait for the full render to start caching.

✅ Key Points:

• Dramatically improves page load speed.
• Supports partial invalidation.
• Invalidated when underlying data changes.

4️⃣ Router Cache (Client: In-Memory)

✅ What It Is:

Client-side in-memory cache storing RSC Payloads per route segment.

✅ How It Works:

• Caches layouts, loading states, and RSC Payloads.
• Enables instant navigation and preserves state.
• Cleared on page refresh or after a configurable time.

✅ Key Points:

• Greatly improves client-side navigation.
• Supports prefetching of likely next pages.
• Cache duration can vary:
  • Static pages: ~5 min default.
  • Dynamic pages: cached only with full prefetch.

💡 What is RSC Payload?

The React Server Component (RSC) Payload is:

• A binary representation of the Server Component tree.
• Sent to the client to efficiently update the DOM.
• Contains:
  • Rendered Server Component results.
  • Placeholders for Client Components.
  • Props passed from Server to Client Components.

By default, Next.js caches both the RSC Payload and HTML per route.

🔄 Cache Interactions

Interaction	Effect
Invalidate Data Cache	Also invalidates Full Route Cache
Invalidate Full Route Cache	Does not affect Data Cache
Invalidate Router Cache via revalidatePath/Tag	Immediately invalidates both Data and Router Cache
Revalidate Data in Route Handlers	Does not affect Router Cache immediately

🔗 References

https://nextjs.org/docs/app/guides/caching#client-side-router-cache