Розробка фронтенду на 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 },
  }
});

Деплой та інфраструктура

Nuxt 3 деплоїться як Node.js-сервер, статично або на edge-функції. Для зв'язки з Бітрікс на одному сервері — Node.js + PM2 + nginx:

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; }
}

Процес роботи та що входить

1. Аналітика — аудит поточного шаблону Бітрікс, API, структури даних. Визначаємо bottlenecks.
2. Проектування — архітектура headless-шару, схема API, маршрути Nuxt, кешування.
3. Розробка — серверні маршрути (проксі), Vue/Nuxt-компоненти, Pinia stores, налаштування routeRules.
4. Тестування — SSR-рендеринг, Core Web Vitals, індексація, інтеграційні тести.
5. Деплой — Node.js + nginx, PM2 cluster, моніторинг.

Склад роботи:

• Проектування API Бітрікс під Nuxt-споживання.
• Розробка серверних маршрутів Nuxt (проксі + кеш).
• Розробка Vue/Nuxt компонентів: каталог, картка, пошук, кошик.
• Налаштування hybrid rendering: routeRules під різні типи сторінок.
• Pinia stores: кошик, авторизація, wishlist.
• Деплой Node.js + nginx, налаштування PM2 cluster.
• Документація з API та архітектури.
• Навчання вашої команди роботі з headless-фронтендом.
• Гарантія 3 місяці після здачі.

Терміни та вартість

Терміни співставні з Next.js — MVP 2–3 місяці, повний проект 4–6 місяців. Вартість розраховується індивідуально після аудиту. Якщо ви хочете покращити продуктивність вашого сайту на Бітрікс, зв'яжіться з нами для аудиту. Ми допоможемо вам перейти на сучасну архітектуру.

Чому верстка сайтів на 1С-Бітрікс вимагає професіоналізму?

Відкриваєте template.php у попереднього підрядника — а там SQL-запити, бізнес-логіка та inline-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в result_modifier.php або component_epilog.php, представлення — в template.php. Жодного CIBlockElement::GetList в шаблоні. Це скорочує час правок на 30–40% та виключає типові помилки, які ламають кеш. Подібну проблему виправляли клієнту з інтернет-магазину — він місяць не міг оновити блок «Акції». Після налаштування тегованого кеша правки вставали за хвилину, а не за день.

Отримайте безкоштовний аудит вашого проекту — зв'яжіться з нами.

Як правильно організувати шаблони компонентів?

Кастомний шаблон — це не один файл, а структура з п’яти-шести файлів:

• template.php — тільки HTML та виведення $arResult
• result_modifier.php — підготовка даних, додаткові вибірки
• component_epilog.php — код після кешування (лічильники, динаміка)
• style.css та script.js — підключаються через Asset::getInstance()->addCss() та addJs() (не через <link> — інакше ламається об'єднання)
• .parameters.php — параметри візуального редактора

Приклад структури для каталогу:

local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php

Типові шаблони, які верстаємо під ключ:

Кешування: чому воно ламається і як лагодимо?

Компонентне кешування в Бітрікс ламається однією помилкою: вивели ім'я користувача всередині кешованого каталогу — всі бачать одне ім'я. Рішення — component_epilog.php для динамічних вставок.

Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) налаштовуємо обов'язково. Змінили товар — очищується кеш лише цього товару, а не всього розділу. На проєкті з 50 000 товарів це дає приріст швидкості на 40% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами bx-component не чіпаємо — обгортаємо свій BEM-блок всередині.

Для типових завдань (лендінги, адмінки) беремо Tailwind 3+ з PurgeCSS — підсумковий CSS 10–30 КБ замість сотень. Дизайн-токени в tailwind.config.js фіксують кольори, шрифти, відступи в одному місці.

На більшості проєктів застосовуємо гібрид: BEM для структурних компонентів (каталог, картка, чекаут), Tailwind для утилітарних речей (відступи, flex-розкладки). Межу обговорюємо з командою заздалегідь.

Як досягти Core Web Vitals при верстці сайтів на Бітрікс?

Critical CSS — виділяємо стилі першого екрану через пакет critical, інлайнимо в <head>. Решта завантажується асинхронно через media="print" onload="this.media='all'". LCP на мобільних скорочується на 1–1.5 секунди.

Зображення — головне гальмо. Використовуємо <picture> з WebP та JPEG-фолбеком. loading="lazy" для всього нижче першого екрану. width та height явно прописані — CLS = 0. Обробник в urlrewrite.php генерує WebP на льоту.

Мініфікація та стиснення. CSS та JS через Vite або вбудоване об'єднання Бітрікс. Brotli на nginx (brotli_comp_level 6) — на 15–20% ефективніше за gzip. Кешування статики: expires 1y + версіонування через query string.

Ми готові зробити аудит вашого проєкту та запропонувати конкретні кроки. Закажіть консультацію.

Що входить в послугу верстки сайтів на 1С-Бітрікс?

Після замовлення верстки шаблону або адаптації готового рішення передаємо:

• Вихідні коди шаблонів компонентів з розділенням на template.php, result_modifier.php, epilog
• CSS та JS, підключені через Asset — без інлайн-стилів
• Налаштоване кешування з тегами
• Документацію за структурою та параметрами
• Доступ до Git-репозиторію з історією змін
• Навчання вашого розробника: як правити шаблон без втрати оновлюваності

Гарантуємо відповідність Core Web Vitals та кросбраузерність. Закріплюємо інженера з досвідом 10+ років.