Пришел я как-то на подмогу на один проект. Небольшой интернет-магазин: вроде все как у всех — шапка, каталог, хитрые карточки товаров, корзина.

Как фронтендеру, мне всегда интересно подсмотреть внутренние решения коллег и узнать, как именно они реализуют те или иные фичи. Покопался в исходниках нашего магазинчика и заметил одну  особенность. Уж слишком много логики интерфейса было завязано на «волшебную» строку: "const isMobile = useDevice()"

Тип устройства определялся на бэкенде по его User-Agent, а дальше в коде везде — в шапке, главном меню, подменю, карточках товаров и мелких секциях — проскакивало условие if (isMobile).

В голове сразу появился вопрос, который тут же вырвался наружу (мне иногда прилетает за излишнее любопытство, но тут я не удержался): — Ребята, а почему нельзя использовать старый добрый CSS Media?

В ответ прилетело: — Тут слишком хитрый дизайн. На CSS Media улетит куча времени, а так все супербыстро и просто! Сверстали два варианта меню, по условию User-Agent отдали нужный HTML — и готово. Не надо плодить лишние обертки, ломать голову над тем, как перестроить блоки или поменять очередь элементов в потоке. Даже дизайнеров не пришлось просить что-то упростить. Все довольны!

Подход и правда кажется соблазнительным. Но у меня оставался еще один вопрос: — А для нашего проекта SEO вообще критично? — Да, очень критично, это основной канал продаж.

И вот тут мы приплыли. Оптимизация и скорость разработки — это здорово, но ребята сами того не ведая заложили под проект мину замедленного действия.

В следующей части детально разберем, почему «умный» серверный адаптив по User-Agent — это страшный сон для поисковых роботов, и как за такое решение можно схватить бан от Google и Яндекса.

А вы в своей практике часто видите разделение верстки на сервере? Поделитесь в комментариях.