Incremental Static Regeneration

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Как это работает

Когда вы используете статическую генерацию (Static Site Generation, SSG) в Next.js, страницы вашего сайта создаются на этапе сборки и остаются неизменными до следующей сборки. Это обеспечивает высокую скорость загрузки и отличную производительность, так как страницы уже готовы к отправке пользователю. Однако, если данные на сайте часто обновляются, это может стать проблемой, так как пользователи будут видеть устаревшую информацию до следующей сборки.

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

Пример кода

Рассмотрим пример использования ISR в Next.js:

export async function getStaticProps() {
  // Получение данных из API или базы данных
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
​
  return {
    props: {
      data,
    },
    // Указываем, что страница должна обновляться каждые 10 секунд
    revalidate: 10,
  };
}
​
function Page({ data }) {
  // Отображение данных на странице
  return (
    <div>
      <h1>Данные</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
​
export default Page;

• getStaticProps: Эта функция используется для получения данных на этапе сборки. Она возвращает объект с данными, которые будут переданы в компонент страницы.
• revalidate: 10: Этот параметр указывает, что страница должна обновляться каждые 10 секунд. Если пользователь запрашивает страницу после истечения этого времени, Next.js повторно генерирует страницу в фоновом режиме.
• Page: Это компонент, который отображает данные. Он получает данные через пропсы и рендерит их на странице.

Зачем это нужно

ISR позволяет сочетать преимущества статической генерации (быстрая загрузка и высокая производительность) с актуальностью данных, характерной для серверного рендеринга. Это делает ISR идеальным выбором для сайтов, где важна как скорость, так и актуальность информации. Например, новостные сайты могут использовать ISR для обновления статей по мере поступления новых данных, а интернет-магазины — для обновления информации о товарах и ценах.