Розробка фронтенду на Nuxt.js для 1С-Бітрікс

Чому варто обрати headless-архітектуру для Бітрікс?

Ми часто стикаємося з ситуацією: каталог на стандартному шаблоні Бітрікс вантажиться 5–7 секунд, LCP зашкалює, а SEO-трафік падає через Core Web Vitals. Клієнти скаржаться на повільність, а правки в шаблон — біль. Вихід — headless-архітектура: Бітрікс залишається бекендом, а фронтенд пишеться на Nuxt.js. Це реальний спосіб отримати LCP < 1.8 сек та повну індексацію без переписування бізнес-логіки. Економія на хостингу при переході може сягати 20 000 ₴ на місяць, а вартість розробки нових модулів знижується на 30% (економія 50 000 ₴ на модуль). Ми — команда з 5+ років досвіду в розробці Nuxt.js та Бітрікс, реалізували понад 20 headless-проектів. На одному з проектів клієнт зекономив 1,5 млн ₴ на розробці за перший рік. Замовте консультацію та отримайте план міграції.

Переваги headless Бітрікс з Nuxt

Класичний шаблон Бітрікс — це моноліт: PHP-рендеринг, склейка HTML, загальний TTFB > 1 сек. Nuxt.js (Vue 3 з SSR) дає гібридний рендеринг: статичні сторінки (SSG), динамічні через SSR, а для каталогу — SWR-кеш. Підсумок: TTFB падає до 180–250 мс, LCP — до 1.8 сек. SSR на Nuxt швидший у 4 рази за стандартний PHP-рендеринг. Наші проекти показують приріст конверсії на 20–30% після переходу. Економія на хостингу може досягати 100 000 ₴ на рік.

Як впливає headless на швидкість завантаження?

При використанні vue js 1c-bitrix, Nuxt.js виконує tree-shaking та lazy loading компонентів, що додатково зменшує розмір бандлу на 30%. Крім того, уникнення hydration mismatch при SSR прискорює інтерактивність.

Прискорення розробки інтерфейсів Бітрікс у 2 рази

Nuxt позбавляє від рутини роботи з шаблонами Бітрікс. Компонентний підхід Vue 3 + Pinia для стейту + файлова маршрутизація — розробка нового розділу йде на 40% швидше. Ось наша типова реалізація.

Архітектура Nuxt-додатку для Бітрікс (nuxt 3 bitrix, nuxt.js bitrix, vue js 1c-bitrix)

Nuxt 3 використовує Vue Composition API та власну систему кешування (useAsyncData, useFetch). Роутинг — файлова система, аналогічно Next.js. SSR, SSG, ISR (називається hybrid rendering в Nuxt) — всі режими доступні. Гібридний рендеринг nuxt bitrix дозволяє комбінувати SSG для статики та SSR/ISR для динаміки.

// pages/catalog/[slug].vue <script setup lang="ts"> const route = useRoute(); const { data: category } = await useFetch( `/api/catalog/category/${route.params.slug}`, { key: `category-${route.params.slug}`, server: true, lazy: false, } ); const { data: products } = await useFetch('/api/catalog/products', { query: { section: route.params.slug, limit: 24 }, key: `products-${route.params.slug}`, server: true, }); useHead({ title: category.value?.name, meta: [ { name: 'description', content: category.value?.description }, { property: 'og:title', content: category.value?.name }, { property: 'og:description', content: category.value?.description }, ], }); </script> 

useFetch в Nuxt 3 автоматично дедуплікує запити — один і той же виклик на сервері при SSR не повторюється на клієнті при гідратації.

Серверні маршрути як проксі до Бітрікс (nuxt проксі bitrix, bitrix headless архітектура)

Nuxt 3 має вбудований H3-сервер з серверними маршрутами (server/api/). Це створює проксі-шар прямо в Nuxt без окремого бекенд-сервісу. Токени Бітрікс не потрапляють у браузер, CORS не проблема. Ми використовуємо цю схему в 90% проектів. Така nuxt проксі bitrix архітектура забезпечує ізоляцію.

// server/api/catalog/products.get.ts export default defineEventHandler(async (event) => { const query = getQuery(event); const response = await $fetch( `${process.env.BITRIX_URL}/local/ajax/api.php`, { method: 'POST', body: { action: 'catalog.products.list', ...query, }, headers: { 'X-Bitrix-Token': process.env.BITRIX_API_TOKEN, }, } ); return { items: response.data.map(normalizeProduct), total: response.total, }; }); 

Управління станом через Pinia (pinia bitrix)

// stores/cart.ts export const useCartStore = defineStore('cart', () => { const items = ref<CartItem[]>([]); const isLoading = ref(false); async function addToCart(productId: number, quantity: number) { isLoading.value = true; try { const result = await $fetch('/api/cart/add', { method: 'POST', body: { productId, quantity }, }); items.value = result.items; } finally { isLoading.value = false; } } const total = computed(() => items.value.reduce((sum, item) => sum + item.price * item.quantity, 0) ); return { items, isLoading, total, addToCart }; }); 

Pinia — офіційний стейт-менеджер Vue 3, простіший за Redux, інтегрується з Vue DevTools, підтримує SSR. Інтеграція pinia bitrix дає реактивне управління кошиком.

Кейс з практики: будівельний портал

Один з наших клієнтів — великий портал будівельних послуг з 12 000 компаній, рейтингами та тендерним модулем. Бітрікс використовувався для управління контентом. Ми запропонували headless-архітектуру з Nuxt 3. Основна складність: SEO для сторінок підрядників при частих оновленнях. SSG неможливий, SSR з кешем — оптимально.

Реалізація:

1. Nuxt 3 з hybrid rendering: сторінки підрядників — SSR + Redis-кеш (5 хвилин), статичні сторінки — SSG.
2. Серверні маршрути Nuxt: проксі до REST API Бітрікс з кешем useStorage('redis').
3. Пошук підрядників — Vue-компонент з instant search через Typesense. Бітрікс при оновленні тригерить webhook → Node.js-сервіс оновлює Typesense.
4. Тендерний модуль — SPA всередині Nuxt: подача заявок, авторизація через JWT.

Проект зданий за 5 місяців, клієнт продовжує співпрацю. Економія на хостингу склала 65 000 ₴ на місяць.

Порівняння підходів (ssr bitrix nuxt, isr nuxt bitrix, headless bitrix nuxt)

// nuxt.config.ts export default defineNuxtConfig({ routeRules: { '/catalog/**': { swr: 300 }, '/company/**': { swr: 180 }, '/about': { prerender: true }, '/cart/**': { ssr: false }, } }); 

server { server_name shop.example.ru; location /bitrix/ { proxy_pass http://127.0.0.1:8080; } location /upload/ { proxy_pass http://127.0.0.1:8080; } location /local/ajax/ { proxy_pass http://127.0.0.1:8080; } location / { proxy_pass http://127.0.0.1:3000; } }