Streaming SSR и селективная гидратация: HTML волнами

Конвейер: сначала каркас, потом куски по мере резолва

renderToPipeableStream (Node; на edge-рантаймах — renderToReadableStream) рендерит дерево на сервере, используя границы Suspense как швы. Всё, что вне любой границы, — каркас. Жизненный цикл:

1. React рендерит, пока каркас не готов. Приостановленные поддеревья его не блокируют — на их месте React выводит HTML fallback границы.
2. Срабатывает onShellReady; вы начинаете отдавать ответ. Браузер получает целую, пригодную к отрисовке страницу — лейаут, статичный контент, скелетоны — в одном chunked-ответе HTTP, который остаётся открытым.
3. По мере резолва каждого приостановленного поддерева на сервере React дописывает в поток ещё кусок: настоящий HTML в скрытом <div> плюс инлайн-<script>, который переносит его в слот fallback в DOM. Для подмены не нужен клиентский фреймворк — она работает до загрузки вашего бандла.
4. Когда все границы дослались, поток закрывается (onAllReady — хук для краулеров и статической генерации: дождаться всего и отправить разом, разменивая TTFB — Time To First Byte, время до первого байта ответа — на полный HTML).

Режим отказа следует из шага 1: любая зависимость от данных вне границы блокирует каркас. Неважно, что остальная страница готова к стримингу: первый байт ждёт самый медленный await над линией границ. Это та же дисциплина расстановки, что и в уроке про загрузочный UI, только теперь с ценником TTFB — расстановка границ решает не только что исчезает вместе, но и что сервер вправе отложить.

// ❌ в shell: TTFB каждого пользователя теперь включает этот запрос
const tier = await session.getTier(userId);   // p99 900ms

// ✅ под границей: shell стримится немедленно, badge — позже
<Suspense fallback={null}>
  <TierBadge userId={userId} />
</Suspense>

Селективная гидратация: по границам, прерываемо, с учётом кликов

На клиенте hydrateRoot больше не гидратирует страницу одним синхронным монолитом. Границы Suspense делят гидратацию на независимые единицы, и отсюда три свойства:

• Гидратация начинается до того, как всё доехало. Каркас гидратируется, как только загрузился бандл, даже пока поздние куски ещё стримятся. Доехавшие границы гидратируются по мере появления их кода и контента.
• Гидратация прерываема. Между границами React уступает браузеру — длинная гидратация больше не блокирует ввод, как однопроходный hydrate(), где 600 мс гидратации означали 600 мс мёртвых кнопок.
• Взаимодействие меняет приоритеты. Если пользователь кликает внутри ещё не гидратированной границы, React записывает событие, срочно гидратирует именно эту границу (пропуская её вперёд тех, что раньше по дереву), а затем переигрывает клик по уже живым обработчикам. Клик не теряется и не достаётся мёртвому HTML — он ставится в очередь и доставляется с опозданием. На быстрой машине зазор неощутим; на медленной пользователь замечает паузу между тапом и реакцией — что всё равно строго лучше мира до React 18, где тап молча не делал ничего.

Дизайн-следствие: границы — это ещё и единицы гидратации. Граница на всю страницу означает, что клик куда угодно гидратирует всё; гранулярные границы означают, что поле комментария, по которому тапнули, гидратируется в одиночку — миллисекунды вместо сотен.

Несовпадения гидратации при стриминге

Гидратация сравнивает серверный HTML с первым клиентским рендером и требует их идентичности. Стриминг поднимает ставки двумя способами. Во-первых, классические причины — Date.now(), new Date().toLocaleString(), Math.random(), ветвление по user-agent, различия локалей — теперь срабатывают в разное время для разных границ: сервер отрендерил кусок с комментариями на 1,4 с позже каркаса, и любое производное от времени значение расходится не только между сервером и клиентом, но и между границами. Во-вторых, восстановление дороже, чем кажется: при несовпадении React клиентски перерендеривает содержимое ближайшей границы Suspense с нуля, выбрасывая дострименный HTML этой границы. Страница не падает, консоль предупреждает — а вы молча платите двойную стоимость рендера и возможное мигание области. Несовпадение в каркасе (над которым границы нет) — дорогой случай: React пересоздаёт на клиенте куда большую область. Дисциплина: всё недетерминированное рендерится одинаково (suppressHydrationWarning для таймстампа — скальпель, а не образ жизни) либо уезжает в эффект, выполняющийся только на клиенте, с осознанной платой в виде двухпроходного рендера этого узла.

TTFB против LCP: размер каркаса

Стриминг даёт ручку, а не бесплатный обед. Всё, что в каркасе, приходит на TTFB, но задерживает его; всё, что за границей, улучшает TTFB, но приезжает поздней волной. Два Core Web Vitals в противоборстве: TTFB (хорошо — до 800 мс) награждает тонкий каркас; LCP (хорошо — до 2,5 с) награждает самый крупный контентный элемент в первой волне — если ваш hero-баннер или заголовок статьи доезжает третьей волной, LCP считается по приходу третьей волны. Сениорская эвристика: каркас содержит лейаут плюс LCP-элемент тогда и только тогда, когда его данные стабильно быстрые (кэш в единицы миллисекунд или вовсе без данных); всё с длинным хвостом — персонализация, рекомендации, комментарии — за границы. И мерьте волны: каркас в 90% страницы — это переименованный блокирующий SSR, а каркас-пустая-рамка отдаёт LCP второй волне и теряет то, что стриминг купил.

Режимы отказа, которые стоит отрепетировать

• Медленный await в каркасе — инцидент из пролога: один поход в session store над линией границ держит TTFB каждого пользователя. Аудируйте то, что вне границ, как аудируете горячий путь.
• LCP-элемент за медленной границей — TTFB на дашборде красивый, а LCP деградирует; метрики расходятся, потому что заголовок приезжает второй волной.
• Недетерминированный рендер в каркасе — несовпадение гидратации без границы-контейнера клиентски перерендеривает полстраницы, удваивая работу на устройстве пользователя ровно тогда, когда оно занято сильнее всего.
• Единица гидратации размером со страницу — одна граница вокруг всего означает, что первый клик куда угодно оплачивает полную гидратацию; гранулярные границы делают тапнутый виджет интерактивным в одиночку.