Что такое ISR и для чего он используется?

ISR (Incremental Static Regeneration) — это механизм кэширования страниц в веб-приложениях, который позволяет обновлять статические страницы после их первого построения, не прибегая к полному перестроению всего сайта.

Используется для:

• Повышения производительности: Страницы отдаются из кэша, что значительно ускоряет загрузку для пользователей.
• Актуальности данных: Позволяет обновлять контент на статических страницах без необходимости ручного или длительного процесса деплоя.
• Снижения нагрузки на сервер: Данные генерируются только при необходимости обновления, а не при каждом запросе.
• Улучшения SEO: Поисковые роботы получают статические страницы, что способствует лучшему индексированию.

Работает путем указания времени, через которое страница должна быть перегенерирована в фоновом режиме при следующем запросе после истечения этого времени. Пользователь при этом получает старую (кэшированную) версию страницы, пока идет перегенерация.

Пример использования в Next.js (один из фреймворков, реализующих ISR):

// pages/products/[id].js
export async function getStaticPaths() {
  // Получение путей для генерации статичных страниц
  return {
    paths: [
      { params: { id: '1' } },
      { params: { id: '2' } },
    ],
    fallback: true // позволяет генерировать страницы по запросу, если их нет в paths
  }
}

export async function getStaticProps({ params }) {
  // Получение данных для страницы
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
    revalidate: 60 // Указывает, что страница будет перегенерирована через 60 секунд
  };
}

function Product({ product }) {
  // Отображение страницы
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </div>
  );
}

export default Product;

В данном примере, страница продукта будет сгенерирована статически во время сборки. После деплоя, если пользователь зайдет на страницу через более чем 60 секунд после предыдущего запроса, сервер отдаст ему закэшированную версию, а в фоновом режиме запустит перегенерацию страницы с новыми данными. Следующий пользователь уже получит обновленную версию.