Home Page
Hover me first!
<Link href="/about">Go to About Page</Link>
RSC Payload
<Link> Component
Instant navigation and background prefetching.
Next.js5 min readConcept 20 of 65
Extending the anchor
The <Link> component (imported from next/link) is the standard way to navigate in Next.js.
Under the hood, it renders a standard HTML <a> tag so that search engines can crawl your site normally. However, it overrides the default browser behavior to prevent full page reloads.
The SPA illusion
If you use a standard <a href="/dashboard">, the browser throws away your entire application state, blanks the screen, and downloads everything from scratch.
The <Link> component intercepts the click, performs a 'soft' client-side navigation, and only swaps out the React components that actually changed. This makes your app feel instantly responsive.
Viewport and hover prefetching
Next.js doesn't wait for the user to click. It predicts the future.
In production, as soon as a <Link> scrolls into the viewport, Next.js partially prefetches its data. The moment the user hovers their mouse over the link, Next.js upgrades it to a full prefetch, downloading the destination's RSC payload before the mouse button is even released.
The Premonition
Hover your mouse over the link below, but don't click it yet. Watch how Next.js detects your intent and quietly downloads the page in the background before you even click.
Prefetching Illusion
demo.com/
Next.js Server
Network DevTools
Waiting for network activity...
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- Always use
<Link>for internal navigation to preserve the SPA feel. - Prefetching happens automatically when links enter the viewport (partial) or are hovered (full).
- Prefetching is completely disabled in development mode.
- In Next.js 15, use
prefetch={true}if you need to aggressively prefetch the entire page.
Done with this concept?
Mark it complete to track your progress. No login needed.