How Client Router Cache works in Next.js15?

Client Router Cache helps manage how data is stored and reused during client-side navigation. In simple terms, caching on the client-side ensures faster transitions between pages because it stores data temporarily, preventing repeated fetching of the same data.

What is Client Router Cache?

The client router in Next.js handles the data needed when users move from one page to another. For instance:

• When you navigate to a new page, it fetches data to display.
• If the data is cached, the page loads quickly, as it reuses the data from the cache.
• If the data is not cached, it has to fetch the data again, which can slow things down.

How Caching Worked Before Next.js 15

In Next.js 14:

• The client router cache had default caching behavior, where data fetched during navigation was stored.
• This cached data could be reused during navigation, but it sometimes caused stale data issues.
• The staleTime property was introduced as an experimental feature to manage how long data remained in the cache:
  • staleTime defines how long the cached data is considered valid before a new fetch is triggered.

What's New in Next.js 15?

In Next.js 15, the client router cache now defaults to uncached behavior:

• Fresh data is fetched on each navigation, ensuring that users see the most up-to-date content.
• StaleTime is set to 0 by default, meaning data is not stored unless explicitly configured to be cached.

This new default ensures real-time data updates, making it ideal for dynamic applications like live chats, dashboards, or any use cases where data changes frequently.

Client Router Cache FlowChart in Next.js 15

How to Configure Client Router Cache in Next.js 15

If you want to reintroduce caching, you need to configure it manually by using the staleTimes option in next.config.js:

Example: Opting into Client Router Caching

const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,  // Cache for 30 seconds
      static: 300,  // Cache for 5 minutes
    },
  },
};

export default nextConfig;

• dynamic specifies how long dynamic data should remain in the cache.
• static sets the duration for caching static content like page layouts or header data.

Real-World Scenario

Imagine a blog where users frequently switch between articles:

• Without caching, every time the user navigates, the app fetches fresh data, ensuring real-time content.
• With caching (using staleTimes), data like the list of articles can be cached for a short period (e.g., 60 seconds), improving the performance of repeated navigation.

FAQs

Q1: Why was client router caching changed in Next.js 15?

The default was changed to prevent serving stale data, ensuring users always see the most up-to-date content. This shift makes the app behave more like a real-time application.

Q2: How can I enable caching again in Next.js 15?

You can enable caching by setting the staleTimes property in the configuration. This allows you to specify how long data should remain in the cache before a new fetch.

Q3: Will this impact the performance of my app?

Yes, fresh data fetching may increase the server load slightly. However, it ensures users get the latest information, improving the user experience, especially for dynamic data.

Q4: What are the best practices for setting staleTimes?

• Use shorter durations for dynamic content (e.g., 30-60 seconds).
• Set longer durations for static content (e.g., 5-10 minutes) to reduce server requests and enhance performance.

Summary

The new client router caching behavior in Next.js 15 is designed to ensure better data freshness and real-time updates. By setting staleTimes, developers can still use caching where needed while having control over how data is cached. This approach allows for more reliable data handling across different pages.