Route prefetching behavior in NextJS - Step-by-Step Execution

Concept Flow - Route prefetching behavior

Page loads

↓

Next.js scans <Link> components

↓

Prefetch triggered for linked routes

↓

Browser downloads JS bundles for prefetched routes

↓

Prefetched data cached

↓

User clicks link

↓

Route loads instantly from cache

↓

Page rendered quickly

↓

Prefetch for other links continues

↓

Repeat for new links

Next.js automatically prefetches linked routes after page load to speed up navigation by downloading code in advance.

Execution Sample

NextJS

import Link from 'next/link';

export default function Home() {
  return <Link href="/about">About</Link>;
}

This code renders a link to the /about page which Next.js will prefetch automatically after the Home page loads.

Execution Table

Step	Action	Prefetch Triggered?	Prefetched Route	Cache State	User Interaction	Page Load Result
1	Home page loads	No	None	Empty	No	Home page rendered
2	Next.js scans <Link> to /about	Yes	/about	Prefetching /about started	No	Home page rendered
3	Browser downloads /about JS bundles	Yes	/about	Cached /about bundles	No	Home page rendered
4	User clicks /about link	No	/about	Cached /about bundles	Yes	/about page loads instantly
5	Next.js scans new links on /about	Yes	Other linked routes	Prefetching new routes	No	/about page rendered
6	User clicks another link	No	Cached route	Cached bundles	Yes	New page loads instantly

💡 Prefetching stops when user navigates away or all linked routes are cached.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Prefetch Triggered?	No	Yes	Yes	No	Yes	No
Prefetched Route	None	/about	/about	/about	Other linked routes	Cached route
Cache State	Empty	Prefetching /about started	Cached /about bundles	Cached /about bundles	Prefetching new routes	Cached bundles
User Interaction	No	No	No	Yes	No	Yes
Page Load Result	Home page rendered	Home page rendered	Home page rendered	/about page loads instantly	/about page rendered	New page loads instantly

Key Moments - 3 Insights

Why does Next.js prefetch routes even before the user clicks the link?

Next.js prefetches linked routes after the page loads to make navigation faster by having the code ready in cache, as shown in execution_table step 2 and 3.

Does prefetching happen again after the user navigates to a new page?

Yes, Next.js scans new links on the new page and prefetches those routes, as seen in step 5 of the execution_table.

What happens if the user clicks a link before prefetching finishes?

The route will load normally but might be slower because the bundles are not cached yet; prefetching aims to avoid this delay by starting early.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the /about page bundles get cached?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Cache State' column in execution_table rows.

According to variable_tracker, what is the 'User Interaction' value after step 4?

A Yes

B No

C Maybe

D Unknown

💡 Hint

Look at the 'User Interaction' row and the 'After Step 4' column.

If the Home page had no <Link> components, how would the prefetch behavior change?

A Prefetching would still happen for /about

B Prefetching would happen for all routes

C No prefetching would occur

D Prefetching would happen only after user clicks

💡 Hint

Prefetching depends on scanning components as shown in concept_flow.

Concept Snapshot

Next.js Route Prefetching:
- Automatically prefetches linked routes after page load
- Downloads JS bundles in background
- Caches bundles for instant navigation
- Prefetch repeats on new pages
- Speeds up user experience by reducing wait time

Full Transcript

When a Next.js page loads, it looks for <Link> components on the page. For each link, Next.js starts prefetching the JavaScript bundles needed for that route in the background. This means the code is downloaded and cached before the user clicks the link. When the user clicks, the page loads instantly from cache, making navigation very fast. After navigating, Next.js repeats this process for new links on the new page. If there are no links, no prefetching happens. This behavior improves user experience by reducing wait times during navigation.

Practice

1. What is the main purpose of route prefetching in Next.js?

easy

A. To prevent users from navigating to certain pages

B. To disable client-side navigation

C. To load pages in the background before the user navigates to them

D. To increase the size of the initial JavaScript bundle

Solution

1. Step 1: Understand what prefetching means

   Prefetching means loading resources ahead of time before they are needed.

2. Step 2: Apply this to Next.js routing

   Next.js prefetches pages in the background to make navigation faster when the user clicks a link.

3. Final Answer:

   To load pages in the background before the user navigates to them -> Option C

4. Quick Check:

   Prefetching = background loading [OK]

Hint: Prefetching means loading before navigation happens [OK]

Common Mistakes:

