Route prefetching behavior in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is route prefetching in Next.js?

Route prefetching in Next.js means loading the code and data for a page before the user clicks the link. This makes navigation faster because the page is ready to show immediately.

intermediate

How does Next.js decide when to prefetch a route?

Next.js prefetches routes automatically when a Link component is visible in the viewport and the browser is idle. This helps avoid slowing down the main tasks.

beginner

Can you disable route prefetching in Next.js? How?

Yes, you can disable prefetching by adding prefetch={false} to the Link component. This stops Next.js from loading the page early.

intermediate

What happens if a user never clicks a prefetched link?

If the user never clicks the prefetched link, the loaded data stays in the browser cache but is not used. This can use some bandwidth but improves speed if the user does click later.

beginner

Why is route prefetching important for user experience?

Route prefetching makes pages load instantly when users click links. This feels smooth and fast, like flipping pages in a book without waiting.

When does Next.js automatically prefetch a route?

A When the page loads, regardless of visibility

B Only after the user clicks the link

C When the <code>Link</code> is visible and the browser is idle

D When the user scrolls to the bottom of the page

Next.js prefetches routes when the Link is visible in the viewport and the browser is idle to avoid slowing down important tasks.

How can you stop Next.js from prefetching a route?

A Prefetching cannot be stopped

B Remove the <code>Link</code> component

C Use a different router library

D Add <code>prefetch={false}</code> to the <code>Link</code> component

You can disable prefetching by setting prefetch={false} on the Link component.

What is a benefit of route prefetching?

A Pages load instantly when clicked

B It reduces server load

C It disables JavaScript on the page

D It prevents caching

Prefetching loads page code early so navigation feels instant.

If a prefetched page is never visited, what happens?

A The prefetched data stays cached but unused

B The browser deletes the data immediately

C The server is notified to cancel the prefetch

D The page automatically loads anyway

Prefetched data remains in the browser cache until cleared or expired.

Which Next.js component is involved in route prefetching?

A <code>Head</code>

B <code>Link</code>

C <code>Script</code>

D <code>Image</code>

The Link component handles route prefetching automatically.

Explain how route prefetching works in Next.js and why it improves user experience.

Think about how loading pages early helps users feel the app is faster.

Describe how you can control route prefetching behavior in a Next.js app.

Focus on the Link component and its prefetch property.