Next.js Frontend עבור 1C-Bitrix: ארכיטקטורה ללא ראש (Headless)

ארכיטקטורת Bitrix מונוליטית עם תבניות PHP מכסה 80% מהמשימות. ה-20% הנותרים—דפים בעומס גבוה, SEO לתוכן דינמי, PWA, פרסונליזציה עם edge computing—דורשים גישה שונה. אנו מציעים פתרון headless: Next.js כפרונטאנד על גבי בק-אנד של Bitrix. Bitrix מנהל תוכן ולוגיקה עסקית, Next.js מטפל ברינדור.这不是החלפה של Bitrix אלא הפרדת אחריות: Bitrix הוא הבק-אנד האמין למסחר אלקטרוני (הזמנות, קטלוג, CRM, תשלומים), Next.js הוא הפרונטאנד המודרני עם SSR, SSG, ISR ו-Core Web Vitals מצוינים. לצוות שלנו יש ניסיון של 10+ שנים בפיתוח Bitrix ו-50+ פרויקטים מוצלחים. נבחן את הפרויקט שלך תוך יום אחד.

ארכיטקטורת Headless: Bitrix + Next.js

Bitrix משמש כשרת API. בצד שלו, אנו מפתחים בקרי REST באמצעות \Bitrix\Main\Engine\Controller או נקודות קצה מותאמות אישית ב-/local/ajax/. Next.js רץ על שרת נפרד (Node.js), צורך את ה-API של Bitrix ומרנדר דפים. שכבת ה-API יושבת ביניהם.

Browser → Next.js (SSR/SSG) → Bitrix REST API → DB ↓ Redis Cache 

זרימת בקשה טיפוסית:

// next.js: getStaticProps для страницы категории
export async function getStaticProps({ params }) {
  const [category, products] = await Promise.all([
    fetchBitrix(`/api/catalog/category/${params.slug}`),
    fetchBitrix(`/api/catalog/products?section=${params.slug}&limit=24`),
  ]);
  return {
    props: {
      category,
      products,
    },
    revalidate: 300, // ISR: перегенерация через 5 минут
  };
}

Incremental Static Regeneration (ISR) הוא תכונת מפתח של Next.js למסחר אלקטרוני: דפים נוצרים סטטית בבקשה הראשונה ומתחדשים ברקע לפי לוח זמנים. זה נותן מהירות סטטית עם טריות תוכן דינמית.

מדוע Next.js עולה על תבניות PHP מסורתיות של Bitrix

בואו נשווה מדדים: Next.js משיג LCP עד 1.4 שניות לעומת 4.8 שניות עם תבנית סטנדרטית, ו-PageSpeed Mobile עולה מ-34 ל-82. תבניות מסורתיות נטענות לאט יותר בגלל ארכיטקטורה מונוליטית, בעוד Next.js עם ISR מגיש דפים מהמטמון במילישניות. ISR הוא ההבדל בין לקוח שאבד לבין המרה.

פיתוח API בצד Bitrix

יצירת REST API נקי על גבי Bitrix ללא תלויות מיותרות:

// /local/php_interface/include/api/catalog/ProductsController.php
class ProductsController extends \Bitrix\Main\Engine\Controller
{
    public function getListAction(
        string $section = '',
        int $page = 1,
        int $limit = 24,
        string $sort = 'NAME',
        string $order = 'ASC'
    ): array
    {
        $filter = ['ACTIVE' => 'Y', 'IBLOCK_ID' => CATALOG_IBLOCK_ID];
        if ($section) {
            $sectionId = $this->getSectionIdBySlug($section);
            $filter['SECTION_ID'] = $sectionId;
            $filter['INCLUDE_SUBSECTIONS'] = 'Y';
        }
        $result = \CIBlockElement::GetList(
            [$sort => $order],
            $filter,
            false,
            ['nPageSize' => $limit, 'iNumPage' => $page],
            ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'PROPERTY_BRAND', 'CATALOG_PRICE_1']
        );
        $products = [];
        while ($el = $result->GetNextElement()) {
            $products[] = $this->formatProduct($el);
        }
        return [
            'items' => $products,
            'total' => (int)$result->SelectedRowsCount(),
            'pages' => ceil($result->SelectedRowsCount() / $limit),
        ];
    }
}

ה-API חייב להחזיר נתונים מנורמלים, לא מבני Bitrix גולמיים עם שדות זבל כמו Browser → Next.js (SSR/SSG) → Bitrix REST API → DB ↓ Redis Cache ו-// next.js: getStaticProps для страницы категории export async function getStaticProps({ params }) { const [category, products] = await Promise.all([ fetchBitrix(`/api/catalog/category/${params.slug}`), fetchBitrix(`/api/catalog/products?section=${params.slug}&limit=24`), ]); return { props: { category, products }, revalidate: 300, // ISR: перегенерация через 5 минут }; } . למידע נוסף על REST API של Bitrix, ראו את התיעוד הרשמי.

SSR לדפים קריטיים ל-SEO

כרטיסי מוצר, דפי קטגוריות, מאמרי בלוג הם מועמדים ל-SSG/ISR. עגלה, תשלום, חשבון אישי הם CSR (רינדור בצד הלקוח) – אין צורך ב-SEO.

