Что такое Streaming SSR?

Streaming SSR — это способ серверного рендеринга, при котором HTML отправляется клиенту потоком, а не одним большим ответом после полной подготовки страницы. В классическом SSR сервер сначала должен дождаться всех данных, отрендерить всю страницу и только потом отправить её браузеру. Если один блок зависит от медленного API, пользователь долго видит пустой экран.

Как это работает

В React 18+ Streaming SSR строится вокруг renderToPipeableStream и Suspense. Сервер сразу отдаёт оболочку страницы и fallback-компоненты, а части, которые ещё ждут данные, отправляются позже отдельными чанками. Браузер начинает парсить и отображать HTML раньше, а React затем выполняет hydration по мере поступления контента.

import { renderToPipeableStream } from 'react-dom/server';
import { Suspense } from 'react';

function Page() {
  return (
    <html>
      <body>
        <Header />
        <Suspense fallback={<p>Загрузка профиля...</p>}>
          <SlowProfile />
        </Suspense>
      </body>
    </html>
  );
}

const stream = renderToPipeableStream(<Page />, {
  onShellReady() {
    stream.pipe(response);
  }
});

Где применяется

• В больших React-приложениях с медленными запросами к API.
• В Next.js App Router, где Streaming SSR включён по умолчанию для серверных компонентов.
• На страницах с персонализированными блоками, которые можно отрисовать позже остального интерфейса.

Главная выгода — улучшение метрик вроде TTFB и FCP: пользователь видит каркас страницы почти сразу, даже если часть данных ещё не пришла. При этом важно правильно расставлять Suspense-границы, чтобы не создавать слишком много мелких чанков и не усложнять hydration.

Итог: Streaming SSR стоит применять, когда страница содержит независимые медленные блоки и важно быстро показать пользователю основной контент, не дожидаясь полной загрузки всех данных.