Router cache on client in NextJS - Deep Dive

Overview - Router cache on client

What is it?

Router cache on client means storing information about pages and navigation in the user's browser memory. This helps the app quickly show pages without asking the server again. It works by saving data about visited pages and links so the app can reuse it. This makes the app feel faster and smoother.

Why it matters

Without router cache on client, every time you click a link, the app would ask the server for the whole page again. This causes delays and a choppy experience. Router cache makes navigation instant or near-instant, improving user happiness and reducing server load. It feels like flipping pages in a book instead of waiting for a new book to arrive.

Where it fits

Before learning router cache, you should understand basic routing and client-server communication in Next.js. After this, you can learn about advanced caching strategies, prefetching, and state management to optimize user experience further.

Mental Model

Core Idea

Router cache on client stores page data locally to speed up navigation by avoiding repeated server requests.

Think of it like...

It's like having a photo album at home of places you've visited, so you don't need to ask a friend to send you the pictures again each time.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ User clicks   │──────▶│ Router checks │──────▶│ Cache hit?    │
│ a link        │       │ client cache  │       │ ┌───────────┐ │
└───────────────┘       └───────────────┘       │ │ Serve from │ │
                                                  │ │ cache     │ │
                                                  │ └───────────┘ │
                                                  └──────┬────────┘
                                                         │
                                                         ▼
                                                ┌───────────────┐
                                                │ Cache miss:   │
                                                │ Fetch from    │
                                                │ server        │
                                                └───────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding Client-Side Routing Basics

Concept: Learn how Next.js handles navigation without full page reloads using client-side routing.

Next.js uses a router that changes pages by updating the URL and loading new content without refreshing the whole browser window. This means when you click a link, the app fetches only the new page data and updates the view smoothly.

Result

Navigation feels faster and smoother compared to traditional full page reloads.

Understanding client-side routing is key because router cache builds on this to make navigation even faster by reusing data.

2

Foundation

What Is Router Cache on Client?

Concept: Introduce the idea that the router saves page data locally to avoid repeated server requests.

When you visit a page, Next.js can save its data in memory on your device. Later, if you visit the same page again, the router can use this saved data instead of asking the server again. This is router cache on client.

Result

Pages load instantly or much faster on repeat visits.

Knowing that data can be saved on the client helps you understand how apps feel faster and use less network.

3

Intermediate

How Next.js Prefetches and Caches Pages

🤔Before reading on: do you think Next.js fetches page data only when you click a link, or does it sometimes fetch earlier? Commit to your answer.

Concept: Next.js prefetches linked pages in the background and caches them for instant navigation.

Next.js automatically prefetches pages linked with components when they appear in the viewport. This means it downloads page data before you click, storing it in the router cache. When you click, the page shows instantly from cache.

Result

Navigation to prefetched pages is nearly instant, improving user experience.

Understanding prefetching explains why some links feel faster even before you click them.

4

Intermediate

Cache Invalidation and Stale Data Risks

🤔Before reading on: do you think cached pages always show the latest data, or can they sometimes be outdated? Commit to your answer.

Concept: Cached pages may become outdated if the underlying data changes, so cache needs management.

Router cache stores page data as it was when first fetched. If the server data changes later, the cache might show old info. Next.js uses strategies like revalidation or manual cache clearing to keep data fresh.

Result

Without proper cache invalidation, users might see stale content.

Knowing cache can become stale helps you design apps that balance speed and data freshness.

5

Advanced

Customizing Router Cache Behavior

🤔Before reading on: do you think developers can control how and when Next.js caches pages, or is it automatic and fixed? Commit to your answer.

Concept: Developers can customize caching by controlling prefetching, cache duration, and revalidation.

Next.js allows disabling prefetching on links, manually triggering cache updates, and using data fetching methods like getStaticProps with revalidate to control cache freshness. You can also clear cache programmatically if needed.

Result

You can optimize cache for your app’s specific needs, balancing speed and accuracy.

Understanding customization lets you avoid common pitfalls and improve user experience.

6

Expert

Internal Mechanics of Next.js Router Cache

🤔Before reading on: do you think Next.js stores cached pages in browser storage like localStorage, or in memory only? Commit to your answer.

Concept: Next.js stores router cache in memory during the session, not in persistent browser storage.

Next.js keeps cached page data in JavaScript memory objects while the app runs. This means cache is fast but lost on page reload or tab close. It does not use localStorage or IndexedDB for router cache. This design favors speed and simplicity over persistence.

Result

Cached pages load instantly during navigation but reset on full reload.

Knowing cache is in-memory explains why a full reload fetches fresh data and why cache size is limited.

Under the Hood

Next.js router cache works by storing fetched page components and their data in a JavaScript object in memory. When navigation occurs, the router first checks this cache. If the page is cached, it reuses the component and data without network calls. Prefetching happens automatically for visible links, populating the cache ahead of time. Cache invalidation is managed by Next.js data fetching methods and revalidation settings. The cache lives only during the browser session and resets on reload.

