Router Cache Staleness vs. staleTimes.dynamic: Trade-Off for Navigational Freshness in Next.js 15+

Which routes require fresh data?

Routes that display user-specific or time-sensitive data—such as dashboards, live feeds, or authenticated lists—require fresh data on every revisit. Static or marketing-oriented pages can typically tolerate the default stale window without user-visible staleness.

Confirmed Facts

• The Router Cache stores RSC (React Server Component) payloads per segment in the browser, serving them on back-forward navigation without contacting the server.
• In Next.js 15+, dynamic segments are no longer stale by default but inherit a non-zero staleTime.
• Setting staleTimes.dynamic: 0 in configuration forces the Router Cache to treat those segments as fresh, bypassing the cache on navigation.
• Setting staleTimes to 0 does not guarantee fresh output if the underlying data fetches use the default caching (cache: 'force-cache').
• router.refresh() and revalidatePath() clear the Router Cache but do not inherently invalidate the Data Cache unless combined with tag-based revalidation.

Likely Explanation

Even with staleTimes.dynamic = 0, a navigation will trigger a network request for the RSC payload. However, if the data fetches within that segment use default caching, the Data Cache may return a previously stored JSON response. This results in a "stale-while-revalidate" window per fetch. To ensure absolute freshness, you must use cache: 'no-store' or revalidateTag to bypass that data-layer cache.

When to use router.refresh() or revalidatePath()

Rely on router.refresh() or revalidatePath() mutations when:

1. A specific mutation affects a known set of routes (e.g., refreshing a feed after a new post is created).
2. You want to maintain the default staleTime for most routes to preserve navigation speed, only invalidating specific paths on demand.
3. Global application of no-store to every fetch would introduce unacceptable uniform latency across the app.

Verification Steps

// next.config.js
module.exports = {
  experimental: {
    staleTimes: {
      dynamic: 0, // Force fresh Router Cache for dynamic segments
    },
  },
};

// Example dynamic segment fetch with no-store
export async function fetchData() {
  const res = await fetch('https://api.example.com/items', { cache: 'no-store' });
  return res.json();
}

To verify your setup:

1. Run next dev --debug and monitor the DevTools Network tab.
2. Navigate to a dynamic route, mutate data via API, and then use browser back/forward buttons.
3. Confirm a new request is made for the RSC payload and that the data fetch includes no-store headers or is revalidated.
4. If the payload request appears but data is stale, add no-store to the fetch.