⚡
Astro ships a built-in prefetch directive that does something magic: it loads the next page HTML while the user is still reading the current one. When they click a link, it's already cached. No loading spinner. No network roundtrip. The page appears instantly. Sounds complicated. It's not — it's literally one HTML attribute.
The concept is borrowed from the early-2000s web. Before SPAs, browsers would fully reload the page on every link click. Prefetch libraries like instantpage.js and quicklink.js got around this by speculatively fetching the next page during idle time, then swapping the DOM on click. Feels like a SPA without the overhead.
Astro's `rel="prefetch"` is the same idea, baked into the framework. It works automatically — no installation, no configuration, no JavaScript library to import. Just add `rel="prefetch"` to a link and Astro handles the rest.
Here's the one-liner:
```html
Read My Post
```
That's it. Astro will queue a fetch for `/blog/my-post.html` in the background and cache it in IndexedDB or sessionStorage, depending on the browser. When the user clicks the link, the page loads from cache. Instant.
The magic bit: Astro also comes with View Transitions, which makes page swaps animated instead of jarring. Pair prefetch with transitions and you've got SPA-level feel without the SPA. The old page fades out, the new page fades in, and the browser address bar updates. Feels incredibly slick, and the whole thing is static HTML.
There's a catch, though — and it's why most sites don't do this. Prefetching works when links are predictable and the user actually clicks them. If you prefetch 50 pages and the user clicks 1, you've wasted bandwidth on 49 speculative requests. For high-traffic sites, that adds up. Bandwidth budgets exist for a reason.
Smart prefetching looks at the user's intent. If they're hovering a link, load it. If they're on mobile and hovering doesn't exist, prefetch on touch intent or network-aware conditions. Quicklink.js and instantpage.js both do this. Astro's prefetch is simpler — it prefetches everything you mark, no intent detection. Use it selectively. Prefetch the links your analytics say matter.
For marketing sites and blogs — where most pages get linked once or twice and are high-value to load fast — prefetch is a no-brainer. Your average navigation just became an SPA-speed experience with zero JavaScript cost. Every page you prefetch loads locally from the browser's storage.
The verdict: prefetch is a power move that costs nothing. One attribute per link, your users get instant navigation, your site gets that premium feel. The fact it's not more widely used tells you how many sites are still building the hard way.