Shallow routing concept in NextJS - Step-by-Step Execution

Concept Flow - Shallow routing concept

User clicks link or calls router.push

↓

Check if shallow routing is requested

↓

Update URL only

↓

Component stays

↓

State preserved

↓

Render updated URL

Shallow routing updates the URL without running full page data fetching or reloading, preserving component state.

Execution Sample

NextJS

import { useRouter } from 'next/router';

const router = useRouter();

router.push('/about', undefined, { shallow: true });

This code changes the URL to '/about' using shallow routing, so the page does not fully reload.

Execution Table

Step	Action	URL Before	URL After	Shallow Option	Component Reload	State Change
1	Initial page load	/home	/home	false	Yes	State initialized
2	User triggers router.push('/about', undefined, { shallow: true })	/home	/about	true	No	State preserved
3	Component renders with new URL	/about	/about	true	No	State unchanged
4	User triggers router.push('/contact') without shallow	/about	/contact	false	Yes	State reset
5	Component reloads fully	/contact	/contact	false	Yes	State reinitialized

💡 Execution stops after full reload or when user stops navigation.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
URL	/home	/about	/contact	/contact
Component Reloaded	Yes	No	Yes	Yes
State	Initialized	Preserved	Reset	Reinitialized

Key Moments - 2 Insights

Why does the component not reload when shallow routing is used?

Because shallow routing updates the URL without triggering Next.js data fetching methods or a full page reload, as shown in execution_table step 2 and 3.

What happens to component state when shallow routing is false?

The component fully reloads and resets its state, as seen in execution_table step 4 and 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the URL after step 2?

A /home

B /about

C /contact

D /

💡 Hint

Check the 'URL After' column in row for step 2.

At which step does the component reload fully?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Component Reload' column for each step.

If shallow routing was not used at step 2, what would happen to the state?

A State would be preserved

B State would be partially preserved

C State would reset

D State would be undefined

💡 Hint

Compare state changes between steps 2 and 4 in variable_tracker.

Concept Snapshot

Shallow Routing in Next.js:
- Updates URL without full page reload
- Use router.push(url, undefined, { shallow: true })
- Preserves component state and avoids data fetching
- Without shallow, page reloads and state resets
- Useful for UI state changes reflected in URL

Full Transcript

Shallow routing in Next.js lets you change the URL without reloading the whole page or running data fetching again. When you use router.push with the shallow option set to true, the URL updates but the component stays mounted and keeps its state. This is different from normal routing where the page reloads and the component resets. The execution table shows how the URL changes and whether the component reloads or not. This helps keep UI state like form inputs or scroll position intact while changing the URL. If shallow routing is not used, the component reloads and state resets. This concept is useful for smoother user experiences when only the URL needs to change.