Как работает потоковая SSR с Suspense в Next.js?

Потоковая SSR позволяет серверу отправлять HTML в браузер по частям по мере готовности, вместо ожидания полной отрисовки страницы. Медленные части не блокируют быстрые — пользователь видит контент прогрессивно. React <Suspense> определяет границы потока.

Проблема, которую решает потоковая передача

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

Использование Suspense для потоковой передачи

import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <Header />                          {/* sent immediately */}
      <Suspense fallback={<Skeleton />}>  {/* streams independently */}
        <SlowProductList />               {/* an async Server Component */}
      </Suspense>
      <Footer />                          {/* sent immediately */}
    </>
  );
}

async function SlowProductList() {
  const products = await getProducts();   // takes 2s — doesn't block the rest
  return <List products={products} />;
}

Заголовок, нижняя часть и скелетон приходят мгновенно; когда getProducts() разрешается, React передаёт список продуктов потоком и заменяет скелетон — всё в одном непрерывном ответе.

loading.tsx — это автоматический Suspense

// app/dashboard/loading.tsx → Next wraps the whole page in <Suspense> with this fallback
export default function Loading() { return <Spinner />; }

Файл loading.tsx — это синтаксический сахар для обёртывания маршрута в Suspense — самый простой способ передать весь сегмент потоком.

Почему потоковая передача помогает ключевым метрикам

TTFB (Time To First Byte) ↓ — server sends the shell right away
FCP (First Contentful Paint) ↓ — visible content appears sooner
User perceives the page as fast even if some data is slow

Вы также получаете выборочную гидратацию — React может гидратировать интерактивные части по мере их поступления в потоке, вместо ожидания всего.

Почему это важно

Потоковая SSR устраняет проблему "один медленный запрос блокирует всю страницу", присущую традиционной SSR.

Оборачивая медленные, зависящие от данных разделы в <Suspense> (или используя loading.tsx), вы доставляете быструю оболочку сразу и передаёте остальное потоком — улучшая TTFB/FCP и воспринимаемую производительность.

Это определяющая возможность архитектуры App Router с Server Components и React 18.