Client Hints vs классический User-Agent: Архитектура, миграция и влияние на SEO

Если браузер видит Critical-CH и понимает, что не передал требуемый заголовок в первом запросе, он забраковывает полученный ответ и незамедлительно делает повторный запрос, уже с прикрепленным Sec-CH-UA-Model.

/**
 * Универсальная функция определения типа устройства с каскадным фоллбэком
 */
function detectDeviceContext() {
  // 1. Проверяем UA-CH (для Chrome, Яндекс Браузера, Edge)
  if (navigator.userAgentData) {
    return {
      isMobile: navigator.userAgentData.mobile,
      platform: navigator.userAgentData.platform,
      source: 'UA-CH'
    };
  }

  // 2. Фоллбэк на Feature Detection (CSS Media Queries & Touch API)
  const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  const isMobileScreen = window.matchMedia('(max-width: 768px)').matches;

  if (hasTouch && isMobileScreen) {
    return { isMobile: true, platform: 'Unknown Mobile', source: 'Feature Detection' };
  }

  // 3. Крайний фоллбэк на замороженный User-Agent (Safari, Firefox)
  const legacyUA = navigator.userAgent || '';
  const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(legacyUA);

  return {
    isMobile: isMobileUA,
    platform: parseLegacyPlatform(legacyUA),
    source: 'Legacy UA Parsing'
  };
}

function parseLegacyPlatform(ua) {
  if (ua.includes('iPhone') || ua.includes('iPad')) return 'iOS';
  if (ua.includes('Android')) return 'Android';
  if (ua.includes('Windows')) return 'Windows';
  if (ua.includes('Macintosh')) return 'macOS';
  return 'Desktop';
}

Влияние на SEO, Яндекс Индексацию, Детекцию ботов и SSR

Поисковые боты: Googlebot и Yandexbot

Поисковые роботы обязаны точно идентифицировать себя перед веб-серверами, чтобы получать корректные версии страниц.

• Googlebot: Полностью поддерживает UA-CH. При сканировании краулер Google отправляет как замороженную строку User-Agent, так и соответствующие заголовки Sec-CH-UA ("Googlebot";v="2.1").

• Яндекс.Бот (Yandexbot): Индексирующий робот Яндекса ориентируется в первую очередь на классическую строку User-Agent, однако сервисы Яндекса полностью готовят инфраструктуру к обработке Client Hints.

⚠️ Важно: Сервер должен отдавать абсолютно идентичный HTML-код как при проверке через традиционный UA, так и при разборе Sec-CH-UA. Рассогласование отдачи текста ботам может быть расценено алгоритмами Яндекса и Google как клоакинг.

SSR в Next.js / Nuxt.js: Избегаем Hydration Mismatch

Одна из самых частых ошибок фронтенд-разработчиков при переходе на Client Hints — возникновение ошибки Hydration Mismatch при рендеринге на стороне сервера.

Error: Text content does not match server-rendered HTML.
Server: "Desktop Layout"
Client: "Mobile Layout"

Правильное решение на Node.js / Next.js:

// app/page.tsx (Next.js App Router)
import { headers } from 'next/headers';

export default async function HomePage() {
  const headersList = await headers();
  
  // Извлекаем низкоэнтропийный заголовок на сервере
  const secChUaMobile = headersList.get('sec-ch-ua-mobile');
  
  // Если заголовок отсутствует (например, Safari), используем фоллбэк по User-Agent
  const userAgent = headersList.get('user-agent') || '';
  
  const isMobile = secChUaMobile 
    ? secChUaMobile === '?1'
    : /Mobile|Android|iPhone/i.test(userAgent);

  return (
    <main>
      {isMobile ? <MobileVersion /> : <DesktopVersion />}
    </main>
  );
}

Альтернативное мнение

Есть и те, кто критикует стандарт Client Hints за усложнение стека. По их мнению замена одной строки User-Agent на комбинацию из 8 разных HTTP-заголовков увеличивает объём сетевых оверхедов и создает путаницу из-за частичного отсутствия поддержки в Safari и Firefox. Так, решение задач адаптивности полностью должно переноситься на CSS Media Queries и Feature Detection, исключая серверное определение параметров устройств.

Нетривиальный факт

Интересный нюанс спецификации RFC 8941 заключается в том, что все булевы значения в Client Hints передаются со знаком вопроса: ?1 означает true, а ?0 означает false. Это сделано для того, чтобы HTTP-парсеры могли отличать численные типы данных от булевых флагов на этапе лексического анализа без привлечения схемы валидации.