Prefetching content in Next.js

When linking two pages in a Next.js application, the built-in <Link> component allows for seamless client-side navigation. Instead of triggering a full page reload like traditional websites, Next.js uses frontend routing to display the new page instantly, making for a faster user experience.

But that’s not all—Next.js also prefetches linked pages automatically. As soon as a <Link> element enters the viewport (i.e., becomes visible on screen), Next.js begins preloading the linked page in the background—provided it’s an internal link within your site. This makes navigation nearly instant when users click the link.

However, this prefetching behavior only works in production mode. If you're running your app in development with npm run dev, prefetching won't be triggered. To see it in action, stop the dev server, run npm run build to generate your production bundle, and start the app with npm run start.

You can observe this behavior in your browser’s Network tab. Once the page finishes loading (after the load event fires), links that are already visible (i.e., above the fold) start prefetching. Links that are out of view will be prefetched as the user scrolls them into the viewport.

Prefetching happens automatically on fast internet connections (like Wi-Fi or 3G+), unless the browser sends a Save-Data header indicating a preference for reduced data usage.

If you want to disable prefetching for a specific link, you can do so by passing prefetch={false} to the <Link> component:

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

Comments

[Peter Hallander]

Good explanation of the Next.js built-in behavior. Worth noting how this differs from native browser prefetching for non-SPA environments.

Next.js prefetching fetches JavaScript chunks for client-side routing — it's intercepting navigation at the framework level so the full page reload never happens. That's SPA-style navigation.

For server-rendered MPAs (Liquid/PHP/Rails templates — anything not running in a JS router), the equivalent is the Speculation Rules API, which prerenders entire HTML documents in a background browsing context before the user clicks:

<script type="speculationrules">
{
  "prerender": [{"source": "document", "eagerness": "moderate"}]
}
</script>

This is lower-level than Next.js prefetching but works on any server-rendered site without a JS framework. The tradeoff is that prerender actually runs the full page (including JS) in the background — whereas Next.js only loads the data/chunks it needs.

I work on this specifically for Shopify themes (which are server-rendered Liquid templates), where there's no JS router to intercept navigation. Built a Shopify app (Prefetch — apps.shopify.com/prefetch) that injects these rules into storefronts. For collection → product page transitions, the LCP improvement in real-user data is substantial since the destination page is already fully painted before the click.