مقطوعة الرأس Shopify مع الهيدروجين: متى وكيف

معظم متاجر Shopify لا تحتاج إلى أن تكون مقطوعة الرأس. يتعارض هذا البيان مع السرد السائد في دوائر مطوري Shopify، حيث غالبًا ما يتم وضع مقطوعة الرأس على أنها التطور الحتمي لكل علامة تجارية جادة للتجارة الإلكترونية. الحقيقة أكثر دقة: بلا رأس Shopify هو الخيار الصحيح لملف تعريف محدد للتاجر، والاختيار الخاطئ للعديد من الآخرين الذين قد ينفقون أكثر بكثير لتحقيق نتائج أفضل بشكل هامشي.

يشرح هذا الدليل ما يعنيه Shopify بدون رأس في الواقع، عندما يكون الهيدروجين (إطار عمل Shopify الرسمي بدون رأس القائم على React) هو الخيار المناسب، وكيفية البناء به، وكيفية إجراء تقييم صادق للتكلفة والعائد قبل الالتزام.

الوجبات الرئيسية

• يقوم تطبيق Headless Shopify بفصل واجهة المتجر (الواجهة الأمامية) عن محرك التجارة (الواجهة الخلفية لـ Shopify) عبر Storefront API
• الهيدروجين هو إطار عمل Shopify الرسمي القائم على React لواجهات المتاجر مقطوعة الرأس، والمبني على Remix
• يتم خدمة معظم المتاجر التي تقل إيراداتها السنوية عن 5 ملايين دولار بشكل أفضل من خلال سمات Shopify 2.0 المحسنة بدلاً من التصميم بدون رأس
• يتم تبرير مقطوعة الرأس عندما: متطلبات تجربة المستخدم المخصصة للغاية، أو تكامل تجارة المحتوى، أو النشر متعدد القنوات، أو متطلبات الأداء القصوى
• Oxygen عبارة عن منصة استضافة Shopify لتطبيقات Hydrogen - نشر بدون تكوين مع شبكة حافة عالمية
• التكلفة الإجمالية لملكية مقطوعة الرأس أعلى بمقدار 3 إلى 5 مرات من Shopify القائم على الموضوع للصيانة المستمرة
• توفر واجهة برمجة تطبيقات Shopify's Storefront إمكانية الوصول إلى المنتجات والمجموعات وعربة التسوق والخروج وبيانات العملاء
• يُمكّن الريمكس (الهيدروجين الأساسي) من العرض من جانب الخادم وتدفق HTML للحصول على عناصر حيوية للويب الأساسية الممتازة

---

ماذا يعني بلا رأس Shopify في الواقع

في متجر Shopify التقليدي، يتم تشغيل كل شيء على منصة Shopify: بيانات المنتج، وموضوع واجهة المتجر، وعربة التسوق، والخروج، وحسابات العملاء، وإدارة الطلبات. تعرض لغة القالب Liquid صفحات المنتج بجانب الخادم على البنية التحتية لـ Shopify.

في بنية Shopify مقطوعة الرأس:

• محرك التجارة (Shopify): يدير المنتجات والمخزون والطلبات والعملاء والمدفوعات والتنفيذ - بدون تغيير
• Storefront (الواجهة الأمامية المخصصة لك): تطبيق منفصل — React أو Next.js أو Hydrogen أو أي إطار عمل ويب — يجلب البيانات من Shopify عبر واجهة برمجة التطبيقات Storefront API ويقدم تجربة مواجهة العملاء

يمكن تشغيل الواجهة الأمامية في أي مكان: Vercel، أو Netlify، أو Cloudflare Workers، أو منصة Oxygen الخاصة بـ Shopify، أو البنية التحتية الخاصة بك. تظل الواجهة الخلفية للتجارة Shopify.

** لماذا تفعل هذا؟ **

الدافع وراء مقطوعة الرأس هو دائمًا واحد أو أكثر من:

