🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Почему гидрация React ломается при разном HTML на сервере и в браузере
При серверном рендеринге React отдаёт готовый HTML. Затем браузер гидрирует его: связывает DOM-узлы с компонентами. В этот момент React ожидает ту же структуру, что сформировал сервер, а не ищет и исправляет различия.
Поэтому проверка typeof window внутри рендера опасна. Если на сервере компонент возвращает null, а в браузере сразу добавляет навигацию, структуры HTML расходятся. Иногда React справляется, но гидрация оптимизирована ради скорости, и элементы могут оказаться не на своих местах.
Если интерфейс верен в разработке, но ломается после сборки, а React DevTools показывает правильное дерево, разбор Джоша У. Комо поможет сверить первый клиентский рендер с готовым HTML и проверить структуру DOM.