Как использовать Incremental Static Regeneration (ISR) в Next.js?

@margaret 

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

Шаг 1: Подготовка Next.js проекта

Убедитесь, что ваш проект настроен, и у вас установлена необходимая версия Next.js (ISR доступен начиная с Next.js 9.5).

Шаг 2: Реализация ISR в страницах

Для использования ISR, вам нужно обновить функции getStaticProps в ваших страницах, добавив параметр revalidate.

Вот пример, как это сделать:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// pages/posts/[id].js

export async function getStaticProps({ params }) {
  const post = await fetchPostById(params.id);

  return {
    props: {
      post,
    },
    revalidate: 60,  // Страница будет обновляться раз в 60 секунд
  };
}

export async function getStaticPaths() {
  const posts = await fetchAllPostIds();
  
  const paths = posts.map((id) => ({
    params: { id: id.toString() },
  }));

  return {
    paths,
    fallback: 'blocking',  // Или 'true' в зависимости от вашего случая
  };
}

export default function Post({ post }) {
  // Ваш код рендера компонента
}

Детали параметров

• revalidate: указывает количество секунд, по истечении которых страница должна быть пересобрана. Это позволяет задать время, после которого следующая запросившая страница получит обновлённую версию.
• fallback: определяет поведение для страниц, которые ещё не были сгенерированы: 'blocking': запросы новых маршрутов будут дожидаться завершения генерации страницы на сервере и клиент получит полностью сгенерированную страницу. 'true': страница будет возвращаться с клиентским рендерингом и данные будут загружаться на клиенте, пока страница не будет сгенерирована на сервере.

Шаг 3: Развертывание

ISR полностью поддерживается на Vercel без дополнительной настройки, так как Next.js разрабатывается Vercel. Однако, вы также можете использовать другие хостинги, которые поддерживают Node.js и серверные функции.

Заключение

Incremental Static Regeneration в Next.js позволит вам получать выгоды от статической генерации (быстрая загрузка и SEO), при этом обеспечивая обновление контента по таймеру или при запросе. Убедитесь, что вы тестируете свою реализацию и правильно настраиваете revalidate и fallback для вашего случая использования.