...но из-за ошибки гидратации бармен отдаёт им три пустых стакана.

Бывало у вас такое: приходите в проект «просто гостем» сделать копеечную фичу, а уходите с дёргающимся глазом и распутанным клубком чужих гениальных идей? Вот и я недавно заглянул на один Nuxt-проект.

Суть простая: обычный сайт-каталог с карточками. Готовлю задачу, запускаю локалку и замечаю странное — при первой загрузке каталог на долю секунды неприятно прыгает, отвлекая на себя внимание. Мой внутренний параноик нашептал: «Тебе не кажется, карточки до и после скачка — разные».

Потратил пять минут на дебаг SSR — и точно! Сервер отдавал один контент, а клиент после гидратации натягивал совершенно другой, делая вид, что так и надо. Уточняю у лидов: «Ребята, это какой-то хитрый бизнес-план или баг?» Лиды пожали плечами: «Плана не было, но раз ты заметил — копай».

🕵️‍♂️ Архитектурный детектив

Виновник обнаружился быстро. Как выяснилось, незадолго до меня здесь пробегал другой разработчик с благородной и очень срочной миссией — починить SEO (мета-теги, тайтлы и вот это всё).

Цепочка запросов на проекте была построена через... специфическое место, из-за чего SEO-данные просто не успевали прийти вовремя. В SSR улетали дефолтные заглушки, будто бэкенд ушёл в отпуск. На клиенте-то всё долетало и обновлялось, но поисковым роботам, ради которых SEO и затевалось, доставался пустой фантик.

Предыдущий коллега решил проблему радикально и просто: «Если запрос не успевает, мы сделаем его главным!»

Он не долго думая перенёс логику в мидлвару. А чтобы прокинуть данные на страницу, записал их в глобальный стор (в который на этом проекте, к слову, складывали вообще всё — от корзины до смысла жизни).

Логика получилась «надежная», как швейцарские часы: 1. Чтобы собрать красивое SEO для каталога, нужны категории. 2. Чтобы получить категории, мидлвара честно дёргает сам каталог. 3. Внутри мидлвары данные каталога сохраняются в стор, теги генерируются, менеджер счастлив, SEO спасено!

А теперь следите за руками. Данные каталога в стор-то упали, но на самой странице их никто не проверял. А зачем? Там же исторически остался жить свой, независимый и гордый запрос за каталогом! Да и в таске было написано «починить SEO», а про каталог никто ничего не говорил.

❌ Фиксить нельзя в прод

В итоге получился классический фронтенд-круговорот: - Мидлвара на сервере делает запрос, получает каталог «А», пишет его в стор и отдаёт SSR. - Клиент ловит страницу, радостно рендерит каталог «А». - В ту же миллисекунду триггерится запрос на самой странице, с бэка прилетает каталог «Б», стор перезаписывается, экран моргает, глаз дергается.

Мораль: Решая локальную таску в стиле «самый быстрый фиксик на Диком Западе», не забывайте смотреть на соседние шестерёнки. Иначе ваш элегантный костыль превратится в ночной кошмар для случайного «гостя».

Признавайтесь в комментариях: честно проверяете соседние модули при фиксе или «моя фича работает, остальное — проблемы следующего дежурного»? 👇