Prefetching on hover or viewport entry configured

Every navigation click triggers a full page-load waterfall: DNS lookup, TCP handshake, server response, asset parsing. Prefetching starts this waterfall before the user clicks — on hover or viewport entry — so that by the time the click registers, the next page's assets are already in cache. ISO 25010:2011 time-behaviour captures the latency savings; without prefetching, even a well-optimized site feels sluggish on navigations because each page transition starts from scratch.

In Next.js, <Link> components prefetch by default in production when they enter the viewport. Enable it explicitly for critical navigation links and configure DNS prefetch for third-party API domains.

// components/nav.tsx — explicit prefetch for primary navigation
import Link from 'next/link'

export function MainNav() {
  return (
    <nav>
      <Link href="/dashboard" prefetch={true}>Dashboard</Link>
      <Link href="/pricing" prefetch={true}>Pricing</Link>
    </nav>
  )
}

In app/layout.tsx, add <link rel="dns-prefetch"> for external APIs your pages call on load.