• تجربة مستخدم مخصصة لا يمكن تحقيقها في بنية سمة القسم/الكتلة في Shopify
• تكامل تجارة المحتوى — تضمين المنتجات في نظام إدارة المحتوى (CMS) مثل Contentful أو Sanity أو Prismic
• النشر متعدد القنوات — نفس بيانات المنتج التي تعمل على تشغيل موقع ويب وتطبيق جوال ولافتات رقمية والتجارة الصوتية
• الأداء — تحكم كامل في حزمة JavaScript، وتحميل المكونات، واستراتيجية العرض
• تفضيل الفريق الفني — فريق من مطوري React الذين يجدون قوالب Liquid غير مريحة

---

الهيدروجين: إطار عمل Shopify الرسمي بدون رأس

الهيدروجين هو إطار عمل Shopify القائم على React لبناء واجهات متاجر Shopify مقطوعة الرأس. إنها مبنية على Remix (إطار عمل React، الذي أصبح الآن جزءًا من React Router 7) وتم تحسينها لواجهة برمجة تطبيقات Shopify's Storefront API.

ما يوفره الهيدروجين

Oxygen: استضافة Shopify Edge للهيدروجين

Oxygen هي منصة النشر العالمية لتطبيقات Hydrogen الخاصة بـ Shopify. تم تضمينه مع Shopify Plus دون أي تكلفة إضافية. يقوم Oxygen بنشر تطبيق Hydrogen الخاص بك على شبكة Cloudflare العالمية - نفس البنية التحتية التي تستخدمها واجهات المتاجر الخاصة بـ Shopify.

فوائد Oxygen مقابل استضافة الطرف الثالث:

• نشر التكوين الصفري عبر Shopify CLI
• HTTPS التلقائي على المجال المخصص الخاص بك
• CDN عالمي مع تخزين مؤقت للحافة
• تكامل من الدرجة الأولى مع البنية التحتية لبيانات Shopify (تقليل زمن استجابة واجهة برمجة التطبيقات)
• لا يوجد تسعير خروج أو حساب لأحجام حركة المرور النموذجية

السبب الرئيسي لاختيار Vercel أو Netlify بدلاً من Oxygen: أنت بحاجة إلى ميزة استضافة لا يدعمها Oxygen (اتصالات قاعدة البيانات، عمليات تكامل واجهة برمجة التطبيقات الخارجية التي تتطلب وقت تشغيل غير متصل بالحواف، وما إلى ذلك) أو أنك لست مشتركًا في Shopify Plus.

---

واجهة برمجة تطبيقات Shopify Storefront: ما يمكنك الوصول إليه

واجهة برمجة تطبيقات Storefront هي واجهة برمجة التطبيقات العامة التي يستخدمها Hydrogen (وأي تطبيق بدون رأس) لجلب البيانات. إنها واجهة برمجة تطبيقات GraphQL مع رموز الوصول العامة - لا يلزم وجود سر من جانب الخادم للعمليات الأساسية.

الموارد المتاحة

ما لا تستطيع واجهة برمجة تطبيقات Storefront فعله

للحصول على وظائف التجارة الكاملة في إعداد بدون رأس، تحتاج عادةً إلى واجهة برمجة التطبيقات Storefront API (العامة، من جانب العميل) وواجهة برمجة التطبيقات Admin (الخاصة، من جانب الخادم فقط) للعمليات على مستوى المسؤول.

---

بناء واجهة متجر للهيدروجين: الأساسيات

إنشاء المشروع

npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected

هذا يدعم مشروع الهيدروجين الكامل مع:

• توجيه Remix v2 (التوجيه المستند إلى الملف في /app/routes/)
• تم تكوين عميل Shopify Storefront API مسبقًا
• أمثلة على طرق المنتج والتحصيل وعربة التسوق
• تكوين نشر الأكسجين

