Гидрация и её ошибки
Вопрос
Что такое гидрация, почему возникают ошибки гидрации и как их исправлять?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Гидрация связывает серверный HTML с React-деревом и навешивает обработчики
До окончания гидрации страница видна, но не интерактивна
Mismatch: первый клиентский рендер отличается от серверного HTML
Причины: время, случайность, window и localStorage в рендере, часовые пояса, невалидная вложенность тегов, расширения браузера
Решения: клиентские значения в useEffect после монтирования, useId, suppressHydrationWarning точечно, dynamic без SSR
Что могут спросить следом
- Чем опасен suppressHydrationWarning?
- Как сократить время до интерактивности?
Разбор
После SSR в браузере есть готовый HTML, но кнопки не работают. Гидрация это когда React загружает код компонентов, строит дерево и сопоставляет его с существующим DOM, подключая обработчики. Если первый рендер на клиенте даёт другой результат, получаем ошибку гидрации: React предупреждает и может перерисовать часть дерева на клиенте, теряя выгоду SSR. Частые причины: Date.now и Math.random в рендере, чтение window или localStorage, разный часовой пояс на сервере и у пользователя, div внутри p, расширения браузера. Лечу так: всё, что зависит от клиента, вычисляю в useEffect после монтирования, для id использую useId, для времени фиксирую часовой пояс или форматирую на клиенте. suppressHydrationWarning ставлю только на конкретный элемент с ожидаемой разницей, например на время.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.