• Thinking prefetching blocks navigation
• Confusing prefetching with disabling navigation
• Assuming prefetching increases initial load size

2. Which of the following is the correct way to disable automatic prefetching on a Next.js Link component?

easy

A. <Link href='/about' prefetch={false}>About</Link>

B. <Link href='/about' prefetch>About</Link>

C. <Link href='/about' noPrefetch>About</Link>

D. <Link href='/about' prefetch='off'>About</Link>

Solution

1. Step 1: Recall the prefetch prop usage

   The prefetch prop accepts a boolean to enable or disable prefetching.

2. Step 2: Identify the correct syntax to disable prefetching

   Setting prefetch={false} disables automatic prefetching on the Link.

3. Final Answer:

   <Link href='/about' prefetch={false}>About</Link> -> Option A

4. Quick Check:

   Disable prefetch with prefetch={false} [OK]

Hint: Use prefetch={false} to turn off prefetching [OK]

Common Mistakes:

• Using just 'prefetch' without value disables prefetching
• Using non-existent props like noPrefetch
• Passing string values instead of boolean

3. Consider this Next.js code snippet:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href='/profile' prefetch>Go to Profile</Link>
    </div>
  );
}

What happens when this component renders in the browser?

medium

A. The '/profile' page is not prefetched because prefetch defaults to false

B. The '/profile' page is prefetched in the background to speed up navigation

C. The link will cause a full page reload when clicked

D. The component will throw a syntax error due to incorrect prefetch usage

Solution

1. Step 1: Check the prefetch prop usage

   The prefetch prop is present without a value, which means it is true.

2. Step 2: Understand Next.js default behavior

   Next.js prefetches linked pages by default, so explicitly adding prefetch confirms this behavior.

3. Final Answer:

   The '/profile' page is prefetched in the background to speed up navigation -> Option B

4. Quick Check:

   prefetch present = prefetch enabled [OK]

Hint: Presence of prefetch prop means prefetching is on [OK]

Common Mistakes:

• Thinking prefetch defaults to false
• Assuming link causes full page reload
• Confusing syntax with errors

4. You wrote this code to prefetch a route manually:

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch('/dashboard');
  }, []);

  return <div>Welcome</div>;
}

However, the prefetch does not seem to work. What is the likely cause?

medium

A. You must call router.prefetch inside an event handler, not useEffect

B. The router.prefetch method does not exist in Next.js

C. The router.prefetch method is asynchronous and needs to be awaited

D. The useRouter import path is incorrect; it should be from 'next/navigation'

Solution

1. Step 1: Check the import source of useRouter

   In Next.js 14+, useRouter for client navigation is imported from 'next/navigation', not 'next/router'.

2. Step 2: Understand impact on router.prefetch

   Importing from 'next/router' gives an outdated router without prefetch support, so prefetch won't work.

3. Final Answer:

   The useRouter import path is incorrect; it should be from 'next/navigation' -> Option D

4. Quick Check:

   Correct import = 'next/navigation' [OK]

Hint: Use 'next/navigation' for router.prefetch in Next.js 14+ [OK]

Common Mistakes:

• Importing useRouter from 'next/router' instead of 'next/navigation'
• Not awaiting async prefetch (not required)
• Thinking prefetch only works in event handlers

5. You want to optimize bandwidth by prefetching only when a user hovers over a link. Which approach correctly implements this in Next.js?

hard

A. Set prefetch={false} on Link and call router.prefetch() inside an onMouseEnter event handler

B. Set prefetch on Link and call router.prefetch() inside useEffect

C. Remove prefetch from Link and rely on default prefetching

D. Use prefetch={true} on Link and disable prefetching globally in config

Solution

1. Step 1: Disable automatic prefetching on the Link

   Set prefetch={false} to prevent Next.js from prefetching immediately.

2. Step 2: Prefetch manually on user hover

   Use onMouseEnter event to call router.prefetch() to load the page only when user shows interest.

3. Final Answer:

   Set prefetch={false} on Link and call router.prefetch() inside an onMouseEnter event handler -> Option A

4. Quick Check:

   Manual prefetch on hover = prefetch={false} + onMouseEnter [OK]

Hint: Disable auto prefetch, prefetch manually on hover event [OK]

Common Mistakes:

• Prefetching both automatically and manually causing wasted bandwidth
• Calling prefetch in useEffect instead of on hover
• Relying on default prefetching without control