Skip to main content

Що таке ISR?

ISR (Incremental Static Regeneration) - це механізм у Next.js, який дозволяє оновлювати статичні сторінки на сервері після збірки, не пересобираючи весь проєкт цілком.

Простіше кажучи: сторінка виглядає як статична, завантажується дуже швидко, але дані в ній можуть оновлюватися з часом.


Навіщо взагалі потрібен ISR

Є дві крайності:

  • Статична генерація -> дуже швидко, але дані «заморожені»
  • Серверний рендер на кожен запит -> завжди свіжі дані, але повільніше й дорожче

ISR - це золота середина між ними.


Як працює ISR крок за кроком

  1. Проєкт збирається
  2. Сторінка генерується як статична
  3. Користувачі отримують готовий HTML (дуже швидко)
  4. Next.js відстежує, чи не застаріла сторінка
  5. Якщо час оновлення минув:
  • сервер у фоні перегенерує сторінку
  • кеш оновлюється
  1. Наступні користувачі отримують вже оновлену версію

Важливо: користувач не чекає пересбирання, він завжди отримує сторінку одразу


Що означає «інкрементальна»

  • оновлюється не весь сайт
  • а лише конкретні сторінки
  • і лише коли це потрібно

Наприклад:

  • оновилася одна стаття
  • пересобралася лише її сторінка
  • решта сайту не чіпається

Приклад життєвої ситуації

Припустимо, є:

  • каталог товарів
  • ціни змінюються раз на кілька хвилин

З ISR:

  • сторінка завантажується як статична
  • сервер оновлює її, скажімо, раз на 60 секунд
  • користувачі завжди бачать майже актуальні дані
  • без постійних серверних запитів

Чим ISR корисний

ISR вирішує одразу кілька проблем:

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

Де використовується ISR

У Pages Router:

  • через getStaticProps з налаштуванням оновлення

У App Router (сучасний підхід у Next.js):

  • через fetch з revalidation
  • або через ручне оновлення кешу за подією

Суть одна й та сама:

сторінка статична, але не назавжди


Обмеження ISR

ISR не підходить, якщо:

  • дані суворо персональні
  • інформація має бути абсолютно актуальною щосекунди
  • сторінка залежить від поточного користувача

У таких випадках потрібен серверний рендер на кожен запит.


Коротко по суті

ISR - це:

  • статична генерація

  • автоматичне оновлення

  • без повної пересбирання сайту

Саме тому ISR часто використовують для:

  • блогів
  • каталогів
  • маркетингових сторінок
  • контентних платформ

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

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

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