Що Next.js надає «з коробки»

  • Кеш даних – У Next.js 13+ кожен виклик fetch() потрапляє в оперативний кеш для кожного запиту. Додавання опції revalidate вказує середовищу виконання оновлювати дані через певний інтервал, перетворюючи «гарячий» виклик API на «холодний» лише тоді, коли це необхідно.
  • Кеш повного маршруту – Фреймворк зберігає відрендерений HTML та дані, необхідні для всього маршруту. Повернені відвідувачі бачать миттєвий перехід, оскільки сервер пропускає повторний рендеринг.
  • ISR – Статичні сторінки перегенеруються у фоновому режимі, поки стара версія продовжує обслуговувати трафік. Це дозволяє тримати великий сайт статичним без повної перезбірки щоразу, коли змінюється контент.
  • cache() у Server Component – Хелпер cache від React мемоїзує складні обчислення або підключення до бази даних на час одного запиту, уникаючи дублювання роботи всередині дерева компонентів сторінки.

Ці кеші вирішують проблему «першого запиту», але все ще працюють у межах процесу Node. Щоб захистити сервер і базу даних, винесіть кешування назовні.

Зовнішні рівні, які можна додати

Рівень Що зберігає Типовий інструмент Як це допомагає
CDN Статичні активи, HTML, API JSON Cloudflare, Akamai, AWS CloudFront Переміщує контент до edge-локацій, скорочуючи час очікування для користувача
Зворотний проксі Відповіді цілих сторінок до того, як вони потраплять у Node Nginx, Varnish Надає кешовані сторінки безпосередньо, зменшуючи навантаження на екземпляр Next.js
Кеш на рівні додатка Результати складних запитів до БД або викликів API Redis, Memcached Забезпечує швидке сховище «ключ-значення», яке зберігається після перезапуску сервера і може використовуватися кількома екземплярами додатка

Кожен рівень розташований далі від вихідної бази даних, тому промах (miss) на одному рівні каскадом переходить на наступний, і зрештою запит досягає бази даних лише тоді, коли це абсолютно необхідно.

Підтримання актуальності кешу

Інвалідація (очищення) кешу часто стає проблемою для команд. Добре працюють три практичні патерни:

  • На основі часу (TTL) – Призначає фіксований термін дії для запису в кеші. Просто налаштувати, але це може призвести до видачі застарілих даних, поки не вийде термін дії таймера.
  • На основі подій – Підключіться до вашої CMS або будь-якого джерела даних, яке надсилає webhook при зміні контенту. Webhook ініціює очищення відповідного запису в кеші.
  • На основі тегів – Прикріпіть логічний тег до групи запитів (наприклад, product-list). Коли будь-який елемент у цій групі змінюється, один виклик revalidateTag('product-list') очищує всі записи, що мають цей тег.

Поєднання цих підходів дозволяє збалансувати актуальність даних і частоту успішних запитів до кешу (cache-hit rate).

Ієрархія, яка підходить більшості команд

  1. Кеш браузера – Статичні активи (CSS, JS, зображення) отримують довгий max-age, щоб пристрій користувача більше не звертався до мережі.
  2. CDN – Edge-вузли кешують повні HTML-сторінки та API JSON, дотримуючись заголовків Cache-Control, які ви встановлюєте в Next.js.
  3. Зворотний проксі – Екземпляр Nginx або Varnish стоїть перед сервером Next.js, надаючи кешовані відповіді для маршрутів, які рідко змінюються.
  4. Внутрішній кеш Next.js – Кеші даних та маршрутів фреймворка забезпечують мемоїзацію для кожного запиту та ISR.
  5. Кеш додатка – Redis зберігає результати важких запитів до бази даних, використовуючи параметри запиту або теги як ключі.
  6. База даних – Кінцеве джерело істини, до якого звертаються лише у разі промаху кешу на всіх вищих рівнях.

Коли надходить запит, він проходить по цьому списку, поки якийсь рівень не надасть відповідь. Перемагає найшвидша відповідь, а результат записується назад по ланцюгу для майбутніх звернень.

Збираємо все докупи

  1. Встановіть заголовки Cache-Control у ваших API-маршрутах
  2. Налаштуйте свій CDN – Увімкніть edge-кешування для HTML та JSON-ендпоінтів і переконайтеся, що CDN дотримується Cache-Control.
  3. Розгорніть зворотний проксі – Поставте Nginx перед вашим сервером Next.js.
  4. Додайте Redis – Кешуйте результати складних запитів до бази даних.
  5. Використовуйте revalidateTag у своїх компонентах – Викликайте revalidateTag, щоб очистити внутрішній кеш Next.js для конкретного тегу.

Підсумок

Один лише кеш всередині Next.js прискорює перший запит, але справжня масштабованість досягається завдяки дисциплінованому стеку: браузер → CDN → зворотний проксі → фреймворк → Redis → база даних. Налаштовуйте кожен рівень, керуйте інвалідацією за допомогою часу, подій та тегів і стежте за метриками. Затримка (latency) залишатиметься низькою, а ваш бекенд витримає сплески трафіку.