Streaming в React: что реально происходит
Как React стримит UI вне порядка дерева компонентов с помощью Suspense, маркеров и скриптов для гидрации.
Интересный разбор того, как в React устроен стриминг UI под капотом — и почему он может рендерить интерфейс «не по порядку».
Автор показывает, что современный SSR в React — это уже не просто «собрали HTML → отдали». С появлением Suspense и streaming сервер начинает отправлять куски разметки по мере готовности. Причём порядок может отличаться от исходного дерева компонентов.
Ключевая идея:
- React разбивает дерево на чанки
- каждый Suspense boundary становится точкой, которую можно «дождаться или пропустить»
- готовые части улетают клиенту сразу, не блокируя всё остальное
В итоге:
- быстрый TTFB
- пользователь раньше видит хоть что-то полезное
- тяжёлые куски догружаются позже
Но под капотом там довольно хитрая магия:
React вставляет специальные маркеры и скрипты, чтобы потом «собрать» всё обратно в правильном порядке уже в браузере и гидрировать.
Хорошо объясняется, почему это не ломает DOM и как вообще возможно рендерить out-of-order, не превращая страницу в кашу.
Если работаешь с SSR / RSC — прям мастрид, чтобы понять, что реально происходит, а не «оно как-то стримится само».