Why Router cache on client in NextJS? - Purpose & Use Cases

The Big Idea

What if your website could remember pages so well, it feels like magic when you click around?

The Scenario

Imagine clicking links on a website and waiting for each page to fully reload every time, even if you visited that page just moments ago.

The Problem

Manually reloading pages wastes time and data. It feels slow and clunky because the browser fetches everything again, even if nothing changed. This frustrates users and makes the site feel outdated.

The Solution

Router cache on client stores pages you visited so when you click back or revisit, the page loads instantly without waiting for the server. This makes navigation smooth and fast, like flipping through a photo album you've already seen.

Before vs After

✗ Before

window.location.href = '/about'; // full page reload every time

✓ After

router.push('/about'); // uses cached page for instant load

What It Enables

It enables seamless, lightning-fast navigation that feels natural and keeps users engaged without annoying delays.

Real Life Example

Think of an online store where you browse product details, then go back to the list instantly without waiting, making shopping smooth and enjoyable.

Key Takeaways

Manual page reloads cause slow, frustrating user experiences.

Client router cache stores visited pages for instant revisits.

This makes websites feel fast, smooth, and modern.