React: Что такое Server-Side Rendering (SSR) и зачем он нужен для SEO-оптимизации сайтов на JavaScript?

Server-Side Rendering (SSR) — это подход к рендерингу веб-приложений, при котором HTML-страница формируется на сервере и отправляется в браузер уже в готовом виде, а не генерируется на стороне клиента с помощью JavaScript. В контексте React это означает, что компоненты рендерятся на сервере (Node.js), и пользователь получает полноценный HTML-документ при первом запросе.

**Как работает SSR в React?**

При классическом подходе (Client-Side Rendering, CSR) браузер получает пустой HTML-файл с подключённым JavaScript-бандлом. Только после загрузки и выполнения JS-кода страница наполняется контентом. При SSR сервер использует методы `ReactDOMServer.renderToString()` или `renderToPipeableStream()` для генерации HTML из React-компонентов, отдаёт готовую разметку браузеру, а затем происходит «гидратация» (hydration) — React подключает обработчики событий к уже существующему DOM.

**Зачем SSR нужен для SEO?**

1. **Индексация поисковыми роботами.** Большинство поисковых систем (в том числе Googlebot) лучше индексируют страницы с готовым HTML-контентом. Хотя Google научился выполнять JavaScript, этот процесс занимает время и ресурсы, что может негативно сказаться на индексации.

2. **Скорость первой загрузки (FCP/LCP).** SSR улучшает метрики Core Web Vitals — First Contentful Paint и Largest Contentful Paint, поскольку пользователь видит контент немедленно, без ожидания загрузки JS-бандла.

3. **Социальные сети и Open Graph.** Парсеры социальных сетей (Facebook, Twitter, Telegram) не выполняют JavaScript, поэтому без SSR мета-теги для превью ссылок попросту не считываются.

4. **Улучшение поведенческих факторов.** Быстрая загрузка снижает показатель отказов, что косвенно влияет на позиции в поисковой выдаче.

**Инструменты для SSR в React:**

— **Next.js** — наиболее популярный фреймворк, поддерживает SSR, SSG (Static Site Generation) и ISR (Incremental Static Regeneration).
— **Remix** — современный фреймворк с акцентом на серверный рендеринг и работу с формами.
— **Gatsby** — ориентирован на статическую генерацию с возможностью SSR.

**Недостатки SSR:**

— Повышенная нагрузка на сервер, так как каждый запрос требует рендеринга.
— Более сложная инфраструктура по сравнению с CSR.
— Время до интерактивности (TTI) может быть выше из-за процесса гидратации.

Для большинства коммерческих проектов на React рекомендуется использовать Next.js с комбинацией SSR и SSG: статические страницы генерируются заранее, а динамические — рендерятся на сервере по запросу.