When dealing with a multi-language website, the temptation is strong: “What if I background load (prefetch) all languages right upon entry so the switch is instant?”
The Hidden Cost of “Eager Loading”
Massively loading pages that the user might never visit has consequences:
- Data Waste: If a user enters in Spanish and never switches, you have downloaded double or triple the weight uselessly.
- Battery and CPU: The browser has to parse and process those extra resources.
- Saturation: If your site has many images, aggressive prefetching competes for bandwidth with the content the user is actually viewing right now.
The Smart Strategy: Prefetch on Hover
Astro offers a perfect solution that anticipates intent rather than assuming behavior.
html
<a href="/en" data-astro-prefetch="hover">
English
</a><a href="/en" data-astro-prefetch="hover">
English
</a>- The user moves the mouse towards the language button (clear intent).
- At that moment (
hover), Astro downloads the destination page. - It takes about ~200ms to click. By then, the page is already cached.
Result
You get the same feeling of instant navigation (0ms) but only consume resources when there is a high probability that the user needs them. It’s the perfect balance.