Які рівні кешування є в Next.js?

У 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, а не окремі «фічі».