Что такое гидрация: две версии одной страницы
При серверном рендеринге страница собирается в два этапа. Сначала Nuxt генерирует готовый HTML на сервере и отправляет его браузеру — благодаря этому контент виден почти мгновенно, а поисковые роботы получают полноценный текст без ожидания выполнения JavaScript. Затем браузер догружает JS-бандл, и Vue «оживляет» разметку: навешивает обработчики кликов, подключает реактивность, запускает компоненты. Этот процесс и называется гидрацией. Всё работает гладко, пока виртуальное дерево, которое Vue строит в браузере, побайтово совпадает с HTML, присланным сервером.
Hydration mismatch: когда сервер и браузер нарисовали разное
Если клиентский рендер отличается от серверного HTML хотя бы в одном узле, Vue фиксирует hydration mismatch. В dev-режиме в консоли появится подробное предупреждение с описанием расхождения, а в продакшене фреймворк молча выбрасывает «неправильный» фрагмент DOM и перерисовывает его с нуля — пользователь видит то самое мигание и скачок контента. Хуже того, страница фактически рендерится дважды: это лишняя нагрузка на главный поток браузера, из-за которой растёт INP (задержка отклика на действия) и время до полной интерактивности.
Типичные причины: чек-лист для проверки
Подавляющее большинство mismatch-ошибок вызывают несколько повторяющихся сценариев. Проверьте свой проект на них в первую очередь:
- Недетерминированные значения в шаблоне — Date.now(), Math.random(), счётчики и ID, сгенерированные прямо при рендере. Сервер и браузер неизбежно получат разные числа.
- Форматирование дат и времени — сервер живёт в UTC, браузер пользователя — в его часовом поясе, и одна и та же дата отображается по-разному.
- Чтение browser-only API — обращение к window, localStorage, document или cookies в момент рендера: на сервере их нет, на клиенте они уже появились.
- Двойная загрузка данных — сервер получил из API одну версию (например, остатки на складе), а клиент перезапросил и отрисовал другую.
- Невалидная вложенность HTML — div внутри p или лишние элементы в table. Браузер «чинит» такую разметку, и итоговый DOM отличается от того, что отправил сервер.
- Расширения браузера — переводчики и блокировщики рекламы меняют DOM на лету. Если ошибка видна только у вас, проверьте страницу в режиме инкогнито.
UX: почему мигание стоит конверсий
Скачки контента измеряются метрикой CLS (Cumulative Layout Shift). По нормативам Google хороший результат — до 0,1; всё, что выше 0,25, считается плохим и подсвечивается в PageSpeed Insights. Практические последствия ощутимы: пользователь целится в кнопку, которая внезапно уезжает вниз, и промахивается; теряется позиция чтения на длинных лендингах; на мобильных экранах сдвиги заметнее всего.
SEO: что видит поисковый робот
Хорошая новость: Google индексирует именно серверный HTML, поэтому сам по себе SSR — ваш союзник. Но есть нюансы. Во-первых, если гидрация подменяет значительную часть контента, робот при рендеринге может зафиксировать «вторую» версию страницы — и текст в индексе плавает от обхода к обходу. Во-вторых, CLS входит в сигналы page experience, влияющие на ранжирование в конкурентных нишах. В-третьих, двойной рендеринг замедляет интерактивность, а это зона INP. Яндекс также исполняет JavaScript, но делает это менее стабильно — чем меньше страница зависит от клиентского JS, тем надёжнее её индексация в Runet.
Диагностика за 15 минут
Гадать не нужно — источник проблемы легко локализовать:
- Откройте dev-версию сайта в инкогнито (без расширений) и консоль браузера (F12). Vue 3 и Nuxt пишут подробные hydration-предупреждения с указанием компонента и характера расхождения.
- Сравните исходный HTML (Ctrl+U) с итоговым DOM во вкладке Elements — расхождения сразу бросаются в глаза.
- Прогоните страницу через PageSpeed Insights и посмотрите на CLS: значения выше 0,1 — повод разбираться.
- Загляните в Search Console в отчёт Core Web Vitals — там реальные данные от пользователей, а не лабораторные замеры.
- Отключите JavaScript и перезагрузите страницу: то, что останется, — серверная версия, с которой и должна совпадать гидрация.
Как чинить: инструменты Nuxt и Vue
В большинстве случаев хватает встроенных механизмов фреймворка — главное знать, куда смотреть:
- <ClientOnly> — оборачивайте компоненты, которые принципиально зависят от браузера (карты, корзина из localStorage, «текущее время»). Nuxt позволяет задать заглушку через слот #fallback, чтобы не было пустоты.
- useId() — генерируйте стабильные ID, одинаковые на сервере и клиенте (доступно в Nuxt 3.10+ и Vue 3.5).
- data-allow-mismatch — атрибут из Vue 3.5 для точечного «легального» расхождения, например когда серверное и клиентское время объективно различаются.
- useAsyncData и useFetch с одинаковыми ключами — Nuxt передаёт данные с сервера в payload, и клиенту не нужно запрашивать их повторно. Не создавайте разные ключи для одних и тех же данных.
- Перенос недетерминированной логики в onMounted — таймеры, случайные значения и размеры окна инициализируйте только после гидрации.
- Валидная разметка — прогоните HTML через валидатор W3C: невалидная вложенность ломает гидрацию незаметно.
Hydration mismatch — не «косметика», а прямой удар по пользовательскому опыту и конверсии: страница мигает, сдвигается и отвечает медленнее, а поисковые системы фиксируют нестабильность через CLS и INP. Хорошая новость в том, что в Nuxt и Vue проблема решается предсказуемо: детерминированный рендер на сервере и клиенте, ClientOnly для браузерных виджетов, стабильные ID и данные из payload вместо повторных запросов. Если ваш сайт мигает после загрузки — начните с консоли браузера и PageSpeed Insights и пройдитесь по чек-листу выше. А если нужна помощь со стороны — закажите технический аудит фронтенда: в большинстве проектов такие ошибки находятся и исправляются за несколько дней.