Что такое ISR?

Что такое ISR?

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

Проблема, которую решает ISR

В классическом SSG возникает дилемма:

• Генерируешь вёрстку во время сборки — сайт очень быстрый, но контент статичный
• Всегда SSR — контент свежий, но сервер работает на пределе, скорость ниже

ISR решает это: ты получаешь скорость SSG с "живым" контентом SSR.

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

// Пример с реального сайта блога
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

export const revalidate = 60; // Ключевой параметр!

export default async function Post({ params }) {
  const post = await fetchPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Значение revalidate определяет стратегию:

• revalidate = 3600 — страница переживается раз в час
• revalidate = false — страница никогда не переживается (полностью статичная)
• revalidate = 0 — перепроверка при каждом запросе (как SSR)

Жизненный цикл страницы с ISR

1. Build-time — Next.js генерирует HTML страницы для всех paths из generateStaticParams
2. First request — пользователь получает закэшированную HTML (супер быстро)
3. Timeout — когда истёк revalidate интервал, страница помечается как stale
4. Next request после timeout — пользователь получает старую страницу (быстро), на фоне Next.js перегенерирует страницу
5. Следующий запрос — пользователь получает новую версию

Это называется Stale-While-Revalidate паттерн.

Практические примеры

1. Блог с постами

// app/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await db.query('SELECT slug FROM posts');
  return posts.map((post) => ({ slug: post.slug }));
}

export const revalidate = 86400; // Раз в день

export default async function BlogPost({ params }) {
  const post = await db.query(
    'SELECT * FROM posts WHERE slug = $1',
    [params.slug]
  );
  
  if (!post) return notFound();
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>Опубликовано: {new Date(post.created_at).toLocaleDateString()}</p>
      <div>{post.body}</div>
    </article>
  );
}

2. Товары в интернет-магазине

// app/products/[id]/page.tsx

export async function generateStaticParams() {
  // Генерируем только популярные товары
  const products = await fetchPopularProducts();
  return products.map((p) => ({ id: p.id.toString() }));
}

export const revalidate = 3600; // Раз в час

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);
  const reviews = await fetchReviews(params.id);
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Цена: {product.price} руб.</p>
      <p>В наличии: {product.stock}</p>
      <ReviewsList reviews={reviews} />
    </div>
  );
}

3. Динамический запрос на перегенерацию (On-Demand ISR)

Часто нужно обновить страницу не по расписанию, а при возникновении события.

ISR vs SSG vs SSR

Когда использовать ISR

Идеально для:

• Блогов (обновляются редко, нужна скорость)
• Товаров в магазинах (меняется цена, но редко)
• Документации (хотя SSG часто достаточно)
• Новостных сайтов (баланс между частотой и скоростью)
• Лендингов (обновляют редко)

Не подходит для:

• Личных кабинетов (нужны всегда актуальные данные)
• Real-time информации (котировки, чат)
• Высокозагруженных страниц (каждый запрос требует вычисления)

Преимущества ISR

• Скорость — статический контент раздаётся мгновенно
• Масштабируемость — минимальная нагрузка на сервер
• Гибкость — обновляется автоматически или по требованию
• SEO-friendly — поисковики видят стабильный статический контент
• Дешево — хостинг дешевле чем чистый SSR

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