أنماط الهندسة المعمارية الأساسية

يستخدم الهيدروجين نمط محمل Remix لجلب البيانات من جانب الخادم:

في مسار المنتج (/app/routes/products.$handle.tsx)، تقوم وظيفة المُحمل بإحضار بيانات المنتج من Storefront API على الخادم، وتعرضها باستخدام React، وتدفق استجابة HTML. ويختلف هذا بشكل أساسي عن عرض SPA من جانب العميل - يكتمل HTML عند وصوله إلى المتصفح، وهو أمر بالغ الأهمية لتحسين محركات البحث وCore Web Vitals.

العربة: التعقيد من جانب العميل

تستخدم عربة التسوق في Hydrogen واجهة برمجة تطبيقات Shopify's Cart API (عربة مدعومة بالخادم، وليست قائمة على التخزين المحلي). يوفر الهيدروجين سياق CartProvider وخطاف useCart الذي يدير حالة سلة التسوق ويتزامن مع Shopify's Cart API. تعتبر عمليات سلة التسوق (الإضافة والتحديث والإزالة) متفائلة - حيث يتم تحديث واجهة المستخدم على الفور، ويتم استدعاء واجهة برمجة التطبيقات في الخلفية.

** إعادة توجيه الخروج **

يقوم تدفق الخروج القياسي الخاص بـ Hydrogen بإعادة توجيه العملاء إلى عنوان URL الخاص بالخروج المستضاف في Shopify. هذا يعني أن الواجهة الأمامية المخصصة لديك تتعامل مع تجربة واجهة المتجر، لكن عملية الدفع نفسها لا تزال تعمل على البنية التحتية لـ Shopify (مع تضمين جميع عمليات الدفع والثقة وتحسين عملية الدفع في Shopify).

بالنسبة للتجار في Shopify Plus الذين يريدون أيضًا عملية دفع مخصصة بالكامل، فإن Checkout Extensibility هو المسار المناسب - وليس إنشاء عملية دفع مخصصة خارج Shopify.

---

عندما يستحق مقطوعة الرأس كل هذا العناء

استخدم إطار القرار هذا:

حجة الأداء: غالبًا ما يكون مبالغًا فيه

يستشهد العديد من المدافعين مقطوعي الرأس بالأداء باعتباره المبرر الأساسي. لكن موضوع Shopify's Dawn (والموضوعات المميزة المُحسّنة جيدًا) يحقق نتائج ممتازة في مؤشرات أداء الويب الأساسية. غالبًا ما يكون فرق سقف الأداء بين السمة الأصلية المُحسّنة جيدًا وتطبيق Hydrogen المُحسّن جيدًا هامشيًا بالنسبة لحركة المرور في العالم الحقيقي.

حيث تفوز Headless حقًا بالأداء: صفحات كتالوج المنتجات الثقيلة جدًا مع تصفية معقدة، وتجارب تحريرية غنية بالوسائط مع الفيديو والرسوم المتحركة، والمواقع التي تتطلب إستراتيجيات قوية للتخزين المؤقت على الحافة والتي لا تستطيع شبكة CDN الخاصة بـ Shopify وحدها تحسينها.

حجة تكامل تجارة المحتوى: غالبًا ما تكون غير مرجحة

أقوى حالة لـ "مقطوعة الرأس" هي تكامل تجارة المحتوى. العلامات التجارية التي تنشر المحتوى التحريري إلى جانب المنتجات - كتب البحث، والوصفات، والأدلة الإرشادية التي تتضمن المنتجات - تستفيد بشكل كبير من نموذج المحتوى الموحد. يقوم نظام Contentful أو Sanity CMS مع مراجع المنتج بسحب بيانات المنتج من Shopify's Storefront API ويعرض التحرير + التجارة في صفحة موحدة ومُحسّنة لتحسين محركات البحث. لا يمكن تحقيق ذلك في Shopify الأصلي دون تنازلات كبيرة.

