React Academy · Урок

Инкрементальная генерация статических страниц (ISR)

Перегенерируйте статические страницы по расписанию или по требованию без полного повторного развёртывания.

«Инкрементальная генерация статических страниц (ISR)» — бесплатный урок React Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Что такое ISR

Инкрементальная статическая регенерация позволяет Next.js отдавать заранее созданную статическую страницу, одновременно обновляя её в фоновом режиме через заданный интервал — сочетая скорость статического HTML со свежестью серверного рендеринга.

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

При первом запросе Next.js отдаёт кэшированный статический HTML. После истечения интервала повторной валидации следующий запрос запускает регенерацию в фоновом режиме. Последующие запросы получают новую страницу после завершения регенерации.

Включение ISR с помощью revalidate

Экспортируйте константу revalidate или задайте next: { revalidate: N } для вызова fetch внутри страницы серверного компонента.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR для динамических маршрутов

Сочетайте generateStaticParams с revalidate, чтобы заранее создавать популярные динамические страницы и обновлять их по расписанию.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

Обновление по запросу

Вызовите revalidatePath() или revalidateTag() из серверного действия, маршрута API или обработчика веб-хука, чтобы немедленно регенерировать определённые страницы — без ожидания интервала.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Поведение для неизвестных путей

Для динамических маршрутов, отсутствующих в generateStaticParams, установите dynamicParams = true (по умолчанию), чтобы выполнять рендеринг по запросу и кэшировать результат, или false, чтобы возвращать ошибку 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Выдача устаревших данных во время обновления

Во время регенерации Next.js отдаёт устаревшую страницу, пока новая версия не будет готова. Пользователь всегда получает ответ — ему не нужно ждать свежих данных.

ISR, SSR и статика

Статика: создаётся один раз и никогда не меняется. ISR: создаётся заранее и регенерируется по расписанию. SSR: выполняет рендеринг заново при каждом запросе. Выбирайте ISR для содержимого, которое меняется время от времени, но выигрывает от скорости выдачи статики.

Особенности ISR

ISR не подходит для персонализированного содержимого (данных конкретного пользователя) или данных, которые должны обновляться в реальном времени. В таких случаях используйте запросы fetch с no-store и SSR.

ISR в маршрутизаторе страниц (getStaticProps)

В маршрутизаторе страниц ISR использует getStaticProps со значением revalidate в возвращаемом результате — концепция та же, но API другое.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

Проверка ISR

Проверьте заголовок ответа x-nextjs-cache: HIT означает, что ответ получен из кэша, MISS — что страница создана заново, а STALE — что отдаётся устаревшая версия во время повторной валидации.

Быстрая проверка

Что происходит, когда пользователь запрашивает страницу ISR, а интервал её повторной валидации только что истёк?

Повторение

ISR заранее создаёт страницы и обновляет их каждые N секунд с помощью export const revalidate = N. Используйте generateStaticParams для популярных динамических маршрутов, а для немедленного обновления после изменений — обновление по запросу через revalidatePath/Tag.

Часто задаваемые вопросы

Урок «Инкрементальная генерация статических страниц (ISR)» бесплатный?

Да — полный текст урока «Инкрементальная генерация статических страниц (ISR)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Инкрементальная генерация статических страниц (ISR)»?

Перегенерируйте статические страницы по расписанию или по требованию без полного повторного развёртывания. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Инкрементальная генерация статических страниц (ISR)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

fetch() с параметрами кэширования в Next.js
unstable_cache и React cache()
Инкрементальная генерация статических страниц (ISR)
Серверные действия для мутаций данных

← Назад к React Academy