Что такое а (hydration) в React/Next.js?

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

Гидратация (hydration) — это ключевой механизм в React и Next.js, который связывает серверный рендеринг (SSR) с клиентским рендерингом. Когда сервер отправляет HTML-разметку, она уже содержит весь контент, но не является интерактивной. Гидратация — это процесс, при котором React «оживляет» эту статичную разметку, привязывая к ней виртуальное дерево компонентов, состояние и обработчики событий.

Как это работает?

В Next.js при первом запросе сервер генерирует HTML и отправляет его клиенту. Браузер мгновенно отображает контент, что улучшает SEO и время до первого байта. Затем загружается JavaScript-бандл, и React выполняет гидратацию: он сопоставляет существующий DOM с виртуальным деревом и добавляет интерактивность. Если разметка совпадает, React не перерисовывает страницу, а только подключает слушатели событий.

// Пример: компонент с useState
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// Сервер рендерит HTML: <button>0</button>
// После гидратации React добавляет onClick и состояние

Почему это важно?

Гидратация позволяет совместить преимущества SSR (быстрый первый отклик, SEO) и SPA (интерактивность, плавные переходы). Без неё страница была бы статичной, а с ней — полноценным приложением. В Next.js гидратация автоматическая, но важно избегать расхождений между серверным и клиентским рендерингом, иначе React может выдать предупреждения.

Вывод

Гидратация — это мост между серверным и клиентским рендерингом. Она необходима для создания быстрых и интерактивных приложений на Next.js. Понимание этого процесса помогает избегать ошибок при работе с SSR и оптимизировать производительность.