---

مقطوعة الرأس مقابل السمة الأصلية: مقارنة التكلفة الإجمالية

فرق التكلفة حقيقي وكبير. بالنسبة لعلامة تجارية تبلغ إيراداتها السنوية 2 مليون دولار، قد تكلف Shopify مقطوعة الرأس 150 ألف دولار في التطوير الأولي و50 ألف دولار سنويًا في الصيانة - مما يقزم تكلفة الاشتراك في Shopify Plus. يجب أن يُظهر حساب عائد الاستثمار تأثيرًا كبيرًا على الإيرادات من تجربة المستخدم المحسنة لتبرير ذلك.

---

توافق التطبيق: التحدي المخفي مقطوعة الرأس

تم تصميم النظام البيئي لتطبيق Shopify بشكل أساسي لواجهات المتاجر الأصلية القائمة على Liquid. تقوم العديد من تطبيقات Shopify الشهيرة بإدخال JavaScript في قالب Liquid - وليس لديهم ما يعادل Storefront API.

التطبيقات التي تعمل بلا هوادة

التطبيقات التي لا تعمل بدون توقف

معظم تطبيقات Shopify التي تستخدم تكامل سمة Liquid أو ScriptTag أو checkout.liquid غير متوافقة مع واجهات المتاجر بدون رأس. يتضمن ذلك العديد من أدوات CRO وبعض تطبيقات الولاء ومنصات المراجعة القديمة.

قبل المضي قدمًا، قم بمراجعة حزمة التطبيق بالكامل للتأكد من التوافق. يتطلب كل تطبيق غير متوافق إما: (1) العثور على بديل متوافق بدون رأس، أو (2) إنشاء وظائف مخصصة، أو (3) قبول فقدان تلك الوظيفة.

---

البديل: النهج "الهجين".

بدلاً من قطع الرأس بالكامل، يستفيد العديد من التجار من النهج المختلط:

• سمة Shopify القياسية لمعظم واجهات المتجر (توافق عالٍ مع التطبيقات، وصيانة منخفضة)
• تطبيق React مخصص لصفحات محددة عالية القيمة (الصفحة الرئيسية، صفحات المنتج) حيث تكون تجربة المستخدم الفريدة ذات أهمية
• واجهة برمجة تطبيقات Shopify's Storefront التي تعمل على تشغيل المكونات المخصصة ضمن السمة الأصلية

يعمل هذا النموذج المختلط على تقليل التكلفة والتعقيد مع توفير تجربة مستخدم مخصصة في الأماكن الأكثر أهمية.

---

الأسئلة المتداولة

هل أحتاج إلى Shopify Plus لتطبيق الهيدروجين بدون رأس؟

لا — يتوفر Hydrogen وStorefront API في جميع خطط Shopify. تتطلب استضافة Oxygen (منصة Shopify المتطورة للهيدروجين) Shopify Plus. في الخطط الأخرى، يمكنك استضافة تطبيق Hydrogen على Vercel أو Netlify أو Cloudflare Workers أو أي مضيف متوافق مع Node.js. يتوفر الوصول إلى Storefront API وإطار عمل Hydrogen بالكامل بغض النظر عن الخطة.

كيف يعمل تحسين محركات البحث في متجر هيدروجين بدون رأس؟

يستخدم Hydrogen العرض من جانب الخادم الخاص بـ Remix، والذي ينتج HTML كاملاً على الخادم - وهو نفس النهج الذي تتبعه سمات Liquid الأصلية في Shopify. تتلقى برامج زحف محركات البحث HTML معروضًا بالكامل مع ظهور محتوى المنتج بالكامل. يشتمل Hydrogen على أدوات مساعدة لتحسين محركات البحث للعلامات الوصفية وعناوين URL الأساسية والبيانات المنظمة. تعد ميزة تحسين محركات البحث (SEO) مقابل SPA (العرض من جانب العميل) الخاصة بالمسؤولية الاجتماعية للشركات أمرًا مهمًا؛ مقابل سمات Shopify الأصلية، يكون الفرق هامشيًا إذا تم تكوين كليهما بشكل صحيح.

