Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які рівні кешування існують?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У Next.js кешування влаштоване **багаторівнево** - кешується не лише результат запиту, а й різні етапи рендера. **Ключове:** чим вищий рівень - тим швидша відповідь, але тим складніше оновлювати дані.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ Next.js кешування влаштоване **багаторівнево** - кешується не лише результат запиту, а й різні етапи рендера. Це дозволяє суттєво пришвидшувати застосунок і зменшувати кількість повторних обчислень. Нижче - основні рівні кешування, від «низького» до «високого». --- ## 1. Кеш даних (Data Cache) Це найбазовіший рівень. ### Що кешується: - результат серверних `fetch`-запитів - дані із зовнішніх API або backend-сервісів ### Де використовується: - Server Components - SSG - ISR ### Як керується: - за замовчанням `fetch` кешується - `cache: "no-store"` - без кешу - `next: { revalidate }` - кеш з автооновленням Це кеш **даних**, а не HTML. --- ## 2. Кеш React Server Components (RSC cache) ### Що кешується: - результат виконання Server Components - дані + структура UI у форматі RSC ### Навіщо потрібен: - повторно використовувати результат серверних компонентів - пришвидшувати повторні рендери - уникати повторних `fetch` Працює поверх Data Cache і тісно з ним пов'язаний. --- ## 3. Кеш рендера (Full Route / HTML Cache) ### Що кешується: - повністю відрендерена сторінка (HTML) - layout + page ### Коли використовується: - при статичній генерації (SSG) - при ISR ### Особливість: - користувач отримує вже готовий HTML - мінімальне навантаження на сервер Це найважчий, але найшвидший рівень. --- ## 4. Кеш маршрутів (Router Cache) ### Що кешується: - уже завантажені сегменти сторінок - результати навігації між роутами ### Де працює: - на клієнті (App Router) - при переходах без перезавантаження сторінки ### Що дає: - миттєві переходи - менше мережевих запитів --- ## 5. Зовнішній кеш (CDN / Edge) Це вже не частина Next.js напряму, але часто використовується разом з ним. ### Технології: - CDN - edge-кешування - reverse proxy ### Що кешується: - HTML - JSON - статичні файли Працює поверх усього іншого. --- ## Як це все пов'язано Спрощено: - **Data Cache** -> кеш даних - **RSC Cache** -> кеш серверних компонентів - **HTML Cache** -> кеш сторінки цілком - **Router Cache** -> кеш навігації - **CDN** -> кеш на рівні мережі Чим вищий рівень - тим швидша відповідь, але тим складніше оновлювати дані. --- ## Коротке резюме У Next.js є кілька рівнів кешування: - кеш даних (`fetch`) - кеш Server Components - кеш HTML / маршрутів - клієнтський кеш навігації - зовнішній (CDN) Вони працюють разом, дозволяючи балансувати між **швидкістю** і **актуальністю даних**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.