Настройка SSR (серверного рендеринга) Vue.js для 1С-Битрикс
SSR на Битриксе запрашивают редко — и обычно по одной причине: SEO для Vue-компонентов с динамическим контентом. Когда поисковый бот получает страницу каталога с Vue-фильтром, он видит пустой <div id="app"> вместо товаров. Традиционный Битрикс-шаблон рендерит HTML на сервере, Vue-компонент поверх него — нет. SSR решает эту проблему, но добавляет инфраструктурную сложность.
Архитектурные варианты
Гибридный рендеринг (наиболее практичный для Битрикс): критичный 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.
Vue SSR через @vue/server-renderer: рендеринг на Node.js, результат встраивается в Битрикс-шаблон. Сложная интеграция, высокие требования к инфраструктуре, редко применяется на практике.
Когда 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 для преrender:
location / {
if ($http_user_agent ~* "googlebot|bingbot|yandex") {
proxy_pass http://prerender-service:3000;
}
}
Технические требования и ограничения
SSR на Node.js требует: хостинг с поддержкой Node.js процессов (не shared хостинг), настройку процесс-менеджера (PM2), обратного прокси (Nginx → Node.js), мониторинга Node-сервиса.
Известные ограничения при SSR в Битрикс-контексте: Битриксовые JS-хелперы (BX, BX.ajax) недоступны на сервере (Node.js) — все API-обращения должны идти напрямую через fetch/axios, не через Битрикс SDK. Сессия пользователя передаётся через cookie, что требует настройки CORS между Node и PHP.
Типичный срок: настройка гибридного рендеринга (PHP + Vue гидратация) для существующего компонента — 2-4 дня. Развёртывание полноценного Nuxt SSR с Битриксом как headless backend — 3-6 недель с учётом инфраструктуры.