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

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

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

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

Контент

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

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

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

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

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

**Streaming Rendering (стрімінговий рендеринг)** - це спосіб, за якого сторінка **приходить користувачу частинами**, а не одним шматком, **у міру готовності даних**. Користувач бачить контент одразу, навіть якщо частина сторінки ще завантажується.

---

## Що таке streaming rendering

У **Next.js** streaming заснований на:

- **React Server Components**
- `Suspense`
- потоковій відправці HTML із сервера

## Як це працює (покроково)

1. Сервер починає рендер сторінки
2. **Готові частини HTML надсилаються одразу**
3. Повільні блоки замінюються на `fallback`
4. Коли дані готові - HTML **дострімлюється**
5. UI оновлюється **без перезавантаження сторінки**

```
request
  ↓
[header][sidebar][skeleton]
                 ↓
            [real content]
```

---

## Приклад із `Suspense`

```tsx
import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />

<Suspense fallback={<Skeleton />}>
        <SlowBlock />
      </Suspense>
    </>
  );
}
```

```tsx
async function SlowBlock() {
  const data = await fetchSlowData();
  return <Content data={data} />;
}
```

- `Header` -> приходить одразу
- `Skeleton` -> показується миттєво
- `Content` -> довантажується пізніше

---

## Навіщо потрібен streaming

### Покращує perceived performance

Користувач **одразу щось бачить**, а не чекає.

### Ідеальний для важких сторінок

- AI-відповіді
- складні дашборди
- декілька API
- великі БД-запити

### Чудово поєднується з SSR / ISR

Streaming ≠ окремий тип рендерингу
Він **підсилює** SSR та ISR.

---

## Streaming vs звичайний SSR

|  | Звичайний SSR | Streaming |
|---|---|---|
| HTML | одним шматком | **частинами** |
| Перший контент | чекає на все | **з'являється одразу** |
| Skeleton | вручну | **нативно** |
| UX | добрий | відмінний |

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

Для рев’юера

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

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