← Lessons

quiz vs the machine

Platinum1820

Frontend

Prefetching Routes

Load a route's code and data before the user clicks so navigation feels instant.

6 min read · advanced · beat Platinum to climb

What it is

Prefetching warms a route ahead of navigation by fetching its code chunk and sometimes its data before the user commits. When the click lands, the view is already ready.

When to trigger

  • On hover or focus of a link, signaling intent.
  • When a link enters the viewport, via an intersection observer.
  • During browser idle time for high probability destinations.

The balance

Prefetching trades bandwidth and battery for speed. Prefetch too eagerly and you waste data on routes never visited, especially on slow or metered connections.

Doing it responsibly

  • Respect the save data hint and connection type.
  • Use low priority requests so prefetch never blocks current work.
  • Cache results so a real navigation reuses them instead of refetching.

Why it matters

Most navigation latency is the round trip to fetch code and data. Moving that work before the click hides it entirely, producing near instant transitions when the guess is right.

Key idea

Prefetching loads a route's code and data on intent, hiding latency, but it must respect bandwidth and use low priority requests.

Check yourself

Answer to earn rating on the learn ladder.

1. A common signal to prefetch a route is

2. What is the main cost of aggressive prefetching?

3. Prefetch requests should be sent at