Почему SSR нужен для Битрикс с Vue?
Мы часто видим проекты, где Vue-компоненты каталога не индексируются поисковиками — бот получает пустой <div id="app">. В одном из последних кейсов клиент потерял 70% трафика из Яндекса, потому что 10 000 товаров не попадали в поиск. Это убивает SEO динамических страниц. Мы решаем эту проблему настройкой SSR под ключ: от гибридного рендеринга до полноценного Nuxt. Оценим ваш проект за 1 день, а типичная настройка занимает от 2 дней до 6 недель в зависимости от подхода. Опираемся на 5+ лет опыта и 150+ реализованных проектов на Битрикс. Гибридный рендеринг внедряется в 3–5 раз быстрее, чем Nuxt SSR, и не требует Node.js в production.
Архитектурные варианты: что выбрать?
| Подход | Серверный рендеринг | Инфраструктура | Сложность | Когда оправдан |
|---|---|---|---|---|
| Гибридный (PHP + гидратация) | PHP отдаёт HTML, Vue гидратирует | Не требует Node.js | Низкая | Vue добавляет интерактивность к контенту Битрикса |
| Nuxt.js как прослойка | Node.js рендерит Vue, проксирует данные через REST | Nuxt-сервер + PM2 | Высокая | Крупный Vue-frontend, headless Битрикс |
| Prerender | Статический HTML для ботов (headless Chrome) | Prerender-сервис | Средняя | Статичные страницы без персонализации |
Гибридный рендеринг — наиболее практичный для Битрикс. Критичный SEO-контент (список товаров, цены, характеристики) рендерится через PHP в template.php. Vue монтируется поверх существующего HTML и гидратирует его — добавляет интерактивность без перерисовки. Этот подход называется progressive hydration и не требует Node.js.
// template.php компонента каталога echo '<div id="catalog-vue" data-items="' . htmlspecialchars(json_encode($arResult['ITEMS'])) . '">'; foreach ($arResult['ITEMS'] as $item) { // Серверный рендер HTML для ботов и первой загрузки echo '<div class="catalog-item" data-id="' . $item['ID'] . '">' . $item['NAME'] . '</div>'; } echo '</div>'; Vue монтируется с app.mount('#catalog-vue') и добавляет интерактивность: быстрое добавление в корзину, переключение вида, сравнение.
Nuxt.js как прослойка: отдельный Nuxt-сервер (Node.js) рендерит Vue-приложение и проксирует данные из Битрикса через REST API. Битрикс становится headless CMS. Полноценный SSR, но фактически два отдельных приложения. Оправдан для крупных проектов с большим Vue-frontend. Например, интернет-магазин с каталогом на 100 000 товаров — Nuxt снижает время до первого контента (FCP) с 4 секунд до 0,8 секунды.
Когда SSR нужен, а когда нет?
SSR нужен, если Vue-компоненты генерируют контент, который должен индексироваться поисковиками — описания товаров из API, динамические списки, контент инфоблоков через AJAX.
SSR не нужен, если Vue используется только для интерактивных элементов (корзина, фильтры, формы) поверх уже отрендеренного Битрикс-контента — гибридный подход достаточен.
Как работает гидратация Vue на серверно-рендеренном HTML?
// Приложение использует данные из data-атрибутов, не делает AJAX при монтировании const mountEl = document.getElementById('catalog-vue'); const app = createApp(CatalogApp, { initialItems: JSON.parse(mountEl.dataset.items), }); app.mount(mountEl); Использование createSSRApp вместо createApp активирует режим гидратации — Vue не перерисовывает существующий DOM, а присваивает обработчики событий к уже существующим узлам. Условие: серверный HTML должен точно совпадать с тем, что Vue сгенерировал бы сам. Расхождения вызывают «гидратационные несоответствия» и перерисовку.
Prerender как альтернатива
Для страниц с относительно статичным контентом (landing-страницы, страницы категорий без персонализации) можно использовать prerender через prerender-spa-plugin или сторонний сервис (Prerender.io). Краулер (headless Chrome) обходит SPA, сохраняет HTML, отдаёт ботам. Не нужен Node.js в production.
Настройка Nginx для prerender:
location / { if ($http_user_agent ~* "googlebot|bingbot|yandex") { proxy_pass http://prerender-service:3000; } } Сравнение подходов по затратам и срокам
| Критерий | Гибридный | Nuxt SSR | Prerender |
|---|---|---|---|
| Время внедрения | 2–4 дня | 3–6 недель | 1–2 дня |
| Инфраструктура | только PHP | Node.js + PM2 | Chrome-сервис |
| SEO-индексация | полная | полная | частичная |
| Персонализация | поддерживается | поддерживается | нет |
| Сложность поддержки | низкая | высокая | средняя |
Что входит в настройку SSR под ключ?
- Аудит текущего Vue-компонента и SEO-требований.
- Выбор оптимального подхода (гибридный, Nuxt или prerender).
- Разработка решения с учётом инфраструктуры (хостинг, Node.js, прокси).
- Настройка гидратации и тестирование на расхождения.
- Документация процесса и обучение вашей команды.
- Гарантия работоспособности и поддержка после внедрения.
Технические требования для SSR
SSR на Node.js требует: хостинг с поддержкой Node.js процессов (не shared хостинг), настройку процесс-менеджера (PM2), обратного прокси (Nginx → Node.js), мониторинга Node-сервиса. Известные ограничения: Битриксовые JS-хелперы (BX, BX.ajax) недоступны на сервере (Node.js) — все API-обращения должны идти напрямую через fetch/axios. Сессия пользователя передаётся через cookie, что требует настройки CORS между Node и PHP.
Как мы оцениваем проект?
Мы анализируем структуру компонентов, объём данных и требования к SEO. Свяжитесь с нами — получите консультацию и предварительную оценку за 1 рабочий день. Пишите, расскажем детали. Закажите аудит текущего решения, и мы подберём оптимальный вариант SSR.
SSR хорошо описан в документации Vue.js и Wikipedia.