Представьте ситуацию.
Вы открываете сайт.
Он появляется мгновенно ⚡️
Кнопки видны.
Текст на месте.
Красота.
Но потом происходит что-то странное.
😐 Кнопка не нажимается.
😐 Меню не открывается.
😐 Счётчик показывает одно значение, а через секунду другое.
😐 В консоли появляется загадочная ошибка про mismatch.
Если вы работаете с React, Vue, Nuxt или Next.js, скорее всего виновата hydration.
🚀 Hydration — это процесс, когда JavaScript «оживляет» HTML, который уже пришёл с сервера.
Сервер заранее отправляет готовую страницу.
Браузер её показывает пользователю.
А потом подключается JavaScript и делает страницу интерактивной.
До hydration сайт выглядит живым.
После hydration сайт становится живым на самом деле.
Именно поэтому первые секунды иногда выглядят немного магическими.
🤔 А где начинаются проблемы?
Представим такой код:
На сервере время было:
10:00:01
На клиенте уже:
10:00:02
Сервер нарисовал один текст.
Браузер посчитал другой.
И вот уже React или Vue говорят:
🚨 «Эй, то что пришло с сервера не совпадает с тем, что получилось у клиента».
Начинаются предупреждения и странное поведение.
Чаще всего hydration ломают:
✅ случайные числа через Math.random()
✅ текущая дата и время
✅ данные из localStorage
✅ разный код для сервера и браузера
✅ запросы, которые возвращают разные данные
💡 Самое забавное, что визуально сайт может выглядеть идеально.
Но внутри уже происходит маленькая война между сервером и браузером.
Поэтому опытные фронтендеры очень внимательно относятся к SSR и hydration.
Потому что ошибка может появляться только у части пользователей.
Только иногда.
Только в продакшене.
И именно такие баги обычно сильнее всего любят портить нервы 😅
🔥 Если совсем упростить:
SSR рисует страницу.
Hydration делает её интерактивной.
А если сервер и браузер увидели мир по-разному — начинаются странности.
💬 А кто уже ловил hydration mismatch в React, Vue или Nuxt? Сколько часов ушло на поиск причины? 😄