Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які опції кешування є у `fetch`?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У Next.js `fetch` має кілька опцій кешування: `cache: 'force-cache'` (типово, дані з кешу), `cache: 'no-store'` (кеш вимкнено повністю) і `next: { revalidate: N }` (кеш оновлюється кожні N секунд - основа ISR). **Ключове:** якщо `fetch` читає cookies або headers запиту, Next.js може автоматично зробити його динамічним, навіть без явного `no-store`.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ Next.js `fetch` - це не просто стандартний браузерний `fetch`, а **розширена версія з серверним кешуванням**. У нього є кілька режимів, які визначають, **чи зберігати дані в кеші і як їх оновлювати**. --- ## 1. `cache: 'force-cache'` (типово) Це **стандартна поведінка** `fetch` у Server Components. ### Як працює - Перший запит → дані завантажуються і кладуться в кеш - Всі наступні запити → дані беруться з кешу - Новий запит до API **не робиться**, поки кеш не інвалідований ### Що це означає на практиці - Сторінка поводиться як **статична** - Максимальна швидкість - Мінімальне навантаження на сервер ### Коли використовувати - Публічні дані - Контент, який рідко змінюється - Блоги, документація, довідники --- ## 2. `cache: 'no-store'` Цей режим **повністю вимикає кешування**. ### Як працює - Кожен запит → новий похід за даними - Нічого не зберігається - Нічого не перевикористовується ### Що це означає на практиці - Дані завжди актуальні - Сторінка стає динамічною - Сервер навантажується сильніше ### Коли використовувати - Персональні дані - Авторизація - Профіль користувача - Дані, що залежать від cookies або headers --- ## 3. `next: { revalidate: N }` Це режим **контрольованого кешування** - основа ISR. ### Як працює - Дані кешуються - Кеш вважається валідним `N` секунд - Після цього Next.js оновлює дані Важливо: - користувач **не чекає оновлення** - оновлення відбувається у фоні ### Що це означає на практиці - Майже завжди свіжі дані - Без постійних запитів - Гарний баланс швидкості й актуальності ### Коли використовувати - Каталоги - Новини - Стрічки - Часто оновлюваний публічний контент --- ## 4. Комбінування з headers і cookies Якщо `fetch`: - використовує cookies - або читає headers запиту Next.js **може автоматично зробити його динамічним**, навіть якщо ти явно не вказав `no-store`. Це захист від: - випадкового кешування персональних даних - витоків інформації між користувачами --- ## Коротка таблиця | Опція | Кеш | Оновлення | Поведінка | |---|---|---|---| | `force-cache` | Так | Ні | Статично | | `no-store` | Ні | Завжди | Динамічно | | `revalidate: N` | Так | Через N сек | ISR | --- ## Головне, що варто запам'ятати - `fetch` у Server Components **завжди серверний** - Кеш увімкнений типово - Поведінка кешу - усвідомлений вибір, а не магія - Помилка у виборі режиму = або застарілі дані, або зайве навантаження Всі ці механізми - ключова частина роботи з даними в Next.js.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.