Що таке streaming rendering?

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

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

Що таке streaming rendering

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

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

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

Сервер починає рендер сторінки
Готові частини HTML надсилаються одразу
Повільні блоки замінюються на fallback
Коли дані готові - HTML дострімлюється
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	добрий	відмінний

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

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

Premium

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