Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює prefetch у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Prefetch у Next.js** - це **фонове попереднє завантаження ресурсів наступної сторінки** (JS + дані), щоб при кліку навігація була майже миттєвою. **Ключове:** поки користувач дивиться сторінку, Next.js готує наступну.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Prefetch у Next.js** - це **фонове попереднє завантаження ресурсів наступної сторінки** (JS + дані), щоб при кліку навігація була майже миттєвою. Простіше: > **Поки користувач дивиться сторінку - Next.js готує наступну.** --- ## Як це працює крок за кроком 1. Ти рендериш посилання: ```tsx <Link href="/blog">Blog</Link> ``` 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 ### Вимкнути ```tsx <Link href="/blog" prefetch={false}> Blog </Link> ``` ### Програмна навігація ```ts router.prefetch('/blog') ``` --- ## Prefetch і типи рендерингу | Рендеринг | Prefetch | |---|---| | SSG | HTML + дані | | ISR | актуальна версія | | SSR | лише payload (рендер при переході) | --- ## Навіщо це потрібно - миттєві переходи - менший TTFB на клік - відчуття «нативного» застосункуДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.