Next.js: Streaming и Suspense — как это работает на практике

Server Component рендерится в RSC stream; Suspense даёт fallback сразу, resolved content — out-of-order chunk по chunked HTTP.

Разбор

При <Suspense> с awaiting data React эмитит fallback inline и placeholder. Когда promise resolve — server флашит out-of-order chunk: скрытый маркер + inline script, который переносит real DOM в placeholder. Всё едет на HTTP chunked transfer encoding — один long-lived response, без polling.

На клиенте selective hydration: React гидратирует boundary по мере прихода HTML и приоритизирует subtree, с которым пользователь только что взаимодействовал.

Критическое ограничение: после первого байта нельзя менять HTTP status или headers. redirect(), notFound() и cookie-setting — до начала streaming, иначе деградируют в client navigation.

Итог

Streaming = один response, shell сразу, dynamic chunks позже; auth/redirect — выше boundaries.