Гидратация

Гидратация — это процесс, при котором JavaScript-приложение на клиенте «подключается» к уже сгенерированному сервером HTML, добавляя интерактивность без пересоздания разметки.

Что происходит при SSR (Server-Side Rendering)?

Сервер на NodeJS получает запрос, запрашивает данные (например, список задач из базы), генерирует полный HTML и отправляет его браузеру:

<!DOCTYPE html>
<html>
  <body>
    <div id="root">
      <h1>Задачи</h1>
      <ul>
        <li>Почитать</li>
        <li>Написать код</li>
      </ul>
    </div>
    <script src="/app.js"></script>
  </body>
</html>

Браузер мгновенно отображает этот HTML — пользователь видит контент сразу.
Это хорошо для скорости и SEO.

Но пока ничего не работает:
— Кнопки не реагируют
— Нельзя добавить задачу
— Нет обработчиков событий

Почему? Потому что HTML — это статичный результат. Он не знает, что должен быть интерактивным.

Что делает гидратация?

Когда загружается и выполняется JavaScript-файл (app.js), фреймворк (например, React, Vue) анализирует уже существующий HTML, сравнивает его с тем, что он ожидает сгенерировать, и привязывает события, состояния и логику к уже отрисованным элементам.

Это не перерисовка. Это присоединение поведения к существующей разметке.

Пример (упрощённо):

// В React
ReactDOM.hydrate(<App />, document.getElementById('root'));

— React видит: «В DOM уже есть <ul><li>Почитать</li></ul>»
— Он проверяет: «А должен ли я сгенерировать именно это?» — да
— Он не удаляет элементы
— Он добавляет обработчики кликов, состояния, эффекты — к тем же DOM-узлам

Результат:
— Пользователь видит контент сразу
— Через долю секунды — кнопки становятся кликабельными
— Приложение работает как обычное SPA

Зачем это нужно?

Без гидратации С гидратацией
Пользователь видит HTML, но ничего не работает Пользователь видит HTML — и сразу может с ним взаимодействовать
Приложение «прыгает»: сначала статика, потом всё перерисовывается Нет перерисовки — разметка сохраняется, только добавляется логика
SEO работает, но UX плохой SEO работает + UX быстрый и плавный

Когда гидратация не нужна?

  • В CSR — сервер отдаёт пустой index.html. Разметка создаётся полностью JS — нет HTML для «подключения», поэтому гидратация не применяется.
  • В статическом вебе (WEB 1.0) — вообще нет JavaScript. Нет интерактивности — нет и гидратации.

Важные ограничения

  • Гидратация требует, чтобы HTML, сгенерированный на сервере, точно совпадал с тем, что сгенерирует клиент.
    Если сервер отдал <li>Почитать</li>, а React ожидает <li data-id="1">Почитать</li> — будет ошибка.

  • Если в разметке есть динамические данные (например, время, токены, пользовательские данные), они должны быть одинаковыми на сервере и клиенте.

  • Гидратация — не бесплатна: JS-файл должен загрузиться и выполниться. Если он тяжёлый — интерактивность появится с задержкой.

Пример в реальном приложении

Вы заходите на сайт новостей:

  1. Сервер (NodeJS + Next.js) получает запрос
  2. Запрашивает статьи из БД
  3. Генерирует HTML с заголовками, текстами, картинками
  4. Отдаёт браузеру: 
    <article><h1>Новость</h1><p>Текст...</p></article>
<script src="/_next/.../page.js"></script>
  5. Браузер отображает статью мгновенно
  6. page.js загружается — React запускает hydrate()
  7. Клик по кнопке «Лайк» — работает, потому что React привязал обработчик к этому элементу

→ Пользователь не видит «прыжков», не ждёт загрузки JS, чтобы увидеть контент — и при этом может взаимодействовать с приложением.

Это стандарт для современных фреймворков: Next.js, Nuxt.js, SvelteKit.
В NodeJS-приложениях гидратация — не опциональная фича, а ключевой механизм для создания быстрых, SEO-оптимизированных веб-приложений. Тем не менее, в основном в течении курса мы будет создавать только CSR-SPA приложения.