פיתוח פרונטאנד ב-Nuxt.js עבור 1С-Bitrix

לעתים קרובות אנו נתקלים במצב הבא: קטלוג בתבנית Bitrix סטנדרטית נטען תוך 5–7 שניות, LCP מרקיע שחקים, ותנועת SEO יורדת עקב Core Web Vitals. לקוחות מתלוננים על איטיות, ועריכת התבנית היא כאב ראש. הפתרון הוא ארכיטקטורת headless: Bitrix נשאר כצד השרת, והפרונטאנד נכתב ב-Nuxt.js. זו דרך אמיתית להשיג LCP < 1.8 שניות ואינדוקס מלא ללא שכתוב לוגיקת העסק. קבלו ייעוץ וקבלו תוכנית העברה.

יתרונות של Bitrix Headless עם Nuxt

תבנית Bitrix קלאסית היא מונולית: עיבוד PHP, שרשור HTML, ו-TTFB משותף > 1 שנייה. Nuxt.js (Vue 3 עם SSR) מציע עיבוד היברידי: דפים סטטיים (SSG), דינמיים דרך SSR, ולקטלוג — מטמון SWR. תוצאה: TTFB יורד ל-180–250 אלפיות השנייה, LCP ל-1.8 שניות. הפרויקטים שלנו מראים עלייה בהמרות של 20–30% לאחר ההעברה.

כיצד ISR משפר את ביצועי הקטלוג?

ISR (stale-while-revalidate) מהיר פי 5 מאשר ללא מטמון: TTFB < 200 אלפיות השנייה במקום > 1 שנייה. אימות מחדש ברקע מבטיח נתונים עדכניים ללא חסימת טעינת הדף.

למה לבחור ב-Nuxt על פני תבניות Bitrix?

Nuxt.js יעיל פי 3 עבור דפים דינמיים בזכות יישור Virtual DOM ומטמון בצד הקצה. מהירות הפיתוח עולה ב-40% בזכות ארכיטקטורת רכיבים וניהול מצב עם Pinia.

האצת פיתוח ממשק Bitrix פי 2

Nuxt מבטל את השגרה של עבודה עם תבניות Bitrix. הגישה מבוססת הרכיבים של Vue 3 + Pinia למצב + ניתוב מבוסס קבצים — פיתוח סעיף חדש מהיר ב-40%. הנה היישום האופייני שלנו.

ארכיטקטורה של אפליקציית Nuxt עבור Bitrix

Nuxt 3 משתמש ב-Vue Composition API ובמערכת מטמון משלו (useAsyncData, useFetch). הניתוב מבוסס קבצים, בדומה ל-Next.js. SSR, SSG, ISR (הנקרא עיבוד היברידי ב-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>

// 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> ב-Nuxt 3 מבצע אוטומטית דה-דופליקציה של בקשות — אותה קריאה שנעשתה בשרת במהלך SSR אינה חוזרת על עצמה בצד הלקוח במהלך hydration. זה מפחית תעבורת רשת מיותרת.

ניתוב שרת כפרוקסי ל-Bitrix

Nuxt 3 כולל שרת H3 מובנה עם ניתוב שרת (useFetch). זה יוצר שכבת פרוקסי ישירות ב-Nuxt ללא שירות backend נפרד. טוקנים של Bitrix לעולם לא מגיעים לדפדפן, ו-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 חברות, דירוגים ומודול מכרזים. Bitrix שימש לניהול תוכן. הצענו ארכיטקטורת headless עם Nuxt 3. האתגר המרכזי: SEO לדפי קבלנים עם עדכונים תכופים. SSG לא היה אפשרי, SSR עם מטמון היה אופטימלי.

יישום:

1. Nuxt 3 עם עיבוד היברידי: דפי קבלנים — SSR + מטמון Redis (5 דקות), דפים סטטיים — SSG.
2. ניתוב שרת Nuxt: פרוקסי ל-Bitrix REST API עם מטמון server/api/.
3. חיפוש קבלנים — רכיב Vue עם חיפוש מיידי דרך Typesense. בעדכון, Bitrix מפעיל webhook → שירות Node.js מעדכן את Typesense.
4. מודול מכרזים — SPA בתוך Nuxt: הצעות מחיר, אימות דרך JWT.

הפרויקט הושלם תוך 5 חודשים, והלקוח ממשיך בשיתוף פעולה.

השוואת גישות

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