Programmatic navigation (useRouter) in NextJS - Performance & Optimization

Performance: Programmatic navigation (useRouter)

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling client-side navigation without full page reloads.

Navigating between pages in a Next.js app

NextJS

import { useRouter } from 'next/router';
const router = useRouter();
router.push('/about');

Performs client-side navigation without full reload, preserving state and faster rendering.

📈 Performance GainNon-blocking navigation, reduces load time by 200-500ms, improves INP

Navigating between pages in a Next.js app

NextJS

window.location.href = '/about';

Triggers a full page reload, blocking rendering and losing React state.

📉 Performance CostBlocks rendering for 200-500ms depending on network, triggers full reload

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
window.location.href navigation	Full DOM reload	Multiple reflows	High paint cost	[X] Bad
useRouter.push navigation	Partial DOM update	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Programmatic navigation with useRouter updates the URL and fetches only the changed page data, avoiding full reload and reinitializing the React app.

→JavaScript Execution

→Network Fetch

→DOM Update

→Paint

→Composite

⚠️ BottleneckNetwork Fetch for new page data

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling client-side navigation without full page reloads.

Optimization Tips

1Avoid full page reloads for navigation to improve interaction speed.

2Use useRouter.push for client-side navigation in Next.js apps.

3Prefetch pages and use shallow routing to minimize network delays.

Performance Quiz - 3 Questions

What is the main performance benefit of using useRouter.push over window.location.href in Next.js?

A It disables network requests

B It reduces JavaScript bundle size

C It avoids full page reloads, improving interaction speed

D It automatically caches all pages

DevTools: Performance

How to check: Record a session while navigating using window.location.href vs useRouter.push. Compare time between input and next paint.

What to look for: Look for long tasks and full page reloads in the timeline for window.location.href; faster interaction and partial updates for useRouter.