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

Мы часто сталкиваемся с ситуацией: каталог на стандартном шаблоне Битрикс грузится 5–7 секунд, LCP зашкаливает, а SEO-трафик падает из-за Core Web Vitals. Клиенты жалуются на медлительность, а правки в шаблон — боль. Выход — headless-архитектура: Битрикс остаётся бэкендом, а фронтенд пишется на Nuxt.js. Это реальный способ получить LCP < 1.8 сек и полную индексацию без переписывания бизнес-логики. Экономия на хостинге при переходе может достигать 20 000 ₽ в месяц, а стоимость разработки новых модулей снижается на 30%. Закажите консультацию и получите план миграции.

Преимущества headless Битрикс с Nuxt

Классический Битрикс-шаблон — это монолит: PHP-рендеринг, склейка HTML, общий TTFB > 1 сек. Nuxt.js (Vue 3 с SSR) даёт гибридный рендеринг: статические страницы (SSG), динамические через SSR, а для каталога — SWR-кеш. Итог: TTFB падает до 180–250 мс, LCP — до 1.8 сек. Наши проекты показывают прирост конверсии на 20–30% после перехода. На одном из проектов клиент сэкономил 1,5 млн ₽ на разработке за первый год.

Ускорение разработки интерфейсов Битрикс в 2 раза

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

Архитектура Nuxt-приложения для Битрикс

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

// 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 3 имеет встроенный H3-сервер с серверными маршрутами (server/api/). Это создаёт прокси-слой прямо в Nuxt без отдельного бэкенд-сервиса. Токены Битрикс не попадают в браузер, CORS не проблема. Мы используем эту схему в 90% проектов.

// 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

// 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.

Кейс из практики: строительный портал

Один из наших клиентов — крупный портал строительных услуг с 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 ₽ в месяц.

Сравнение подходов

// 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-стили в одном файле. На каждом втором проекте, который берём на поддержку, код шаблонов выглядит как свалка: кэш не работает, добавить новую фичу — переписывай всё. Средняя стоимость исправления такой вёрстки сайтов — 15 000–30 000 рублей только на отладку, а потерянная выручка из-за сломанной корзины в пик сезона может уходить в миллионы. Наша команда с 10-летним опытом строго разделяет: логика — в 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% по сравнению с полным сбросом.

Реальный кейс. Клиент жаловался — на странице каталога у всех одна корзина. Оказалось, предыдущий разработчик вывел $_SESSION['BASKET'] внутри template.php компонента catalog.section. Компонент кэшировался на час — корзина застыла. Перенесли вывод в component_epilog.php, настроили тегированный кэш на sale.basket.basket.line. Страница не потеряла в скорости, корзина стала актуальной. Ущерб от неработающей корзины в пик сезона мог составлять миллионы, а цена исправления — в пределах 15 000 рублей. Другой клиент потерял 200 000 рублей за неделю из-за некорректного кэша формы заказа — мы вернули работоспособность за два дня.

Официальная документация Битрикс рекомендует использовать component_epilog.php для динамических вставок — подробнее в руководстве.

CSS-подходы: BEM, Tailwind или гибрид?

Для больших проектов (30+ шаблонов) используем BEM — .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет. Подробнее о BEM. В Битрикс обёртки с классами 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+ лет — получите консультацию по вашему проекту до начала работ.

Процесс работы:

1. Анализ макетов и текущего проекта — выявляем компоненты для переработки
2. Проектирование структуры — разбиваем страницу на BEM-блоки
3. Реализация — верстаем шаблоны по схеме: template, result_modifier, epilog, CSS, JS
4. Тестирование — проверяем кэш, адаптивность, Core Web Vitals, кроссбраузерность
5. Деплой — стейджинг, приёмка, продакшен

На каждом этапе вы получаете промежуточный результат и можете внести правки. Свяжитесь с нами — оценим проект за 1–2 дня после получения макетов.

Сроки

После анализа даём разбивку по компонентам — что переиспользуется, что верстается с нуля. Закажите предварительную консультацию — посчитаем сроки и бюджет индивидуально.