Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке ISR у Next.js?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

## Як працює ISR

1. При `next build` сторінка **генерується один раз** (як SSG)
2. Користувачі отримують **статичний HTML**
3. Минає `revalidate` секунд
4. **Наступний запит**:
  - старий HTML віддається одразу
  - **у фоні** пересобирається новий
5. Наступні користувачі побачать оновлену версію

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

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

---

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

### Через `revalidate`

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

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

### Через `fetch`

```ts
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 | так | так | так |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати288 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.