Shallow routing concept in NextJS - Performance & Optimization

Performance: Shallow routing concept

MEDIUM IMPACT

Shallow routing affects page navigation speed by updating the URL without a full page reload or data fetching, improving user experience during route changes.

Navigating between pages while preserving state and avoiding full reloads

NextJS

import { useRouter } from 'next/router';

const router = useRouter();

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

Updates URL and component state without full reload or data fetching, resulting in faster navigation and smoother interaction.

📈 Performance GainReduces blocking time to under 50ms and avoids full reflow

Navigating between pages while preserving state and avoiding full reloads

NextJS

import { useRouter } from 'next/router';

const router = useRouter();

// Navigating with full reload
router.push('/about');

Triggers a full page reload and data fetching, causing slower navigation and higher input delay.

📉 Performance CostBlocks rendering for 100-300ms depending on data fetching and triggers full reflow

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Full page navigation	Many DOM updates due to reload	Multiple reflows triggered	High paint cost due to full reload	[X] Bad
Shallow routing	Minimal DOM updates, URL change only	Single reflow or none	Low paint cost, smooth transition	[OK] Good

Rendering Pipeline

Shallow routing updates the browser URL and React component state without triggering Next.js data fetching or a full page reload, minimizing work in the rendering pipeline.

→JavaScript Execution

→React Reconciliation

→Paint

→Composite

⚠️ BottleneckJavaScript Execution and React Reconciliation when full reload occurs

Core Web Vital Affected

INP

Shallow routing affects page navigation speed by updating the URL without a full page reload or data fetching, improving user experience during route changes.

Optimization Tips

1Use shallow routing to update URLs without full page reloads.

2Avoid unnecessary data fetching by enabling shallow routing when state is preserved.

3Monitor interaction delays to confirm shallow routing improves responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of using shallow routing in Next.js?

A It preloads all page data in advance.

B It disables JavaScript on the page.

C It updates the URL without triggering a full page reload or data fetching.

D It forces a full page reload to refresh content.

DevTools: Performance

How to check: Record a navigation event in the Performance panel. Compare full page reload vs shallow routing by looking at scripting and rendering times.

What to look for: Look for reduced scripting time and fewer layout shifts during shallow routing compared to full reload.