Розробка фронтенду на 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 місяців.