57. SSR и Hydration

SSR и Hydration: Как работает магия серверного рендеринга

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

1. Как работает SSR?

1. Запрос: Пользователь запрашивает страницу.
2. Сервер: Выполняет React-код, собирает данные (например, из API) и генерирует строку HTML.
3. Ответ: Сервер отправляет готовый HTML браузеру.
4. Отображение: Пользователь сразу видит контент (даже если JS еще не загрузился).
5. Hydration (Гидратация): Браузер загружает JS, React “оживляет” HTML, вешая обработчики событий.

2. Зачем нужен SSR?

• SEO: Поисковые роботы видят весь контент сразу, без необходимости исполнять JS.
• Performance (FCP): Пользователь видит “первую содержательную отрисовку” гораздо быстрее.
• Social Sharing: Превью ссылок в соцсетях работают корректно.

---

3. Hydration (Гидратация) — “Оживление” кода

Гидратация — это процесс, при котором React в браузере сопоставляет серверный HTML с клиентскими компонентами.

Критическое правило: Рендер на сервере и первый рендер на клиенте должны быть идентичными!

Если они различаются (например, вы используете window.innerWidth или new Date() внутри компонента), возникнет Hydration Mismatch Error.

Как избежать ошибок гидратации:

import { useState, useEffect } from 'react';

const MyComponent = () => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    // Этот код выполнится только в браузере после гидратации
    setIsClient(true);
  }, []);

  return (
    <div>
      {isClient ? 'Я в браузере!' : 'Я на сервере!'}
    </div>
  );
};

---

4. Методы в “чистом” React (без фреймворков)

Для реализации SSR в Node.js используются специальные методы из react-dom/server:

• renderToString: Генерирует HTML (синхронно).
• renderToPipeableStream (React 18): Позволяет отправлять HTML по частям (Streaming), что ускоряет загрузку.

5. SSR в современных фреймворках

Сегодня редко кто пишет SSR на чистом Node.js. Обычно используют:

• Next.js: Самый популярный фреймворк для SSR/SSG.
• Remix: Ориентирован на веб-стандарты и прогрессивное улучшение.

---

Резюме

1. SSR дает SEO и скорость первого отображения.
2. Hydration превращает статичный HTML в интерактивное React-приложение.
3. Mismatch — главная проблема SSR, решается через useEffect или проверку typeof window.

Практика

Попробуйте примеры в интерактивном редакторе: