Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які рівні кешування є в Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У Next.js кешування влаштоване **багаторівнево** - дані і результат рендера можуть зберігатися на різних етапах шляху від сервера до користувача. **Ключове:** у Next.js немає одного «кешу» - є кілька рівнів, кожен зі своєю роллю.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ Next.js кешування влаштоване **багаторівнево** - дані і результат рендера можуть зберігатися на різних етапах шляху від сервера до користувача. Це дає гнучкість: можна пришвидшувати застосунок, не жертвуючи актуальністю там, де вона важлива. Нижче - усі основні **рівні кешування**, від «внутрішніх» до більш зовнішніх. --- ## 1. Кеш `fetch` (рівень даних) Це **найбазовіший і найважливіший рівень**. ### Що кешується - результати запитів `fetch` - відповіді API, CMS, зовнішніх сервісів ### Де працює - на сервері Next.js - у Server Components - у route handlers ### Як керується - `cache: 'force-cache'` - `cache: 'no-store'` - `next: { revalidate: N }` ### Навіщо потрібен - щоб не робити однакові запити знову і знову - щоб різні сторінки могли перевикористовувати одні й ті самі дані Один і той самий `fetch` може обслуговувати **багато сторінок і користувачів**. --- ## 2. Кеш рендера (Full Route Cache) Це кеш **уже зібраного HTML / RSC-дерева** для маршруту. ### Що кешується - результат рендера сторінки - включно з розміткою і даними ### Коли використовується - статичні сторінки - сторінки з ISR - Server Components без динаміки ### Що дає - сервер не перезбирає сторінку - HTML віддається миттєво Важливо: - якщо дані всередині сторінки закешовані - і сама сторінка теж може бути закешована - якщо всередині є `no-store` - кеш рендера вимикається --- ## 3. ISR-кеш (час життя сторінки) Це надбудова над статичною генерацією. ### Що кешується - статична версія сторінки - з таймером оновлення ### Як працює - сторінка вважається «свіжою» `N` секунд - потім оновлюється у фоні - користувачі не чекають на перезбирання ### Навіщо потрібен - поєднувати швидкість статики - і оновлювані дані Цей рівень особливо важливий для: - блогів - каталогів - контентних сайтів --- ## 4. Кеш React Server Components (RSC Cache) Це кеш на рівні **серверних компонентів**. ### Що кешується - результат виконання Server Components - серіалізоване RSC-дерево ### Що це дає - повторний рендер сторінки може не виконувати компонент заново - особливо корисно при навігації всередині застосунку Цей рівень тісно пов'язаний із: - кешем `fetch` - кешем маршруту --- ## 5. CDN / Edge-кеш (зовнішній рівень) Це вже **поза Next.js**, але він активно використовується. ### Що кешується - HTML - JSON - статичні файли ### Де - на CDN (Vercel, Cloudflare тощо) - географічно ближче до користувача ### Що дає - мінімальну затримку - масштабованість - зниження навантаження на сервер Next.js може: - автоматично надсилати правильні cache-headers - щоб CDN розумів, що і як кешувати --- ## 6. Клієнтський кеш (браузер і бібліотеки) Це найзовнішніший рівень. ### Що сюди відноситься - HTTP cache браузера - кеш SWR / React Query - in-memory стани ### Особливості - живе недовго - індивідуальний для кожного користувача - очищається при перезавантаженні Використовується здебільшого для: - інтерактивних даних - оновлень без перезавантаження сторінки --- ## Як це все складається разом Зазвичай ланцюжок виглядає так: **API → fetch-кеш → RSC / Route-кеш → CDN → браузер** І ти можеш керувати: - кожним `fetch` - поведінкою сторінки - часом оновлення - динамічністю даних --- ## Головне, що варто зрозуміти - У Next.js **немає одного «кешу»** - Є кілька рівнів, кожен зі своєю роллю - Помилка на одному рівні може «зламати» весь ефект - Але за правильного налаштування застосунок стає: - швидким - масштабованим - передбачуваним Усі ці рівні - частина архітектури Next.js, а не окремі «фічі».Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.