How does prefetch work in Next.js?

Prefetch in Next.js is a background preload of the next page's resources (JS + data), so that navigation on click is nearly instant.

Put simply:

While the user looks at the page, Next.js is preparing the next one.

---

#How it works step by step

1. You render a link:

2. When the link enters the viewport (the visible part of the screen)
3. Next.js, in the background:

• loads the JS bundle of the target route
• requests data (if needed)

4. The user clicks -> the transition happens without waiting on the network

---

#What exactly gets prefetched

• the page's JS code (code splitting)
• RSC payload / data for Server Components
• no navigation is performed
• no page is rendered in advance

---

#When prefetch is enabled

• By default - for <Link />
• Only for internal links
• Only when:
  • the link is in the viewport
  • the connection is normal (not Save-Data)
  • the browser is not in power-saving mode

---

#When prefetch doesn't work

• a plain <a href>
• external links
• if prefetch={false}
• if the page strictly requires data per request (no-store)

---

#How to control prefetch

#Disable it

#Programmatic navigation

---

#Prefetch and rendering types

---

#Why it matters

• instant transitions
• lower TTFB on click
• a "native app" feel