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

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

Nuxt.js — это Vue-фреймворк с SSR «из коробки», аналог Next.js но для Vue-стека. Если команда или проект исторически использует Vue, Nuxt.js — естественный выбор для headless-архитектуры поверх 1С-Битрикс. Принципы идентичны Next.js: Битрикс отдаёт данные через REST API, Nuxt занимается рендерингом. Детали реализации различаются.

Headless Битрикс + Nuxt: основные отличия от Next.js

Nuxt.js использует 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,
});

// SEO
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 как прокси к Битрикс

Nuxt 3 имеет встроенный H3-сервер с серверными маршрутами (server/api/). Это позволяет создать прокси-слой прямо в Nuxt без отдельного бэкенд-сервиса:

// 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,
  };
});

Серверные маршруты Nuxt выполняются на Node.js-сервере — токены Битрикс не попадают в браузер, CORS не проблема.

Управление состоянием: 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 с hydration state.

Кейс: Nuxt.js для строительного портала

Портал строительных услуг: каталог подрядчиков (12 000 компаний), рейтинги, отзывы, тендерный модуль. Битрикс использовался для управления контентом и пользователями. Vue — выбор команды фронтенда.

Основная сложность: SEO для страниц подрядчиков (каждая — отдельная компания с уникальным контентом), SSG невозможен из-за частых обновлений данных, SSR с кешем — оптимально.

Реализация:

1. Nuxt 3 с hybrid rendering: страницы подрядчиков — SSR + Redis-кеш (5 минут), статичные страницы (О нас, Условия) — SSG.

2. Серверные маршруты Nuxt: прокси к Битрикс REST API с кешем useStorage('redis') из unstorage (встроен в Nuxt).

3. Поиск подрядчиков — Vue-компонент с instant search через Typesense. Битрикс при обновлении компании триггерит webhook → Node.js-сервис обновляет Typesense-индекс.

4. Тендерный модуль — SPA внутри Nuxt: подача заявок, статус рассмотрения, чат с заказчиком. Авторизация через JWT, хранение в httpOnly cookie.

ISR-эквивалент в Nuxt (SWR-кеш)

Nuxt реализует stale-while-revalidate через routeRules:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/catalog/**':  { swr: 300 },  // кеш 5 минут, ревалидация в фоне
    '/company/**':  { swr: 180 },  // кеш 3 минуты
    '/about':       { prerender: true }, // статическая генерация
    '/cart/**':     { ssr: false }, // только CSR, без SSR
  }
});

Это эквивалент ISR из Next.js — страницы отдаются из кеша, обновляются в фоне после истечения времени.

Деплой

Nuxt 3 поддерживает несколько режимов деплоя: Node.js-сервер, статический экспорт, edge-функции (Cloudflare Workers, Vercel Edge). Для связки с Битрикс на одном сервере — Node.js + PM2 + nginx.

# nginx: Nuxt на порту 3000, Битрикс на 80
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; }
}

Состав работ

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

Сроки: сопоставимы с Next.js — MVP 2–3 месяца, полный проект 4–6 месяцев.