Router cache on client in NextJS - Step-by-Step Execution

Concept Flow - Router cache on client

User clicks link

↓

Check cache for route data

↓

Show page to user

When a user navigates, Next.js first checks if the route data is cached on the client. If yes, it loads instantly. If not, it fetches from the server and caches it for next time.

Execution Sample

NextJS

import { useRouter } from 'next/router';

const router = useRouter();

router.push('/about');

// Next.js caches /about page data on client
// Next visit loads instantly from cache

This code navigates to the '/about' page and Next.js caches the page data on the client for faster future loads.

Execution Table

Step	Action	Cache Check	Data Source	Cache Update	Page Render
1	User clicks '/about' link	Check cache for '/about'	Cache miss	Fetch from server	Render after fetch
2	Data fetched from server	N/A	Server response	Cache '/about' data	Render page
3	User clicks '/about' again	Check cache for '/about'	Cache hit	No fetch needed	Render instantly from cache
4	User clicks '/contact'	Check cache for '/contact'	Cache miss	Fetch from server	Render after fetch
5	Data fetched from server	N/A	Server response	Cache '/contact' data	Render page
6	User clicks '/contact' again	Check cache for '/contact'	Cache hit	No fetch needed	Render instantly from cache
7	User clicks '/about' again	Check cache for '/about'	Cache hit	No fetch needed	Render instantly from cache

💡 Navigation ends when user stops clicking links or closes page.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7
cache	{}	{'/about': undefined}	{'/about': data}	{'/about': data}	{'/about': data, '/contact': undefined}	{'/about': data, '/contact': data}	{'/about': data, '/contact': data}	{'/about': data, '/contact': data}
currentPage	null	'/about'	'/about'	'/about'	'/contact'	'/contact'	'/contact'	'/about'

Key Moments - 3 Insights

Why does the first click on a route take longer than the second?

The first click causes a cache miss, so Next.js fetches data from the server (see execution_table step 1 and 2). The second click hits the cache and renders instantly (step 3).

Does the cache update every time I visit a page?

No, the cache updates only on a cache miss when data is fetched from the server (see execution_table steps 2 and 5). On cache hits, no fetch or cache update happens.

What happens if I navigate to a new page not in cache?

Next.js fetches the page data from the server and caches it for future visits (see steps 4 and 5). This ensures faster loads next time.

Visual Quiz - 3 Questions

Look at the execution_table, what is the data source at step 3?

A No data source

B Cache hit

C Server fetch

D Cache miss

💡 Hint

Check the 'Data Source' column at step 3 in execution_table.

At which step does the cache first get updated with '/contact' data?

A Step 5

B Step 4

C Step 6

D Step 7

💡 Hint

Look at the 'Cache Update' column for '/contact' in execution_table.

If the cache was empty, what would happen at step 1?

A No render happens

B Cache hit and instant render

C Cache miss and fetch from server

D Page crashes

💡 Hint

Refer to the 'Cache Check' and 'Data Source' columns at step 1.

Concept Snapshot

Next.js client router caches page data after first fetch.
On navigation, it checks cache first.
Cache hit: instant render, no fetch.
Cache miss: fetch from server, then cache.
Speeds up repeated page visits.
Cache updates only on misses.

Full Transcript

When a user clicks a link in a Next.js app, the router first checks if the page data is cached on the client. If the data is cached, the page renders instantly without fetching from the server. If not cached, Next.js fetches the data from the server, caches it, and then renders the page. This caching mechanism speeds up repeated visits to the same page. The cache updates only when the data is fetched due to a cache miss. This process repeats for each navigation, improving user experience by reducing load times on subsequent visits.