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

Гидратация (Hydration) — это процесс оживления статичного HTML на клиенте

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

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

Этап 1: Сервер отправляет HTML

• На сервере (Next.js, Express) рендерится React приложение
• Отправляется статический HTML на клиент
• Пользователь видит контент очень быстро (хорошо для SEO и UX)

Этап 2: Браузер загружает JavaScript

• Браузер загружает JavaScript бандл
• Этот момент часто вызывает задержку (Time to Interactive)

Этап 3: Гидратация

• React/Vue запускается на клиенте
• Создает виртуальное дерево компонентов
• Сравнивает виртуальное дерево с существующим DOM
• Не перестраивает DOM, а просто подписывается на события и состояние

// Пример с Next.js
// next.config.js
module.exports = {
  // Со статической оптимизацией (SSG)
}

// app/page.tsx
export default function HomePage() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <h1>Welcome to my site</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Что происходит:

1. Next.js на сервере рендерит <h1>Welcome to my site</h1> и <p>Count: 0</p>
2. HTML отправляется в браузер
3. Пользователь видит текст сразу
4. JavaScript загружается и React начинает гидратацию
5. React "понимает", что это его HTML, и добавляет обработчики событий

Важное отличие от Client-Side Rendering (CSR)

// CSR - клиент всё рисует сам
// app.tsx
export default function App() {
  return <div id="root" />;
  // Пустой div! Содержимое появится только когда загрузится JS
}

// SSR + Hydration - сервер уже нарисовал
// На сервере React рендерит полный HTML
// На клиенте React гидратирует существующий HTML

Проблемы гидратации

1. Hydration Mismatch Когда сервер отрендерил одно, а клиент ожидает другое:

// ПРОБЛЕМА: Date/Time на сервере и клиенте разные
function Component() {
  return <div>{new Date().toISOString()}</div>;
  // На сервере: 2024-01-01T10:00:00Z
  // На клиенте: 2024-01-01T10:00:05Z
  // React выбросит ошибку!
}

// РЕШЕНИЕ:
function Component() {
  const [mounted, setMounted] = React.useState(false);
  
  React.useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) return <div>Loading...</div>;
  
  return <div>{new Date().toISOString()}</div>;
}

2. Случайные данные на сервере и клиенте

// ПЛОХО
function Component() {
  const randomColor = Math.random() > 0.5 ? 'red' : 'blue';
  return <div style={{ color: randomColor }}>Text</div>;
}

// ХОРОШО
function Component() {
  const [color, setColor] = React.useState('red');
  
  React.useEffect(() => {
    setColor(Math.random() > 0.5 ? 'red' : 'blue');
  }, []);
  
  return <div style={{ color }}>Text</div>;
}

Оптимизация гидратации

1. Progressive Hydration

• Гидратируй компоненты постепенно, а не всё сразу
• Prioritize above-the-fold контент

2. Partial Hydration

• Гидратируй только интерактивные части
• Оставляй статический контент как есть

import dynamic from 'next/dynamic';

const InteractiveButton = dynamic(
  () => import('./Button'),
  { ssr: false } // Не рендерить на сервере
);

export default function Page() {
  return (
    <div>
      <h1>Static content</h1>
      <InteractiveButton /> {/* Гидратируется только это */}
    </div>
  );
}

Реальные фреймворки

• Next.js: Автоматическая гидратация React компонентов
• SvelteKit: Похожий процесс с Svelte
• Astro: Selective hydration (только необходимые компоненты)
• Qwik: Resumability вместо гидратации (еще быстрее)

Итог

Гидратация — это мост между серверным рендерингом и клиентским интерактивностью. Она позволяет получить лучшее из обоих миров: быстрая доставка контента (SSR) и полная интерактивность (CSR).