Які рівні кешування існують?

У 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)

Вони працюють разом, дозволяючи балансувати між швидкістю і актуальністю даних.