Route prefetching behavior in NextJS - Performance & Optimization

Performance: Route prefetching behavior

MEDIUM IMPACT

Route prefetching affects page load speed by loading page code and data before the user navigates, improving perceived navigation speed.

Prefetching routes in a Next.js app to improve navigation speed

NextJS

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
      <Link href="/products">Products</Link>
    </nav>
  );
}

Next.js automatically prefetches routes only when links enter the viewport and user likely to navigate, reducing wasted requests and improving LCP.

📈 Performance GainPrefetches fewer routes on demand, reducing blocking and saving bandwidth.

Prefetching routes in a Next.js app to improve navigation speed

NextJS

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/about" prefetch={true}>About</Link>
      <Link href="/contact" prefetch={true}>Contact</Link>
      <Link href="/products" prefetch={true}>Products</Link>
    </nav>
  );
}

Prefetching all routes immediately on page load wastes bandwidth and CPU, delaying main content rendering and increasing data usage.

📉 Performance CostTriggers multiple network requests upfront, blocking LCP and increasing data usage unnecessarily.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager prefetch all links	Minimal	0	Increased due to delayed main content	[X] Bad
Automatic viewport-based prefetch	Minimal	0	Minimal paint delay, faster navigation	[OK] Good

Rendering Pipeline

Route prefetching initiates network requests for JavaScript bundles and data before navigation. This affects the browser's loading and scripting stages, potentially delaying main content if overused.

→Network

→Script Evaluation

→Layout

⚠️ BottleneckNetwork requests triggered too early can block main content loading and script execution.

Core Web Vital Affected

LCP

Route prefetching affects page load speed by loading page code and data before the user navigates, improving perceived navigation speed.

Optimization Tips

1Avoid prefetching all routes immediately to prevent blocking main content.

2Let Next.js prefetch routes only when links are visible to save bandwidth.

3Monitor network requests to ensure prefetching does not overload the connection.

Performance Quiz - 3 Questions

What is the main performance risk of prefetching all routes immediately on page load in Next.js?

A It wastes bandwidth and delays main content rendering.

B It causes layout shifts during navigation.

C It blocks user input responsiveness.

D It increases CSS selector complexity.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe prefetch requests for route chunks. Check if many requests fire immediately or only on scroll/hover.

What to look for: Look for many JS chunk requests firing upfront (bad) versus requests triggered only when links appear in viewport (good).