ما الفرق بين Hydrogen وNext.js Commerce لـ Shopify؟

كلاهما عبارة عن أطر عمل قائمة على React لـ Shopify مقطوعة الرأس. Hydrogen هو إطار العمل الرسمي لـ Shopify، المبني على Remix، مع تكامل واجهة برمجة التطبيقات Shopify Storefront API من الدرجة الأولى، واستضافة Oxygen، والمساعدين الخاصين بـ Shopify (عربة التسوق، والخروج، والتحليلات). Next.js Commerce هي مجموعة أدوات بداية مفتوحة المصدر من Vercel للتجارة الإلكترونية بدون رأس والتي تدعم منصات متعددة بما في ذلك Shopify. يتمتع الهيدروجين بتحسينات أعمق خاصة بـ Shopify؛ يوفر Next.js Commerce المزيد من المرونة إذا كان بإمكانك تبديل منصات التجارة أو تحتاج إلى ميزات خاصة بـ Next.js.

هل يمكنني استخدام ميزة الدفع في Shopify بواجهة أمامية بدون رأس؟

نعم، هذا هو النمط القياسي بدون رأس. تتعامل الواجهة الأمامية المخصصة للهيدروجين مع واجهة المتجر، وعند نقطة الدفع، تقوم بإعادة التوجيه إلى عنوان URL الخاص بالخروج المستضاف في Shopify (الذي تم إنشاؤه من حقل checkoutUrl الخاص بـ Cart API). ويمنحك هذا تجربة مستخدم مخصصة بالكامل لاكتشاف المنتج وعربة التسوق، والخروج المحسّن والمختبر للتحويل من Shopify لخطوة الدفع. تتيح إمكانية توسيع الخروج (Shopify Plus) تخصيص عملية الدفع في Shopify نفسها باستخدام الامتدادات.

ما المدة التي يستغرقها تطبيق الهيدروجين عادةً؟

واجهة متجر هيدروجين مخصصة بالكامل لتحل محل سمة Shopify الناضجة: من 16 إلى 52 أسبوعًا حسب التعقيد. تنفيذ أبسط للهيدروجين لإطلاق متجر جديد بدون تعقيدات قديمة: من 8 إلى 16 أسبوعًا. المحركات الرئيسية للمخطط الزمني هي: تعقيد التصميم المخصص، وعدد أنواع المنتجات وحجم الكتالوج، واستبدال النظام البيئي للتطبيق المطلوب، وخبرة الفريق مع الهيدروجين على وجه التحديد.

---

الخطوات التالية

تعد Headless Shopify with Hydrogen بنية قوية للتاجر المناسب - ولكن القرار يتطلب تقييمًا صادقًا لمتطلبات تجربة المستخدم الخاصة بك، وقدرة المطور، والميزانية، وتبعيات النظام البيئي للتطبيق.

تتضمن خدمات Shopify Plus من ECOSIRE استشارات الهندسة المعمارية بدون رأس، وتطوير واجهة متجر الهيدروجين، وتكامل واجهة برمجة التطبيقات Storefront API، ونشر الأكسجين. نحن نساعد التجار على تقييم ما إذا كان خيار بدون رأس هو الخيار الصحيح وتنفيذ التنفيذ عندما يكون كذلك - بما في ذلك الأساليب المختلطة التي تقدم تجربة مستخدم مخصصة بتكلفة أقل من بدون رأس بالكامل.

حدد موعدًا لاستشارة تصميم بدون رأس لتقييم متطلباتك المحددة والحصول على توصية صادقة بشأن ما إذا كان بدون رأس Shopify هو الاستثمار المناسب لمتجرك.