Какие типичные ошибки гидрации бывают и как их избежать?

Что такое гидрация и почему возникают ошибки

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

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

• Использование случайных значений: например, Math.random() или Date.now() в рендере. Сервер и клиент получают разные значения, что вызывает несоответствие.
• Зависимость от браузерных API: доступ к window, document или localStorage во время рендеринга. На сервере этих объектов нет, поэтому код либо падает, либо возвращает другие данные.
• Разные версии библиотек: если сервер и клиент используют разные версии React или других зависимостей, разметка может отличаться.
• Игнорирование пробелов и переносов: незначительные различия в форматировании HTML могут привести к ошибке.

Как избежать ошибок

Основной принцип — сделать рендеринг детерминированным. Все данные, которые зависят от времени, случайности или окружения, должны вычисляться только на клиенте, например, внутри useEffect. Также можно использовать специальные библиотеки, такие как @react-hook/media-query или use-sync-external-store, для безопасной работы с браузерными API.

// Плохо: случайное значение в рендере
function Component() {
  return <div>{Math.random()}</div>;
}

// Хорошо: значение вычисляется после гидрации
function Component() {
  const [value, setValue] = React.useState(null);
  React.useEffect(() => {
    setValue(Math.random());
  }, []);
  return <div>{value}</div>;
}

Также важно проверять, что серверный и клиентский рендеринг используют одинаковые данные. Если вы передаете данные с сервера через window.__INITIAL_STATE__, убедитесь, что они сериализуются одинаково.

Вывод

Гидрация — мощный инструмент для улучшения производительности и SEO, но требует аккуратности. Избегайте недетерминированных значений в рендере, используйте эффекты для клиентских операций и следите за консистентностью данных. Это позволит избежать большинства ошибок и обеспечит стабильную работу приложения.