Як працює prefetch у Next.js?

Prefetch у Next.js - це фонове попереднє завантаження ресурсів наступної сторінки (JS + дані), щоб при кліку навігація була майже миттєвою.

Простіше:

Поки користувач дивиться сторінку - Next.js готує наступну.

---

#Як це працює крок за кроком

1. Ти рендериш посилання:

2. Коли посилання потрапляє у viewport (видиму частину екрана)
3. Next.js у фоні:

• завантажує JS-бандл цільового маршруту
• запитує дані (якщо вони потрібні)

4. Користувач клікає -> перехід відбувається без очікування мережі

---

#Що саме попередньо завантажується

• JS-код сторінки (code splitting)
• RSC payload / дані для Server Components
• не виконується навігація
• не рендериться сторінка заздалегідь

---

#Коли prefetch увімкнено

• За замовчанням - для <Link />
• Тільки для внутрішніх посилань
• Тільки коли:
  • посилання у viewport
  • з'єднання нормальне (не Save-Data)
  • браузер не в режимі енергозбереження

---

#Коли prefetch не працює

• звичайний <a href>
• зовнішні посилання
• якщо prefetch={false}
• якщо сторінка вимагає даних строго за запитом (no-store)

---

#Як керувати prefetch

#Вимкнути

#Програмна навігація

---

#Prefetch і типи рендерингу

---

#Навіщо це потрібно

• миттєві переходи
• менший TTFB на клік
• відчуття «нативного» застосунку