Інкрементальна Статична Регенерація (ISR)

SSG з таймованою ревалідацією, яка регенерує сторінки у фоновому режимі. Відмінно для Каталогів, новинних сайтів та Списків продуктів, які потребують періодичних оновлень без повних перебудов.

Сервер

🌐
Request
Response
🖥️
Сервер перевіряє кеш
Кеш валідний або застарів
Сервер отримує дані
React.renderToString()
Сервер зберігає в кеші
Сервер надсилає відрендерений HTML

Клієнт

Клієнт отримує HTML
React.hydrate()
Сторінка інтерактивна
Переваги x Компроміси

Benefits

  • Найкраще з Обох Світів: Статична продуктивність + динамічні оновлення
  • Автоматична Ревалідація: Контент залишається свіжим
  • Масштабованість: Граціозно обробляє спайки трафіку
  • Ефективність Витрат: Зменшене навантаження сервера

Trade-offs

  • Коротка застарілість: Контент може бути трохи застарілим
  • Накладні витрати ревалідації: Регенерація у фоні має витрати
  • Складний кеш: Потрібно керувати часом revalidate
  • Затримка першого запиту: Може запустити регенерацію
Як реалізувати?

ISR використовує Server Components асинхронні з ревалідацією на рівні сторінки. Використовуйте generateStaticParams для динамічних маршрутів.

export const revalidate = 3600; // 1 година

export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }];
}

export default async function ISRComponent({ params }: { params: { id: string } }) {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • Компоненти є асинхронними функціями (без директиви 'use client')
  • Не можна використовувати хуки React (useState, useEffect, тощо)
  • Додайте 'export const revalidate = 3600' на рівні сторінки (1 година)
  • Використовуйте generateStaticParams() для динамічних маршрутів
  • Використовуйте revalidatePath() або revalidateTag() для ревалідації за запитом