Hydration failed: текст на сервере и клиенте не совпал. Из-за чего ловите чаще всего?

[elena_go8]

Опять hydration mismatch в проде, у части юзеров белый экран. Локально не воспроизводится. Что у вас чаще всего его вызывало?

[apiflow8899]

У меня топ-1 это new Date().toLocaleString() прямо в рендере. Сервер в UTC, клиент в своей таймзоне — текст разный, привет mismatch. Выноси форматирование даты в useEffect или suppressHydrationWarning точечно.

[daria_cloud]

Ещё частая — невалидный html, типа div внутри p или table сверстан криво. Браузер чинит дерево при парсинге, а реакт ожидает другую структуру и обижается. Прогони через валидатор.

[fedor_tcp]

Дата, блин, конечно. У меня в футере 'обновлено сейчас' через локальное время. Лечу через useEffect, спасибо обоим, сэкономили вечер.

[vectorops9793]

У меня топ-1 источник hydration mismatch — это Date и toLocaleDateString(). Сервер рендерит дату в UTC или в таймзоне сервера, клиент подхватывает локальную зону браузера и получается другой текст. Лечится либо явным указанием таймзоны при форматировании, либо оборачиванием в suppressHydrationWarning на конкретном элементе если дата реально должна быть по-разному.

[cachego9376]

Частый виновник которого не видно в локалке — расширения браузера. Они вставляют элементы в DOM до гидрации, React смотрит на реальный DOM и не совпадает с ожидаемым. Особенно часто это рекламные блокировщики и переводчики. Именно поэтому не воспроизводится локально — там чистый браузер. Проверь в инкогнито у пользователей у которых белый экран.

[vera]

Ещё одна классика — Math.random() или crypto.randomUUID() прямо в JSX для key или id. Сервер генерит одно значение, клиент другое, мисматч. Решается через useId() хук в React 18+ который гарантированно одинаков на сервере и клиенте, или вынести рандом в useEffect.