// Динамическая генерация путей для товаров
export async function getStaticPaths() {
  const products = await fetchBitrix('/api/catalog/products/slugs');
  return {
    paths: products.map(p => ({
      params: { slug: p.slug }
    })),
    fallback: 'blocking', // новые товары рендерятся при первом запросе
  };
}

// /local/php_interface/include/api/catalog/ProductsController.php class ProductsController extends \Bitrix\Main\Engine\Controller { public function getListAction( string $section = '', int $page = 1, int $limit = 24, string $sort = 'NAME', string $order = 'ASC' ): array { $filter = ['ACTIVE' => 'Y', 'IBLOCK_ID' => CATALOG_IBLOCK_ID]; if ($section) { $sectionId = $this->getSectionIdBySlug($section); $filter['SECTION_ID'] = $sectionId; $filter['INCLUDE_SUBSECTIONS'] = 'Y'; } $result = \CIBlockElement::GetList( [$sort => $order], $filter, false, ['nPageSize' => $limit, 'iNumPage' => $page], ['ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'PROPERTY_BRAND', 'CATALOG_PRICE_1'] ); $products = []; while ($el = $result->GetNextElement()) { $products[] = $this->formatProduct($el); } return [ 'items' => $products, 'total' => (int)$result->SelectedRowsCount(), 'pages' => ceil($result->SelectedRowsCount() / $limit), ]; } } מאפשר טיפול במוצרים חדשים ללא רגנרציה מלאה של האתר.

מקרה בוחן: פרונטאנד Next.js לרשת אופנה

רשת חנויות בגדים עם קטלוג מקוון של ~35,000 פריטים ומלאי עונתי מתחדש. בעיה: Core Web Vitals LCP = 4.8 שניות (יעד < 2.5 שניות), תבנית Bitrix הייתה כבדה ואיטית במובייל.

שמרנו על Bitrix כבק-אנד: ניהול מוצרים, הזמנות, CRM, אינטגרציית 1C. פיתחנו פרונטאנד Next.js.

יישום:

1. Bitrix API: בקרים למוצרים, קטגוריות, מותגים, חיפוש, עגלה (תואם SSR באמצעות סשן קוקי).

2. Next.js App Router (Next.js 14): Server Components לדפי SEO, Client Components לאלמנטים אינטראקטיביים (פילטרים, עגלה, אימות).

3. תמונות: ~PREVIEW_TEXT עם אופטימיזציה אוטומטית, WebP, srcset רספונסיבי. תמונות מתארחות ב-CDN (נפרד מ-Bitrix).

4. חיפוש: Meilisearch עם אינדקס מ-Bitrix, רכיב React לחיפוש מיידי.

5. עגלה: מצב מנוהל על ידי Zustand + סנכרון עם עגלת Bitrix דרך REST API בכל שינוי.

המעבר ארך 4 חודשים: חודש אחד ל-API של Bitrix, 3 חודשים לפרונטאנד Next.js. התבנית הישנה רצה במקביל; המעבר בוצע דרך DNS תוך דקות.

כיצד לשלב עגלה בין Next.js ל-Bitrix?

העגלה מאתגרת ב-headless: היא חייבת לעבוד לפני אימות, להסתנכרן עם Bitrix בעת התחברות, ולא ללכת לאיבוד בניווט בין דפים. פתרון: IBLOCK_ELEMENT_ID בקוקי, העגלה מאוחסנת ב-Bitrix לפי טוקן זה. בעת התחברות – מיזוג עגלת אורח עם עגלת משתמש. מצב React הוא רק מראה UI של עגלת השרת.

המהנדסים שלנו מבטיחים ללא אובדן עגלה: עשרות שנות ניסיון בפרויקטים מאשרות את אמינות הסכמה הזו.

פריסה ותשתית

Next.js הוא יישום Node.js הדורש תהליך נפרד. אפשרויות: Vercel (הפשוטה ביותר אך נתונים יוצאים לחו"ל), VPS/שרת ייעודי עם PM2 + nginx, קונטיינר Docker.

Nginx כפרוקסי הפוך מול Next.js ו-Bitrix:

# Статика и SEO-страницы → Next.js
location / {
    proxy_pass http://nextjs:3000;
}

# REST API → Битрикс
location /api/bitrix/ {
    proxy_pass http://bitrix/local/ajax/;
}

# Административная часть → Битрикс
location /bitrix/ {
    proxy_pass http://bitrix;
}

מה כלול בעבודה

• בדיקת הפרונטאנד הנוכחי שלך ב-Bitrix ותכנון ארכיטקטורת headless
• עיצוב REST API: נקודות קצה, סכמת נתונים, מטמון
• פיתוח בקרי REST נקיים ב-Bitrix
• פיתוח יישום Next.js: ניתוב, SSG/ISR/SSR, רכיבים
• אינטגרציה של עגלה, אימות, תשלום עם Bitrix
• הגדרת CDN לתמונות, מטמון ברמת nginx
• פריסה, ניטור, CI/CD
• תיעוד והדרכת צוות

לוחות זמנים משוערים

MVP (קטלוג + דף מוצר + חיפוש) – 2–3 חודשים. פרונטאנד מלא עם עגלה, תשלום, חשבון אישי – 4–6 חודשים. התמחור אישי – צרו קשר להערכת פרויקט.

רוצים לשפר Core Web Vitals ו-SEO? נשמח לייעץ. הזמינו בדיקה – נכין הצעה סוהר.