> Что такое ISR (Incremental Static Regeneration) в Next.js и почему это гибрид (JavaScript, Next.js)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ДиджиталСектор, Исходный Код

Стек: JavaScript, Next.js

> Пример ответа

Короткий ответ

ISR (Incremental Static Regeneration) - это фича Next.js, которая позволяет обновлять статические страницы после сборки, без пересборки всего сайта. Она гибридная, потому что сочетает статическую генерацию (SSG) с возможностью динамического обновления контента по запросу или по таймеру, объединяя скорость статики и свежесть серверного рендеринга.

Подробное объяснение

ISR работает на основе revalidate в getStaticProps. Когда пользователь запрашивает страницу, Next.js сначала отдает закешированную статическую версию, а затем в фоне перегенерирует её, если истекло время revalidate. Следующий запрос получает уже обновленную страницу. Это гибрид, потому что страница ведет себя как статическая (быстрая отдача, кеширование CDN), но при этом может обновляться без полной пересборки проекта. В отличие от SSR, где каждый запрос генерируется на сервере, ISR сохраняет производительность статики, но добавляет актуальность данных.

На практике

ISR удобен для страниц с контентом, который меняется нечасто, но требует обновлений без деплоя - например, блоги, каталоги товаров, новости. Параметр revalidate задается в секундах. Если поставить revalidate: 60, страница будет обновляться не чаще раза в минуту. Также можно использовать on-demand revalidation через API-роут для мгновенного обновления после изменений в CMS. Важно помнить: ISR не подходит для персонализированного контента (там нужен SSR или CSR).

Пример кода

JAVASCRIPT
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();

  return {
    props: { posts },
    revalidate: 60, // секунды
  };
}

Как отвечать на собеседовании

Начни с определения ISR как механизма обновления статики. Подчеркни гибридность: статика для скорости, динамика для свежести. Упомяни revalidate и on-demand revalidation. Приведи пример использования - блог или каталог. Не углубляйся в детали реализации, если не спросят. Главное - показать понимание trade-off между производительностью и актуальностью.

Что проверяет интервьюер

Понимание разницы между SSG, SSR и ISR.
Знание, как ISR влияет на производительность и UX.
Умение выбирать правильный рендеринг под задачу.
Осведомленность о on-demand revalidation.

Типичные ошибки

Путать ISR с SSR: ISR не генерирует страницу на каждый запрос.
Думать, что ISR обновляет страницу сразу после revalidate - на самом деле обновление происходит при следующем запросе после истечения таймера.
Использовать ISR для персонализированных данных (например, корзина пользователя).
Забывать про кеширование на CDN - ISR с ним хорошо работает, но нужно учитывать заголовки кеша.