Налаштування SSR серверного рендерингу Vue.js для 1С-Бітрікс
Чому SSR потрібен для Бітрікс з Vue?
Ми часто бачимо проєкти, де Vue-компоненти каталогу не індексуються пошуковиками — бот отримує порожній <div id="app">. В одному з останніх кейсів клієнт втратив 70% трафіку з Яндекса, тому що 10 000 товарів не потрапляли в пошук. Це вбиває SEO динамічних сторінок. Ми вирішуємо цю проблему налаштуванням SSR під ключ: від гібридного рендерингу до повноцінного Nuxt. Оцінимо ваш проєкт за 1 день, а типове налаштування займає від 2 днів до 6 тижнів залежно від підходу. Спираємося на 10+ років досвіду та 40+ реалізованих проєктів на Бітрікс. Гібридний рендеринг впроваджується в 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.