> Что такое гидрация в веб-разработке (JavaScript)

Короткий ответ

Гидрация (hydration) - это процесс, при котором серверный HTML, отрендеренный на сервере (SSR), становится интерактивным на клиенте. JavaScript-фреймворк (React, Vue, Svelte) "оживляет" статическую разметку: навешивает обработчики событий, инициализирует состояние компонентов и подключает реактивность. Без гидрации пользователь видит контент, но не может взаимодействовать с интерфейсом.

Подробное объяснение

Гидрация - ключевой этап в архитектуре Server-Side Rendering (SSR). Когда сервер отдаёт готовый HTML, браузер быстро показывает контент (First Paint), но страница ещё не "живая" - нет обработчиков кликов, не работает реактивность, состояние не синхронизировано.

Фреймворк загружает JavaScript-бандл, находит в DOM корневой элемент, создаёт виртуальное дерево компонентов и сопоставляет его с существующей разметкой. Вместо повторного рендеринга (как в CSR) он "прикрепляется" к уже существующим узлам: добавляет слушатели событий, инициализирует локальное состояние, подключает эффекты. Если структура HTML не совпадает с ожидаемой - возникает ошибка гидрации (hydration mismatch).

Гидрация происходит один раз при первой загрузке страницы. После этого приложение работает как обычное SPA: клиентский рендеринг, навигация без перезагрузки.

На практике

Гидрация используется в Next.js (React), Nuxt (Vue), SvelteKit, Angular Universal. Разработчику нужно:

• Обеспечить идентичность HTML на сервере и клиенте - любые расхождения (разные данные, случайные значения, Date.now()) вызывают ошибки.
• Избегать прямых манипуляций с DOM до завершения гидрации - фреймворк ожидает, что разметка не тронута.
• Использовать флаги вроде suppressHydrationWarning в React для намеренных расхождений (например, кастомные атрибуты аналитики).

Типичный сценарий: сервер отдаёт список товаров, клиент "оживляет" кнопки "Добавить в корзину". Без гидрации кнопки есть, но не работают.

Пример кода

JAVASCRIPT
// React - серверный рендеринг (Next.js)
function ProductPage({ product }) {
  const [count, setCount] = useState(0);
  
  // Этот компонент рендерится на сервере как статический HTML
  // После загрузки JS - гидрация: useState и onClick становятся активными
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Цена: {product.price}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Куплено: {count}
      </button>
    </div>
  );
}

// На клиенте React делает hydrateRoot вместо createRoot
import { hydrateRoot } from 'react-dom/client';
const root = hydrateRoot(document.getElementById('root'), <App />);

Как отвечать на собеседовании

Начни с определения: "гидрация - это оживление серверного HTML на клиенте". Объясни, зачем она нужна: быстрый First Paint + интерактивность. Упомяни, что работает в SSR-фреймворках. Приведи простой пример: кнопка, которая не кликается до загрузки JS. Если спросят про ошибки - скажи про hydration mismatch из-за несовпадения данных. Не углубляйся в детали реализации виртуального DOM, если не спрашивают.

Что проверяет интервьюер

• Понимание разницы между CSR, SSR и гидрацией.
• Знание, что гидрация - одноразовый процесс, а не постоянный.
• Осведомлённость о типичных проблемах (mismatch, race conditions).
• Умение объяснить, почему SSR без гидрации бесполезен для интерактивных элементов.

Типичные ошибки

• Путать гидрацию с ререндерингом (re-render) - это разные процессы.
• Думать, что гидрация происходит при каждой навигации - нет, только при первой загрузке.
• Игнорировать hydration mismatch - это частая причина багов в продакшене.
• Считать, что гидрация нужна только React - она есть во всех современных SSR-фреймворках.