Stop 16 · PerformanceTopics · 12/13

Prefetching

In short

If you can guess where the user will go next, fetch it quietly in the background. When they click, the next page feels instant because it's already there.

Proactively fetching a resource (like the next page's JS/data) before the user actually navigates to it, so the transition feels instant.

The jaadu behind a chai counter pours a cutting chai as a student walks in through a distant door.

Think of it like this

The canteen uncle who knows your order

You walk in every morning and order the same cutting chai. One day, uncle starts pouring as soon as he sees you at the gate. By the time you reach the counter, it's ready. That's prefetching.

Watch it happen

Making the next click instant

User

next/link

Server

Courses link scrolls in

1/6In a production build, a Link entering the viewport triggers a prefetch.

The big ideas

What you need to know

For the next page, not this one

rel="prefetch" fetches resources likely needed for a future page, at low priority when the browser is idle.

Next.js does it for you

In production, next/link prefetches routes as links scroll into view. Set prefetch={false} for rarely used links.

Prefetch on intent

Hovering or touching a link is a strong hint. Prefetching then wastes less data than prefetching everything.

Mind the data plan

Prefetching guesses wrong sometimes. Don't prefetch big files for users who may never need them.

See it in code

Walk through the code

tsx

1// Plain HTML: fetch the checkout script while the user browses the cart2// <link rel="prefetch" href="/assets/checkout.js" />3import Link from "next/link";4import { useRouter } from "next/navigation";5export function Nav() {6  const router = useRouter();7  return (8    <nav>9      <Link href="/courses">Courses</Link> {/* prefetched when visible */}10      <Link href="/old-reports" prefetch={false}>Archive</Link>11      <button onMouseEnter={() => router.prefetch("/checkout")}12        onClick={() => router.push("/checkout")}>Checkout</button>13    </nav>14  );15}

1/4Plain HTML can prefetch a file for the next page at low priority.

Automatic prefetching only happens in production builds, so test it with npm run build and npm run start, not the dev server.

Save yourself the pain

Common mistakes

Oops

Testing prefetching in dev mode and thinking it's broken.

Do this instead

Next.js only prefetches in production. Run a production build to see it in the Network tab.

Oops

Prefetching every link on a page with 200 links.

Do this instead

Prefetch the likely next steps. Leave the rest to load on click.

Your mission

Make a click feel instant

~25 min

Quick check

What's the main difference between prefetch and preload?

Go deeper

1Notice how Next.js's `<Link>` automatically prefetches linked pages in the viewport.
2Learn `<link rel="prefetch">` for manually hinting future navigations.
3Understand the trade-off: prefetching uses bandwidth the user may not need.