Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке кешування в Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Кешування в Next.js** - це механізм, який дозволяє **зберігати результати обчислень і запитів** та повторно використовувати їх, щоб сторінки завантажувалися швидше, а сервер робив менше зайвої роботи. **Ключове:** ключовий інструмент - `fetch`, `no-store` вимикає кеш, а `revalidate` вмикає автооновлення.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Кешування в Next.js** - це механізм, який дозволяє **зберігати результати обчислень і запитів** та повторно використовувати їх, щоб сторінки завантажувалися швидше, а сервер робив менше зайвої роботи. Простіше кажучи: Next.js намагається **не перераховувати і не запитувати те саме щоразу**, якщо дані можна взяти з кешу. --- ## Що саме кешується У Next.js кешуються кілька рівнів: ### 1. Кеш даних (`fetch`) - результат серверних `fetch`-запитів - використовується в Server Components, SSG, ISR - кешуються **дані**, а не HTML --- ### 2. Кеш рендеру (HTML / RSC) - результат рендеру сторінки або layout - дозволяє швидко віддавати готовий результат - особливо важливий для статичних сторінок --- ### 3. Кеш маршрутів - повторне використання вже згенерованих сторінок - знижує навантаження при навігації --- ## Де працює кешування - кешування відбувається **на сервері** - клієнтські запити (`useEffect`, SWR у браузері) до цього кешу не потрапляють - браузерний cache і Next.js cache - різні речі --- ## Як Next.js вирішує, кешувати чи ні Основне керування відбувається через серверний `fetch`. ### Поведінка за замовчуванням ```js await fetch(url) ``` - запит кешується - результат перевикористовується - підходить для статичних даних --- ### Завжди свіжі дані ```js await fetch(url, { cache: "no-store" }) ``` - кеш вимкнено - запит виконується щоразу - схоже на SSR --- ### Кеш з оновленням ```js await fetch(url, { next: { revalidate: 60 } }) ``` - дані беруться з кешу - раз на 60 секунд оновлюються у фоні - це основа ISR --- ## Навіщо все це потрібно Кешування дає: - швидшу відповідь користувачу - менше запитів до API - менше навантаження на сервер - передбачувану поведінку сторінок - гарний баланс між швидкістю і актуальністю даних --- ## Типова логіка вибору - дані **майже не змінюються** -> кешувати - дані **інколи оновлюються** -> revalidate - дані **мають бути завжди свіжими** -> no-store - персональні дані -> частіше без кешу --- ## Коротке резюме - кешування - це повторне використання даних і рендеру - у Next.js кеш здебільшого серверний - ключовий інструмент - `fetch` - `no-store` вимикає кеш - `revalidate` вмикає автооновлення - кеш прискорює застосунок і знижує навантаженняДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.