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.

Practice

1. What does shallow routing in Next.js primarily do?

easy

A. Reloads the entire page to fetch new data

B. Prevents URL changes when navigating

C. Changes the URL without reloading the page or losing component state

D. Forces a full server-side render on every navigation

Solution

1. Step 1: Understand shallow routing purpose

   Shallow routing updates the URL but keeps the current page component and state intact without a full reload.

2. Step 2: Compare options with shallow routing behavior

   Only Changes the URL without reloading the page or losing component state describes changing the URL without reloading or losing state, matching shallow routing.

3. Final Answer:

   Changes the URL without reloading the page or losing component state -> Option C

4. Quick Check:

   Shallow routing = URL change without reload [OK]

Hint: Shallow routing changes URL but keeps page state [OK]

Common Mistakes:

• Thinking shallow routing reloads the page
• Assuming shallow routing blocks URL changes
• Confusing shallow routing with full page reload

2. Which is the correct way to enable shallow routing using Next.js router's push method?

easy

A. router.push('/page?tab=1', undefined, { shallow: true })

B. router.push('/page?tab=1', { shallow: true })

C. router.push('/page?tab=1', true)

D. router.push('/page?tab=1', { reload: false })

Solution

1. Step 1: Recall router.push syntax for shallow routing

   The third argument to router.push is an options object where shallow: true enables shallow routing.

2. Step 2: Match options with correct syntax

   router.push('/page?tab=1', undefined, { shallow: true }) correctly passes { shallow: true } as the third argument; others are incorrect or incomplete.

3. Final Answer:

   router.push('/page?tab=1', undefined, { shallow: true }) -> Option A

4. Quick Check:

   Shallow routing option is third argument object [OK]

Hint: Use third argument { shallow: true } in router.push [OK]

Common Mistakes:

• Passing shallow option as second argument
• Using boolean instead of options object
• Confusing reload option with shallow

3. Given this code snippet in a Next.js page component:

const router = useRouter();

useEffect(() => {
  console.log('Query changed:', router.query.tab);
}, [router.query.tab]);

const changeTab = () => {
  router.push('/dashboard?tab=2', undefined, { shallow: true });
};

changeTab();

What will be logged to the console after changeTab() is called?

medium

A. Query changed: 2

B. Query changed: undefined

C. Nothing is logged because shallow routing blocks query updates

D. An error occurs because shallow routing cannot update query

Solution

1. Step 1: Understand effect dependency on router.query.tab

   The effect runs when router.query.tab changes, logging its value.

2. Step 2: Analyze shallow routing effect on query

   Shallow routing updates the URL and query parameters without full reload, so router.query.tab updates to '2'.

3. Final Answer:

   Query changed: 2 -> Option A

4. Quick Check:

   Shallow routing updates query and triggers effects [OK]

Hint: Shallow routing updates query, triggers effects [OK]

Common Mistakes:

• Assuming shallow routing blocks query updates
• Expecting no console output
• Thinking shallow routing causes errors

4. Consider this Next.js code snippet:

const router = useRouter();

const handleClick = () => {
  router.push('/profile?section=info', undefined, { shallow: true });
  router.push('/profile?section=details');
};

handleClick();

What is the problem with this code regarding shallow routing?

medium

A. No problem; shallow routing applies to both pushes automatically

B. Shallow routing is ignored because it must be the first push

C. Both pushes cause full reloads because shallow routing is not supported

D. The second push overrides shallow routing, causing a full reload

Solution

1. Step 1: Examine the two router.push calls

   The first call uses shallow routing, the second does not and triggers a full reload.

2. Step 2: Understand effect of second push on routing

   The second push overrides the first and causes a full page reload, negating shallow routing.

3. Final Answer:

   The second push overrides shallow routing, causing a full reload -> Option D

4. Quick Check:

   Non-shallow push cancels shallow routing [OK]

Hint: Later push without shallow cancels shallow routing [OK]

Common Mistakes:

• Assuming shallow routing applies to all pushes automatically
• Thinking shallow routing must be first push only
• Ignoring that non-shallow push triggers reload

5. You want to implement tab navigation in a Next.js page using shallow routing to update the URL query without losing component state. Which approach correctly achieves this?

hard

A. Use router.replace without shallow option to update URL and reset state

B. Use router.push with { shallow: true } when changing tabs and listen to router.query to update UI

C. Reload the page on every tab click to fetch fresh data

D. Manually manipulate window.location to change URL without Next.js router

Solution

1. Step 1: Identify shallow routing usage for tab navigation

   Using router.push with { shallow: true } updates URL query without full reload, preserving component state.

2. Step 2: Confirm UI updates from router.query changes

   Listening to router.query allows UI to react to tab changes smoothly without losing state.

3. Final Answer:

   Use router.push with { shallow: true } and listen to router.query -> Option B

4. Quick Check:

   Shallow routing + query listening = smooth tab navigation [OK]

Hint: Use router.push with shallow and watch router.query [OK]

Common Mistakes:

• Reloading page loses component state
• Using router.replace without shallow resets state
• Manipulating window.location breaks SPA behavior