Що таке ISR у Next.js?

Next.jsMiddle~1 хв читання

ISR (Incremental Static Regeneration) у Next.js - це гібрид SSG + фонове оновлення, коли сторінка залишається статичною і швидкою, але періодично пересобирається без повного ребілда сайту.

Як працює ISR

При next build сторінка генерується один раз (як SSG)
Користувачі отримують статичний HTML
Минає revalidate секунд
Наступний запит:

старий HTML віддається одразу
у фоні пересобирається новий

Наступні користувачі побачать оновлену версію

build → static HTML → users
                 ↓ (revalidate)
              background rebuild

Користувач ніколи не чекає пересборки.

Як увімкнути ISR (App Router)

Через `revalidate`

// app/blog/page.tsx
export const revalidate = 60; // секунд

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

Через `fetch`

await fetch("https://api.example.com/posts", {
  next: { revalidate: 60 },
});

Коли використовувати ISR

ISR ідеально підходить, якщо:

контент публічний
дані оновлюються
потрібен SEO
важлива швидкість

Типові кейси:

блог
каталог товарів
роадмапи
статті
маркетингові сторінки з оновленнями

Плюси ISR

майже як SSG за швидкістю
дані оновлюються автоматично
немає навантаження як у SSR
не потрібен повний ребілд
чудово для CDN

Мінуси ISR

дані не завжди «прямо зараз»
можлива застаріла версія до revalidate
не підходить для персоналізації
не можна для auth-даних

ISR vs SSG vs SSR

	SSG	ISR	SSR
Швидкість	висока	висока	середня
Актуальність	ні	частково	так
Сервер	ні	частково	так
SEO	так	так	так

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.