Как работают streaming и Suspense в Next.js?

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

Идея

Без streaming страница ждёт самый медленный запрос данных. С ним сервер отправляет каркас, а вместо медленного блока оставляет заглушку и дошлёт его HTML позже.

Как включается

• Файл loading.tsx рядом с page.tsx показывается автоматически, пока грузится сегмент.
• <Suspense fallback={...}> оборачивает конкретный медленный компонент.

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />                      {/* показывается сразу */}
      <Suspense fallback={<Skeleton />}>
        <Recommendations />           {/* async-компонент, грузится дольше */}
      </Suspense>
    </>
  );
}

Выгоды

Лучше воспринимаемая скорость: быстрее первый байт и первый контент (улучшает метрики FCP и LCP). Тяжёлая часть не блокирует остальную страницу.

Коротко для собеседования

Streaming отдаёт страницу по кускам, а Suspense обозначает границы, внутри которых можно ждать данные, не блокируя остальное.