SSR, streaming и hydration

Вы выберете rendering strategy, устраните hydration mismatch и спроектируете streaming boundaries без ложных гарантий.

До начала достаточно render/commit, Suspense, browser/server boundaries и routing. В конце должен появиться не конспект, а SSR-страница каталога со streaming secondary content, корректными ids и hydration diagnostics.

CSR подходит authenticated tools после shell, SSR — request-specific first HTML, SSG — content, известному на build. Можно смешивать по routes. Решение учитывает TTFB/LCP, cacheability, personalization, hosting и operational cost; SSR не гарантирует меньший JavaScript.

Рабочая проверка. Запишите strategy per route.

Типичная поломка. Включить SSR для всего без измерения.

Server output и первый client render должны совпасть. Не читайте Date.now, random, window/localStorage или browser-only width в render без согласованного snapshot. Передайте request data, используйте Effect после hydration для client-only enhancement или render stable placeholder.

Рабочая проверка. Стабилизируйте timestamp через prop.

Типичная поломка. Ветвиться typeof window в JSX первого render.

hydrateRoot прикрепляет React к server-generated HTML и ожидает совпадение. Root имеет один owner; ранние DOM mutations browser extensions/inline scripts могут мешать. Recoverable errors отправляют telemetry с безопасным context. root.render до завершения hydration может очистить server content.

Рабочая проверка. Подключите onRecoverableError.

Типичная поломка. Игнорировать hydration console warnings production.

useId создаёт стабильные ids, согласованные SSR/hydration и tree order, для aria-labelledby/describedby. Не используйте его для list keys или database ids. Несколько roots получают identifierPrefix, чтобы избежать collisions.

Рабочая проверка. Свяжите input/error ids в нескольких instances.

Типичная поломка. Math.random id в render.

Server stream отправляет shell onShellReady, затем вставляет Suspense content. Ошибка до shell может сменить HTTP status; после начала stream status уже отправлен и ошибка локализуется UI/telemetry. Bot/static generation может ждать allReady по policy.

Рабочая проверка. Разделите critical product и recommendations.

Типичная поломка. Начать stream до определения status/auth redirect.

Streaming + Suspense позволяет React гидрировать boundaries по готовности и пользовательскому взаимодействию. Click на ещё не hydrated boundary может повысить приоритет. Не делайте huge monolithic boundary и не рассчитывайте, что hydration исправит long tasks third-party scripts.

Рабочая проверка. Разделите interactive islands по UX.

Типичная поломка. Один boundary/root на весь тяжёлый dashboard.

SSR server process обслуживает много requests. Mutable module cache/user variable может утечь между пользователями. Request data, auth и caches scoping выполняются framework/context; global cache допускает только безопасные public данные и key scope. Abort request прекращает лишнюю work.

Рабочая проверка. Проверьте parallel requests разных users.

Типичная поломка. module variable currentUser.

Классифицируйте mismatch: invalid HTML nesting/browser repair, nondeterministic data, environment branch, external mutation, CSS-in-JS ordering. Снимите server HTML и first client inputs. Исправляйте источник, а suppress используйте лишь для неизбежного одиночного текста вроде timestamp.

Рабочая проверка. Создайте checklist и regression test console.

Типичная поломка. Глобально подавить warnings.

Исправьте приложение, где render читает Date/window, ids случайны, auth shell различается, а большой boundary задерживает весь response. Сделайте request-scoped data, deterministic initial tree, useId и streaming split.

Критерий завершения: server/client первый render совпадает, console чист от mismatch, interactivity восстанавливается, no-JS HTML содержит критический content. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.