В чем особенность React SSR?

SSR (Server-Side Rendering) в React — рендеринг компонентов в HTML на сервере с последующим «оживлением» на клиенте. React SSR работает в два этапа: HTML с сервера + гидратация в браузере.

Как работает

• Сервер выполняет те же React-компоненты и отдаёт готовый HTML (renderToString / стриминговые API).
• Браузер мгновенно показывает разметку (быстрый FCP/LCP, контент виден до загрузки JS).
• Загружается JS-бандл, и происходит гидратация (hydrateRoot): React строит виртуальное дерево поверх существующего HTML, привязывает обработчики и состояние — страница становится интерактивной.

Особенности и подводные камни

• HTML должен совпадать с первым клиентским рендером, иначе hydration mismatch (типовые причины: Date.now(), random, window-зависимая логика, локаль).
• Нет браузерных API на сервере: window/document недоступны; эффекты (useEffect) на сервере не выполняются — браузерный код живёт в них.
• Двойная работа: компоненты выполняются и на сервере, и на клиенте; JS-бандл всё равно грузится.
• «Видно, но не кликается»: между показом HTML и гидратацией интерактивность отсутствует.

Эволюция в React 18/19

• Стриминговый SSR: renderToPipeableStream + Suspense — HTML отдаётся частями, медленные блоки приходят позже.
• Селективная гидратация: React оживляет в первую очередь то, с чем взаимодействует пользователь.
• Server Components — следующий шаг: часть компонентов выполняется только на сервере и вообще не шлёт свой JS клиенту (это уже не SSR в классическом смысле, а другая модель).

На практике SSR берут через фреймворки — Next.js, Remix, — а не руками.

Коротко для собеседования

Особенность React SSR: сервер отдаёт готовый HTML (быстрый первый показ, SEO), клиент гидрирует его — привязывает React к существующей разметке. Требования: совпадение серверного и клиентского рендера, изоляция браузерных API в эффектах. React 18 добавил стриминг и селективную гидратацию; практический инструмент — Next.js/Remix.