Route prefetching behavior in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a Next.js Link with prefetch enabled is rendered?

Consider a Next.js app with a <Link> component that has prefetch enabled (default behavior). What does Next.js do when this component appears on the page?

NextJS

<Link href="/about">About</Link>

A Next.js prefetches only the CSS for the /about page but not the JavaScript.

B Next.js waits until the user clicks the link before fetching the /about page resources.

C Next.js disables prefetching if the link is outside the viewport.

D Next.js automatically fetches the JavaScript and data for the /about page in the background after the page loads.

💡 Hint

Think about how Next.js improves navigation speed by loading pages early.

By default, Next.js prefetches linked pages' JavaScript and data in the background after the page loads to speed up navigation.

❓ state_output

intermediate

What is the effect of disabling prefetch on a Next.js Link?

Given this code snippet, what will be the user experience difference compared to default prefetch behavior?

<Link href="/contact" prefetch={false}>Contact</Link>

A The link will not navigate to /contact at all because prefetch is false.

B The /contact page resources are fetched immediately when the page loads, same as default.

C The /contact page resources are only fetched when the user clicks the link, causing a slight delay on navigation.

D The /contact page resources are fetched only when the link is hovered by the mouse.

💡 Hint

Disabling prefetch means Next.js won't load the page early.

Setting prefetch={false} stops Next.js from loading the page in the background, so navigation waits until click.

📝 Syntax

advanced

Which code snippet correctly disables prefetching for a Next.js Link?

Choose the correct way to disable prefetching on a Next.js Link component.

A <Link href="/blog" prefetch="false">Blog</Link>

B <Link href="/blog" prefetch={false}>Blog</Link>

C <Link href="/blog" prefetch={0}>Blog</Link>

D <Link href="/blog" prefetch={null}>Blog</Link>

💡 Hint

Remember that prefetch expects a boolean value.

The prefetch prop expects a boolean. Passing a string or other types won't disable prefetch correctly.

🔧 Debug

advanced

Why does prefetch not work on a dynamic route Link in Next.js?

Given a dynamic route /posts/[id] and this Link:

<Link href="/posts/[id]" as="/posts/123">Post 123</Link>

Why might Next.js not prefetch this page?

A Next.js cannot prefetch dynamic routes without explicit <code>href</code> parameters matching the dynamic segments.

B Prefetching is disabled by default on all dynamic routes.

C The <code>as</code> prop disables prefetching automatically.

D Prefetching only works on static HTML pages, not on dynamic routes.

💡 Hint

Think about how Next.js needs to know the exact path to prefetch.

Next.js requires the href prop to include the dynamic parameters to prefetch correctly. Using as alone does not provide enough info.

🧠 Conceptual

expert

When does Next.js trigger route prefetching for Link components?

Which of the following best describes when Next.js triggers prefetching for a Link component?

A Next.js prefetches routes for Link components that are visible in the viewport after the page load event.

B Next.js prefetches routes only when the Link component is focused via keyboard navigation.

C Next.js prefetches routes only when the user hovers over the Link component.

D Next.js prefetches all Link routes on the page immediately during server-side rendering.

💡 Hint

Consider how Next.js balances performance and user experience by prefetching only visible links.

Next.js prefetches routes for Link components that are visible in the viewport after the page loads to avoid unnecessary network usage.