Why Shallow routing concept in NextJS? - Purpose & Use Cases

The Big Idea

What if you could change the URL without making your users wait for a full page reload?

The Scenario

Imagine you have a website where users can filter products by category. Every time they click a filter, the whole page reloads, making them wait and losing their scroll position.

The Problem

Reloading the entire page for small changes is slow and frustrating. It also resets the page state, like scroll position or form inputs, causing a poor user experience.

The Solution

Shallow routing lets you change the URL and update parts of the page without a full reload. This keeps the page state intact and makes navigation feel instant and smooth.

Before vs After

✗ Before

router.push('/products?category=shoes') // full reload

✓ After

router.push('/products?category=shoes', undefined, { shallow: true }) // no reload

What It Enables

It enables fast, seamless navigation that feels like a single-page app while keeping URLs in sync.

Real Life Example

On an online store, users can switch filters or sort options quickly without losing their place or waiting for the page to reload.

Key Takeaways

Manual full page reloads cause delays and lose page state.

Shallow routing updates the URL without reloading the page.

This creates a smoother, faster user experience with preserved state.