Why designed this way?

This design balances speed and simplicity. In-memory cache is fast and easy to manage without complex persistence or synchronization. Prefetching improves perceived speed without waiting for user clicks. Alternatives like persistent storage would add complexity and risk stale data. The approach fits Next.js’s goal of fast, seamless navigation with minimal developer setup.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ User clicks   │──────▶│ Router checks │──────▶│ In-memory     │
│ a link        │       │ cache object  │       │ cache object  │
└───────────────┘       └───────────────┘       └──────┬────────┘
                                                         │
                                                         ▼
                                                ┌───────────────┐
                                                │ Cache hit:    │
                                                │ Render cached │
                                                │ component     │
                                                └───────────────┘
                                                         ▲
                                                         │
                                                ┌───────────────┐
                                                │ Cache miss:   │
                                                │ Fetch page    │
                                                │ from server   │
                                                └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does Next.js router cache persist after a full page reload? Commit to yes or no.

Common Belief: The router cache keeps pages even after you reload the browser tab.

Reality: Router cache is stored only in memory and is cleared on full reload or tab close.

Why it matters: Expecting cache to persist leads to confusion when pages reload slowly after refresh.

Quick: Does prefetching mean all pages in the app are downloaded upfront? Commit to yes or no.

Common Belief: Next.js prefetches every page in the app as soon as it loads.

Reality: Next.js prefetches only linked pages visible in the viewport, not the entire app.

Why it matters: Thinking all pages are prefetched can cause worries about bandwidth and performance that are unfounded.

Quick: Does router cache guarantee the freshest data always? Commit to yes or no.

Common Belief: Cached pages always show the latest server data automatically.

Reality: Cached pages can show stale data unless revalidation or manual cache updates are used.

Why it matters: Ignoring cache invalidation can cause users to see outdated information, harming trust.

Quick: Is router cache stored in browser localStorage or IndexedDB? Commit to yes or no.

Common Belief: Router cache uses persistent browser storage like localStorage to keep data between sessions.

Reality: Router cache is kept only in JavaScript memory during the session, not in persistent storage.

Why it matters: Expecting persistent cache leads to wrong assumptions about data availability after reload.

Expert Zone

1

Router cache size is limited by browser memory and can be affected by complex page components holding large data.

2

Prefetching behavior can be customized per link, but over-prefetching can waste bandwidth and slow initial load.

3

Cache invalidation strategies must consider both static and dynamic data fetching methods to avoid stale content.

When NOT to use

Router cache is not suitable when data must always be fresh, such as real-time dashboards or sensitive info. In such cases, use server-side rendering with no caching or client-side fetching with cache disabled.

Production Patterns

In production, developers combine router cache with Incremental Static Regeneration (ISR) and client-side data fetching hooks to balance speed and freshness. They also monitor cache size and disable prefetching on low bandwidth devices.

Connections

HTTP Caching

Router cache complements HTTP caching by storing page data in memory, while HTTP caching stores responses on disk or network layers.

Understanding HTTP caching helps grasp how router cache fits into the bigger picture of speeding up web apps.

Memoization in Programming

Router cache is a form of memoization where results of expensive operations (page fetches) are saved for reuse.

Knowing memoization clarifies why caching improves performance by avoiding repeated work.

Human Memory Recall

Router cache works like human short-term memory, quickly recalling recent information to avoid re-learning.

This connection shows how caching mimics natural efficient recall processes to improve speed.

Common Pitfalls

#1 Expecting cached pages to update automatically without revalidation.

Wrong approach:

Using getStaticProps without revalidate and relying on router cache to show fresh data.

Correct approach:

Use getStaticProps with a revalidate interval or client-side fetching to update data regularly.

Root cause:

Misunderstanding that router cache does not refresh data on its own leads to stale content.

#2 Disabling prefetching globally to save bandwidth without considering UX impact.

Wrong approach:

Go to Page everywhere without strategy.

Correct approach:

Disable prefetching selectively on low priority or heavy pages, keep it on main navigation links.

Root cause:

Not balancing bandwidth and speed needs causes worse user experience.

#3 Trying to persist router cache in localStorage manually.

Wrong approach:

Saving cached page data to localStorage and loading it on app start.

Correct approach:

Rely on Next.js in-memory cache and use proper data fetching methods for persistence.

Root cause:

Confusing router cache with persistent storage leads to complex bugs and stale data.

Key Takeaways

Router cache on client stores page data in memory to speed up navigation without full reloads.

Next.js prefetches linked pages automatically to make navigation feel instant.

Cache can become stale, so managing revalidation and cache invalidation is essential.

Router cache lives only during the browser session and resets on reload or tab close.

Customizing cache behavior helps balance speed, bandwidth, and data freshness in real apps.