Router cache on client in NextJS - Performance & Optimization

Performance: Router cache on client

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by reducing network requests and speeding up navigation.

Navigating between pages in a Next.js app

NextJS

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

const cache = new Map();

function Page() {
  const router = useRouter();
  const [pageData, setPageData] = useState(null);

  async function goToAbout() {
    if (cache.has('/about')) {
      setPageData(cache.get('/about'));
    } else {
      const res = await fetch('/about-data.json');
      const data = await res.json();
      cache.set('/about', data);
      setPageData(data);
    }
    router.push('/about');
  }

  return <button onClick={goToAbout}>About</button>;
}

Caches fetched data on the client to avoid repeated network requests, speeding up navigation and reducing reflows.

📈 Performance Gainreduces network requests by 100%, cuts rendering delay to under 100ms

Navigating between pages in a Next.js app

NextJS

import { useRouter } from 'next/router';

function Page() {
  const router = useRouter();

  function goToAbout() {
    router.push('/about'); // no caching, fetches fresh data every time
  }

  return <button onClick={goToAbout}>About</button>;
}

Each navigation triggers a full fetch and render, causing slower page transitions and higher network load.

📉 Performance Costblocks rendering for 200-500ms per navigation, triggers multiple reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No client cache	High (new nodes on each page)	Multiple per navigation	High due to full repaint	[X] Bad
With client cache	Low (reuse nodes/data)	Single or none	Low due to partial repaint	[OK] Good

Rendering Pipeline

When navigating, the router checks the client cache before fetching data. If cached, it skips network fetch and layout recalculation is minimized.

→Network Fetch

→Layout

→Paint

→Composite

⚠️ BottleneckNetwork Fetch and Layout

Core Web Vital Affected

LCP, INP

This affects page load speed and interaction responsiveness by reducing network requests and speeding up navigation.

Optimization Tips

1Cache route data on the client to avoid repeated network requests.

2Reuse DOM nodes and data to minimize reflows and repaints.

3Measure navigation performance using browser DevTools to verify caching effectiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of caching routes on the client in Next.js?

A Reduces network requests and speeds up page transitions

B Increases bundle size significantly

C Improves SEO by preloading all pages

D Prevents any JavaScript execution on navigation

DevTools: Performance

How to check: Record a navigation in the Performance panel. Look for network requests and layout events during page transitions.

What to look for: Fewer network requests and shorter layout times indicate effective router caching.