Discuss Client-side Router Cache?
Next.js has an in-memory client-side router cache that stores the RSC payload of route segments, split by layouts, loading states, and pages. When a user navigates between routes, Next.js caches the visited route segments and prefetches the routes the user is likely to navigate to. This results in instant back/forward navigation, no full-page reload between navigations, and preservation of React state and browser state.
- 1
Layouts are cached and reused on navigation (partial rendering).
- 2
Loading states are cached and reused on navigation for instant navigation.
- 3
Pages are not cached by default, but are reused during browser backward and forward navigation. You can enable caching for page segments by using the experimental staleTimes config option.
Scenario Questions
0-2 years experience
- 1If you add `router.prefetch('/about')` in a component, what happens when the user later clicks the About link?
- 2How would you clear the client‑side router cache for a page after a user submits a form?
- 3What does shallow routing do to the router’s cached data when you navigate between pages?
2-5 years experience
- 1You notice some users still see stale content after a deployment when navigating client‑side. Walk me through how you’d debug the router cache.
- 2Explain the trade‑offs between using `router.replace` versus `router.push` with respect to cache behavior.
- 3If a page must always fetch fresh data on navigation, how would you configure the router or data‑fetching methods to achieve that?
5-8 years experience
- 1Design a caching strategy for client‑side navigation in a large Next.js app that mixes static and server‑rendered pages. How do you decide what to cache and when to invalidate?
- 2What edge cases arise when you use `router.events` to manually manage cache during back/forward navigation?
- 3How would you measure and improve the performance impact of the router cache on first‑contentful‑paint across many routes?
8+ years experience
- 1Your organization is migrating from the pages router to the new app router. How would you plan the transition of client‑side router caching to avoid regressions?
- 2Discuss cross‑team considerations when standardizing cache‑invalidation policies for client‑side navigation in a monorepo with multiple Next.js services.
- 3What long‑term maintenance challenges arise from heavy reliance on client‑side router cache, and how would you mitigate them at an architectural level?
Follow-up Questions
- What would you look for in DevTools to verify the router cache is being hit?
- How does ISR revalidation interact with client‑side cache?
- When might you deliberately disable prefetching for a route?