Resource hints prefetch and prerender optimized for likely next navigations

Untargeted prefetching wastes bandwidth — especially on mobile where users pay per megabyte. Unconditionally prefetching all <Link> hrefs in a Next.js app can download 2–3 MB of route bundles that the user never visits (ISO-25010 resource-utilisation). Conversely, missing prefetch on high-probability paths (a paginated list with a 90% chance the user clicks "next") adds 300ms of navigation delay on every click. The gap between what the user is likely to do and what the browser has prefetched is a measurable UX cost.

Implement targeted prefetch on high-probability navigation paths, not all links. For Next.js, use the prefetch prop selectively and the router for hover-based prefetching:

import { useRouter } from 'next/navigation'
const router = useRouter()

// Prefetch only on hover — not unconditionally
<button onMouseEnter={() => router.prefetch('/checkout')}>
  Proceed to Checkout
</button>

For broader speculation, use the Speculation Rules API (Chrome 109+):

<script type="speculationrules">
{
  "prefetch": [
    { "source": "document", "where": { "href_matches": "/products/*" } }
  ]
}
</script>

Only prefetch pages users have >50% probability of visiting next. Disable unconditional prefetch on <Link prefetch={false}> for low-probability destinations.