Skip to main content

Що таке кешування в Next.js?

Next.jsMiddle~1 хв читання
Запропонувати правку

Кешування в Next.js - це механізм, який дозволяє зберігати результати обчислень і запитів та повторно використовувати їх, щоб сторінки завантажувалися швидше, а сервер робив менше зайвої роботи.

Простіше кажучи: Next.js намагається не перераховувати і не запитувати те саме щоразу, якщо дані можна взяти з кешу.

Що саме кешується

У Next.js кешуються кілька рівнів:

1. Кеш даних (fetch)

  • результат серверних fetch-запитів
  • використовується в Server Components, SSG, ISR
  • кешуються дані, а не HTML

2. Кеш рендеру (HTML / RSC)

  • результат рендеру сторінки або layout
  • дозволяє швидко віддавати готовий результат
  • особливо важливий для статичних сторінок

3. Кеш маршрутів

  • повторне використання вже згенерованих сторінок
  • знижує навантаження при навігації

Де працює кешування

  • кешування відбувається на сервері
  • клієнтські запити (useEffect, SWR у браузері) до цього кешу не потрапляють
  • браузерний cache і Next.js cache - різні речі

Як Next.js вирішує, кешувати чи ні

Основне керування відбувається через серверний fetch.

Поведінка за замовчуванням

js
await fetch(url)
  • запит кешується
  • результат перевикористовується
  • підходить для статичних даних

Завжди свіжі дані

js
await fetch(url, { cache: "no-store" })
  • кеш вимкнено
  • запит виконується щоразу
  • схоже на SSR

Кеш з оновленням

js
await fetch(url, { next: { revalidate: 60 } })
  • дані беруться з кешу
  • раз на 60 секунд оновлюються у фоні
  • це основа ISR

Навіщо все це потрібно

Кешування дає:

  • швидшу відповідь користувачу
  • менше запитів до API
  • менше навантаження на сервер
  • передбачувану поведінку сторінок
  • гарний баланс між швидкістю і актуальністю даних

Типова логіка вибору

  • дані майже не змінюються -> кешувати
  • дані інколи оновлюються -> revalidate
  • дані мають бути завжди свіжими -> no-store
  • персональні дані -> частіше без кешу

Коротке резюме

  • кешування - це повторне використання даних і рендеру
  • у Next.js кеш здебільшого серверний
  • ключовий інструмент - fetch
  • no-store вимикає кеш
  • revalidate вмикає автооновлення
  • кеш прискорює застосунок і знижує навантаження

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку