القيد المترابط

في العالم القديم (WordPress وMagento وShopify 1.0)، تم لصق Frontend (الموضوع) وBackend (قاعدة البيانات/المسؤول) معًا. لتغيير لون زر، قمت بتحرير ملف .liquid أو .php داخل بنية CMS. وهذا مناسب للمواقع الصغيرة. إنه سجن للمواقع الطموحة. القيود:

الأداء: أنت تخدم لغة HTML التي تم إنشاؤها بواسطة خادم PHP/Ruby البطيء. لا يمكنك استخدام Edge Caching الحديث بسهولة.
DX: لا يمكنك استخدام React. لا يمكنك استخدام استبدال الوحدة الساخنة. يمكنك الرمز في منطقة نصية أو تحميل ملفات ZIP.
بنية عنوان URL: أنت عالق في /products/xyz. لا يمكنك تغيير التوجيه.

الثورة بلا رأس

** مقطوعة الرأس ** تعني قطع الرأس (الواجهة الأمامية) عن الجسم (الخلفية). يتحدثون عبر API.

الخلفية: Shopify / المحتوى / Strapi. (بيانات خالصة).
الواجهة الأمامية: Next.js / Remix / Vue. (تجربة المستخدم النقية).
الاتصال: GraphQL / REST API.

الآن، يمكنك إنشاء الواجهة الأمامية باعتبارها تطبيق صفحة واحدة (SPA) عالي الأداء. يمكنك استضافته على Vercel (شبكة Edge). يمكنك جلب البيانات من Shopify وContentful و قاعدة بيانات مخصصة، ودمجها في صفحة واحدة سلسة. لا يعلم المستخدم أنه يتصفح 3 أنظمة مختلفة.

لماذا يناقش Maison Code هذا الأمر

في Maison Code، نحن متخصصون في الفخامة بلا رأس. العلامات التجارية الفاخرة تحتاج إلى “سرد القصص”. إنهم يريدون صفحة منتج تبدو وكأنها مقطع دعائي لفيلم. لا تستطيع سمات Shopify القياسية القيام بذلك. إنها شبكات جامدة. نحن نستخدم أنماط مقطوعة الرأس لتجاوز الشبكة. نحن نستخدم Shopify Hydrogen (إطار عمل قائم على Remix) لإنشاء واجهات متاجر مخصصة تبدو وكأنها تطبيقات أصلية، مع الحفاظ على Shopify Checkout القوي للمدفوعات. نتحدث عن هذا لأن التمايز يتطلب التحكم في الكود.

المكدس: JAMstack 2.0

محرك التجارة: Shopify Plus أو BigCommerce. (مقابض العربة، الخروج، المخزون).
CMS: المحتوى أو التعقل. (يتعامل مع النص المنسق ومنشورات المدونة وتخطيطات الصفحة المقصودة).
إطار عمل الواجهة الأمامية: Next.js أو Remix.
الاستضافة: Vercel أو Netlify.

التجارة “القابلة للتركيب”.

يتيح لك هذا اختيار “الأفضل في السلالة”. ألا يعجبك محرك مدونة Shopify؟ (إنه أمر فظيع). احتفظ بـ Shopify للمنتجات، ولكن استبدل Sanity CMS بالمدونة. لا أحب Shopify البحث؟ مبادلة في الجوليا. في Monolith، أنت عالق في الأدوات المضمنة. في مقطوعة الرأس، تقوم بتكوين كومة أحلامك.

7. المحتوى الموحد (الشبكة)

في Monolith، تعيش جميع البيانات في قاعدة بيانات SQL واحدة. في لعبة Headless، تعيش البيانات في كل مكان. نحن نستخدم ** اتحاد GraphQL ** (الخياطة).

المنتج يأتي من Shopify.
المراجعات تأتي من Yotpo.
الافتتاحية تأتي من العقل.
التوصيات تأتي من Rebuy. تستعلم الواجهة الأمامية عن نقطة نهاية واحدة (الشبكة). تقوم الشبكة باستدعاء الخدمات بالتوازي. وهذا أسرع من التنفيذ المتسلسل وأنظف من كود السباغيتي في العميل.

8. وضع المعاينة: الرابط المفقود

يكره المسوقون مقطوعة الرأس لأنني “لا أستطيع رؤية ما أقوم بتحريره”. في Shopify Theme Editor، ترى التغييرات على الفور. في مقطوعة الرأس، اضغط على “حفظ” في المحتوى، وانتظر دقيقتين حتى يتم الإنشاء… عديم الفائدة. الحل: وضع المعاينة Next.js / المعاينة المباشرة للعقل. نحن نبني جسرا في الوقت الحقيقي. عندما يكتب المسوق في Sanity، نستخدم postMessage لتحديث عقد DOM محددة في تطبيق React على الفور. يبدو الأمر وكأنه محرر WYSIWYG، لكنه يُنشئ كود React نظيفًا.

9. دراسة الحالة: مُكوِّن المنتج المخصص

تخيل بيع بدلة مخصصة. يقوم المستخدم باختيار القماش، والزر، ونمط طية الصدر، والمونوجرام. هناك 10000 مجموعة. تدعم Shopify Variants 100 متغير كحد أقصى. الحل الموحد: مستحيل. تطبيقات هاكي. الحل بلا رأس: نحن نبني واجهة رد فعل مخصصة. وهو يحمل حالة التحديدات. يقوم بإنشاء معاينة ديناميكية ثلاثية الأبعاد. عندما ينقر المستخدم على “إضافة إلى سلة التسوق”، نقوم بإنشاء “عنصر مخصص” عبر Shopify API بسمات بيانات وصفية محددة. الواجهة الخلفية لا تهتم بالتعقيد البصري. الواجهة الأمامية تتولى ذلك.

ضريبة التعقيد

مقطوعة الرأس ليست مجانية. في Monolith، تعمل ميزة “Add to Cart” فقط. في Headless، يجب عليك كتابة استدعاء الجلب، والتعامل مع حالة التحميل، والتعامل مع حالة الخطأ، والتعامل مع تحديث واجهة المستخدم المتفائل. أنت تملك التعقيد. المقايضة: تتطلب الوظائف العالية جهدًا هندسيًا عاليًا. ** لا تذهب مقطوعة الرأس إذا **:

لديك عائدات تقل عن مليون دولار.
ليس لديك فريق مطور.
الموضوع القياسي هو “جيد بما فيه الكفاية”.

وجهة نظر المتشككين

“لقد تمت هندستها بشكل مبالغ فيه. وقد تم تحويل المظهر الخاص بي بشكل جيد.” نقطة مضادة: يتم تحويل المواضيع بشكل جيد للسلع القياسية. ولكن إذا كنت تريد “التحميلات الفورية للصفحة” (مؤشرات الويب الأساسية)، فإن السمات تواجه صعوبة. تقوم السمات بتحميل 50 مكونًا إضافيًا لـ jQuery. يقوم بتحميل مقطوعة الرأس تمامًا لملف JS الذي كتبته. السرعة = التحويل. غالبًا ما تكون المواقع مقطوعة الرأس أسرع بنسبة 50% من المواقع المتراصة.

الأسئلة الشائعة

س: ماذا عن الخروج؟ ج: عادةً، نحتفظ بعملية الدفع على النظام الأساسي (على سبيل المثال، إعادة التوجيه إلى “checkout.shopify.com”). تعد إعادة بناء Checkout أمرًا محفوفًا بالمخاطر (امتثال PCI، والمنطق الضريبي، وقواعد الشحن). Shopify لا يشجع بشكل صريح عمليات السحب المخصصة إلا إذا كنت Shopify Plus.

س: هل تحسين محركات البحث أصعب؟ ج: كان في السابق (العرض من جانب العميل). مع العرض من جانب الخادم (SSR) في Next.js/Remix، فهو في الواقع أفضل من Monoliths لأنك تتمتع بالتحكم الكامل في البيانات الوصفية وبنية HTML الدلالية.

10. طبقة بوابة API

إذا كان لديك 10 خدمات صغيرة، فيجب ألا تتواصل الواجهة الأمامية لديك مع 10 واجهات برمجة التطبيقات. إنه يتعامل مع جحيم CORS وإدارة المفاتيح. نقوم بإدراج بوابة API (BFF - الواجهة الخلفية للواجهة الأمامية). عادةً ما يكون خادم GraphQL خفيف الوزن (خادم Apollo أو وظيفة Edge المتخصصة). فهو يجمع واجهات برمجة التطبيقات العشرة في مخطط واحد. الواجهة الأمامية: الاستعلام { المنتج { السعر، التقييمات، التوفر } }. البوابة: جلب الأسعار (Shopify)، والمراجعات (Yotpo)، والتوفر (ERP) بالتوازي. إنه يبسط منطق العميل بشكل كبير.

11. التعامل مع أداء الكتالوج الكبير

“لدينا 100.000 منتج. ويستغرق بناء الموقع الثابت 4 ساعات.” هذا هو فخ “وقت البناء” الخاص بـ Gatsby/Next.js SSG. الحل: ISR (التجديد الثابت التزايدي).

قم ببناء أفضل 1000 منتج في وقت النشر (المسار الحرج).
المنتج 1001 “غير مُصمم”.
يزور المستخدم المنتج 1001.
يقوم الخادم بإنشائه عند الطلب (يستغرق 200 مللي ثانية) ويقوم بتخزينه مؤقتًا.
يحصل المستخدم التالي على النسخة المخزنة مؤقتًا (فورية). يؤدي هذا إلى إبقاء أوقات البناء سريعة (5 دقائق) مع دعم الكتالوجات اللانهائية.

12. الاستنتاج

مقطوعة الرأس هو فصل الاهتمامات المطبق على منطق الأعمال. إنه يحرر فريق التسويق (باستخدام CMS) والفريق الهندسي (باستخدام React) للتحرك بسرعاتهم الخاصة. إنها بنية الويب الحديثة.

عالق في القالب؟

إذا تجاوزت علامتك التجارية حدود السمات القياسية، فيمكن أن ينقلك Maison Code إلى بنية بلا رأس. نحن نبني واجهات متاجر مخصصة تجمع بين القصة والمبيعات.

اتصل بنا لفصل مجموعتك.

سمات Shopify المتجاوزة؟

نحن نبني حلول التجارة بدون رأس باستخدام Next.js/Hydrogen لتقديم تجارب تسوق مخصصة وعالية السرعة. قم بتعيين مهندسينا المعماريين.