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

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