Гидратация страницы seo

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

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

Гидратация не создаёт исходный контент с нуля. Если сервер вернул пустую оболочку, это клиентский рендеринг. Если сервер вернул содержимое, но первая клиентская отрисовка отличается, возникает ошибка согласования разметки.

Почему возникают ошибки

Сервер и браузер должны построить одинаковое начальное дерево. Расхождения появляются из-за случайных значений, текущего времени, обращения к браузерным API во время рендера, разных данных или неверной структуры HTML.

function Clock() {
  const [time, setTime] = useState('');
  useEffect(() => setTime(new Date().toLocaleTimeString()), []);
  return <time>{time}</time>;
}

В этом примере сервер и первая клиентская отрисовка выводят пустое значение. Актуальное время появляется после гидратации, поэтому исходная разметка совпадает.

Как гидратация влияет на SEO

Поисковому роботу важен содержательный HTML: заголовок, основной текст, ссылки и метаданные. Ошибка гидратации может сломать интерактивность или заменить часть DOM, но сама по себе не равна пустому серверному ответу.

Проверяйте исходный HTML отдельно от DOM после выполнения JavaScript. Так можно отличить проблему клиентского рендеринга от настоящего несовпадения при гидратации.

Практическая диагностика

Сначала найдите предупреждение в консоли и компонент, на котором расходится дерево. Затем сравните входные данные, уберите недетерминированные вычисления из рендера и перенесите работу с window, document и localStorage в клиентский эффект.

После исправления проверьте страницу без JavaScript, с JavaScript и при прямом открытии URL. В обоих режимах основное содержимое и ссылки должны оставаться доступными.