Next.js Router Cache: Instant Client-Side Navigation
The Next.js Router Cache is a client-side, in-memory cache that makes navigation feel instant by storing the rendered UI of visited routes. It's why navigating with <Link> is fast. The footgun: it caches UI, not data, so stale content can appear.
Why it exists
Traditional web apps re-fetch and re-render everything on navigation, which is slow. The Next.js App Router aims for the best of both: server-centric rendering with SPA-like navigation speed. The Router Cache is the key mechanism that enables this fast, client-side navigation without losing the benefits of Server Components.
The mental model
The Router Cache is an in-memory cache that lives on the client (in the browser) for the duration of a user session. It stores the React Server Component (RSC) payload—essentially the pre-rendered UI—for every route segment you visit. When you navigate back to a page, Next.js pulls this payload from the cache and renders it instantly, avoiding a round trip to the server.
How it works
When you navigate to a new route for the first time using the <Link> component, Next.js fetches the RSC payload from the server and stores it in the Router Cache. If you navigate away and then back, Next.js checks the cache first. If a fresh payload exists, it's used immediately. The cache is automatically invalidated on a hard refresh, but for dynamic data, you must manually trigger invalidation using router.refresh() or revalidation functions like revalidatePath.
When to use it
You are always using it when building with the Next.js App Router. It's not an opt-in feature; it's the default behavior that makes navigation with <Link> fast. It's particularly effective for pages that are mostly static or where content doesn't change frequently between user navigations.
When not to use it
You can't really "not use" it, but you need to manage it. The primary footgun is assuming it's a data cache. If a page displays data that can be changed by another action (e.g., a form submission), navigating back to it might show stale UI. In these cases, you must implement a strategy to invalidate the cache, such as calling router.refresh() after the mutation.
One canonical example
Imagine a blog. You click from the homepage to "Post A". Next.js fetches and caches the UI for Post A. You then click to "Post B", and its UI is also cached. If you now use the browser's back button to return to "Post A", the page loads instantly from the Router Cache without hitting the server. If a new comment was added, you would need to programmatically invalidate the cache to see it.
Interview question
Which scenario most clearly requires manual invalidation of the Next.js Router Cache to ensure fresh content?
- a.A user navigates to a new page for the first time using a Link component.
- b.A user submits a form that updates data displayed on a previously visited page.Correct
- c.A user performs a hard refresh of their browser on a page.
- d.A user navigates back to a previously visited page using the browser's back button.
Why? this is the answer
The Router Cache stores UI, not data. If a user action like a form submission changes underlying data, the cached UI for that page will become stale, requiring manual invalidation. A hard refresh automatically invalidates the cache, and navigating to new or previously visited pages without data changes uses the cache as intended without needing invalidation.
Just read this? Test yourself on what you have been reading.
Read the original → nextjs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on next.js — each one lists the topics its interview covers.
See open roles