Налаштування 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-фронтендом.
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 для prerender:
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, а не через Bitrix SDK. Сесія користувача передається через cookie, що вимагає налаштування CORS між Node і PHP.
Типовий строк: налаштування гібридного рендерингу (PHP + Vue гідратація) для існуючого компонента — 2–4 дні. Розгортання повноцінного Nuxt SSR із Бітрікс як headless backend — 3–6 тижнів з урахуванням інфраструктури.