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

[idlebteam]

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

[qcdeed]

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

[regexninja]

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

[roman2026]

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

[rbacker]

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

[qawsqaws]

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

[depechie]

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

[svelte88]

третий человек подряд про Date, и это реально топ-1. Добавлю что в Next 13+ на app router мисматч ещё прилетает на проверках window прямо в рендере, typeof window !== undefined в JSX даёт одну ветку на сервере и другую на клиенте. И localStorage оттуда же, читать его на первом рендере нельзя.

[Kutz]

@qawsqaws, вот расширения это самое подлое, локально не воспроизведёшь вообще никогда. Grammarly и автопереводчики втыкают свои спаны прямо в текстовые ноды, и React 18 на это спотыкается. suppressHydrationWarning на body частично гасит, но это пластырь, а не лечение. Проверять в инкогнито у пострадавших юзеров это дельный совет, плюсую.

[sergeyserov]

@idlebteam, стоп, белый экран это не сам по себе mismatch. React 18 mismatch обычно проглатывает с варнингом и доклеивает на клиенте, экран не белеет. Если у тебя именно белый экран, значит где-то throw в рендере на клиентских данных и нет error boundary который бы поймал. Цепляй Sentry или хотя бы window.onerror, лови стектрейс с прода. По форуму это гадание на кофейной гуще.