بدون رأس Shopify مع الهيدروجين: قم ببناء واجهات متاجر مخصصة عالية الأداء

تعمل التجارة بدون رأس على فصل طبقة العرض التقديمي للواجهة الأمامية عن محرك التجارة الخلفي. Shopify Hydrogen هو الإطار الرسمي لبناء واجهات متاجر مخصصة تتصل بالواجهة الخلفية لـ Shopify من خلال Storefront API. مبني على Remix (إطار عمل متكامل قائم على React)، يوفر Hydrogen مكونات وربطات وأدوات مساعدة خاصة بالتجارة تعمل على تسريع التطوير مع الاستفادة من البنية التحتية لعربة التسوق والخروج وإدارة العملاء في Shopify. يغطي هذا الدليل كل شيء بدءًا من قرارات التصميم وحتى النشر.

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

• تم بناء Hydrogen على Remix مع مكونات React Server للحصول على أداء عرض مثالي من جانب الخادم
• توفر واجهة Storefront API إمكانية الوصول للقراءة إلى المنتجات والمجموعات والمحتوى؛ تتعامل واجهة برمجة تطبيقات حساب العميل مع المصادقة
• تعمل مكونات التجارة (ProductPrice، وCartForm، وAddToCartButton) على التخلص من النموذج النمطي مع بقائها قابلة للتخصيص بالكامل
• توفر استضافة Oxygen بنية تحتية منتشرة على الحافة ومُحسّنة للهيدروجين مع إمكانية القياس التلقائي
• تعتبر مكاسب الأداء بنسبة 30-50% في أكبر طلاء محتوى مقارنةً بموضوعات Shopify Liquid نموذجية

متى تذهب بلا رأس

اختر الهيدروجين متى

• تتطلب علامتك التجارية تصميمًا مخصصًا يتجاوز إمكانيات المظهر السائل
• أنت بحاجة إلى دمج المحتوى من نظام إدارة المحتوى بدون رأس (Contentful، Sanity، Strapi)
• الأداء هو عامل تمييز تنافسي بالغ الأهمية (تحميل الصفحة لمدة تقل عن ثانية واحدة)
• يفضل فريق الواجهة الأمامية الخاص بك React وأدوات JavaScript الحديثة
• أنت بحاجة إلى تجربة تطبيق الويب التقدمي (PWA).
• تريد مشاركة المكونات عبر الويب والهاتف المحمول والقنوات الأخرى

ابقَ مع السمات السائلة متى

• يتم تلبية متطلبات التصميم الخاصة بك من خلال السمات الموجودة مع التخصيص
• أنت تفتقر إلى موارد تطوير الواجهة الأمامية للصيانة المستمرة
• أنت بحاجة إلى تجربة محرر سمات مسؤول Shopify الكاملة للمستخدمين غير التقنيين
• ميزانيتك لا تدعم تطوير واستضافة الواجهة الأمامية المخصصة

نظرة عامة على الهندسة المعمارية

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

تتكون بنية الهيدروجين من:

Remix (إطار عمل مكدس كامل): يعالج التوجيه والعرض من جانب الخادم وتحميل البيانات ومعالجة النماذج. يحدد كل مسار وظيفة loader (يتم تشغيلها على الخادم) ومكونًا (يتم عرضه على العميل).

واجهة برمجة التطبيقات Storefront API (GraphQL): مصدر البيانات الأساسي لمعلومات المنتج والمجموعات والبحث والمحتوى. تتدفق جميع بيانات المنتج عبر واجهة برمجة التطبيقات هذه بدلاً من الوصول المباشر إلى قاعدة البيانات.

واجهة برمجة تطبيقات حساب العميل: تتعامل مع مصادقة العميل وسجل الطلبات وإدارة الحساب. توفر واجهة برمجة التطبيقات (API) هذه تدفق مصادقة بدون كلمة مرور أصلي لـ Shopify.

Cart API: يدير عربة التسوق من خلال الحالة من جانب الخادم. تستخدم عمليات سلة التسوق (الإضافة والتحديث والإزالة) البنية التحتية لعربة التسوق الخاصة بـ Shopify.

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

تدفق البيانات

إعداد المشروع

إنشاء مشروع الهيدروجين

قم ببناء مشروع هيدروجين جديد باستخدام Shopify CLI:

قم بتشغيل Shopify Hydrogen CLI مع npx shopify hydrogen init لإنشاء مشروع جديد. يطالب سطر الأوامر بما يلي:

1. اسم المشروع: اسم واجهة متجرك
2. القالب: الهيكل العظمي (الحد الأدنى)، أو المتجر التجريبي (المثال الكامل)، أو المخصص
3. اللغة: TypeScript (مستحسن) أو JavaScript
4. التصميم: Tailwind CSS، أو وحدات CSS، أو Vanilla CSS
5. بيانات اعتماد Storefront API: نطاق المتجر ورمز واجهة برمجة التطبيقات

هيكل المشروع

يتبع مشروع الهيدروجين اتفاقية الريمكس:

اتصال API بواجهة المتجر

قم بتكوين اتصال Storefront API في hydrogen.config.ts:

• نطاق المتجر: نطاق myshopify.com الخاص بك
• رمز Storefront API المميز: رمز الوصول العام (آمن للاستخدام من جانب العميل)
• إصدار API: إصدار Storefront API (على سبيل المثال، 2026-01)
• البلد/اللغة الافتراضية: للتسعير والمحتوى المترجمين

بناء الصفحات الأساسية

صفحة قائمة المنتجات

تستخدم صفحة المجموعة وظيفة loader لجلب المنتجات من Storefront API:

تتلقى وظيفة المُحمل مقبض المجموعة من معلمات URL، وتقوم بالاستعلام عن واجهة برمجة تطبيقات Storefront مع ترقيم الصفحات (أول منتجات N)، وتقوم بإرجاع بيانات المجموعة. يعرض المكون شبكة منتجات سريعة الاستجابة تحتوي على صور وعناوين وأسعار ومعلومات متغيرة.

الاعتبارات الرئيسية:

• ترقيم الصفحات: استخدم ترقيم الصفحات المستند إلى المؤشر (تستخدم واجهة برمجة التطبيقات Storefront API اتصالات بنمط الترحيل)
• التصفية: تطبيق عوامل التصفية عبر الوسيطة filters في استعلام المنتجات
• الفرز: دعم السعر والعنوان والأكثر مبيعًا وفرز مدى الصلة بالموضوع
• التمرير اللانهائي أو "تحميل المزيد": جلب صفحات إضافية دون إعادة تحميل الصفحة بالكامل

صفحة تفاصيل المنتج

تجلب صفحة المنتج منتجًا واحدًا بجميع المتغيرات والصور وحقول التعريف:

يقوم المُحمل بالاستعلام عن المنتج عن طريق المقبض، بما في ذلك المتغيرات مع الأسعار والصور (ذات الأحجام المستجيبة) وأي حقول تعريف تحتوي على معلومات موسعة عن المنتج. يعرض المكون معرض صور، ومحدد متغير، وعرض السعر، وزر إضافة إلى سلة التسوق.

تنفيذ السلة

يوفر الهيدروجين أدوات مساعدة للعربة من خلال مكون CartForm:

يقوم CartForm بتغليف عمليات سلة التسوق (إضافة، تحديث، إزالة) كنماذج إرسال تعمل بدون JavaScript (تحسين تدريجي). يتم تخزين حالة سلة التسوق من جانب الخادم في البنية التحتية لعربة التسوق في Shopify، مما يضمن الاتساق عبر علامات التبويب والأجهزة.

عمليات العربة:

تحسين الأداء

العرض من جانب الخادم

يعمل الهيدروجين على تعزيز تدفق SSR الخاص بـ Remix للحصول على وقت سريع للبايت الأول (TTFB):

• البث: يرسل الخادم غلاف HTML على الفور، ثم يقوم بدفق المحتوى الديناميكي أثناء تحميل البيانات
• رؤوس ذاكرة التخزين المؤقت: قم بتعيين رؤوس Cache-Control لكل مسار للتخزين المؤقت لـ CDN
• Stale-while-revalidate: قم بعرض المحتوى المخزن مؤقتًا على الفور أثناء التحديث في الخلفية

تحسين الصورة

استخدم المكون Image من @shopify/hydrogen للحصول على صور محسنة:

• إنشاء srcset تلقائي للصور سريعة الاستجابة
• تسليم تنسيق WebP/AVIF بناءً على دعم المتصفح
• التحميل البطيء للصور الموجودة في الجزء السفلي من الصفحة
• العنصر النائب غير واضح الصور أثناء التحميل

تقسيم الكود

قم بإعادة المزج تلقائيًا لتقسيم التعليمات البرمجية حسب المسار. التحسين الإضافي:

• استخدم الواردات الديناميكية للمكونات الثقيلة (معارض الصور، والعارضات ثلاثية الأبعاد)
• نصوص برمجية تابعة لجهات خارجية يتم تحميلها بشكل بطيء (التحليلات وأدوات الدردشة) بعد تحميل الصفحة
• تصغير JavaScript من جانب العميل باستخدام مكونات React Server

معايير الأداء

أداء الهيدروجين النموذجي مقارنة بالموضوعات السائلة:

النشر باستخدام الأكسجين

ما هو الأكسجين؟

Oxygen عبارة عن منصة استضافة Shopify مصممة خصيصًا لواجهات متاجر الهيدروجين. يتم نشره على شبكة حافة عالمية مع:

• القياس التلقائي على أساس حركة المرور
• حماية DDoS مدمجة
• إدارة شهادات SSL/TLS
• تكامل CI/CD مع GitHub
• إدارة متغيرات البيئة
• معاينة عمليات النشر لطلبات السحب

عملية النشر

1. قم بتوصيل مستودع GitHub الخاص بك بـ Oxygen عبر مسؤول Shopify
2. يؤدي الضغط إلى الفرع الرئيسي إلى تفعيل النشر التلقائي
3. تنشئ طلبات السحب عناوين URL للمعاينة للاختبار
4. تتم إدارة متغيرات البيئة من خلال مسؤول Shopify
5. يتم تكوين المجالات المخصصة باستخدام سجلات DNS CNAME

استضافة بديلة

بينما تم تحسين Oxygen للهيدروجين، يمكنك النشر على أي استضافة متوافقة مع Node.js:

• Vercel: دعم ريمكس ممتاز مع وظائف الحافة
• Cloudflare Workers: نشر الحافة مع وقت تشغيل العمال
• Fly.io: نشر قائم على الحاويات مع توزيع عالمي
• AWS: نشر ECS أو Lambda أو App Runner

تكامل نظام إدارة المحتوى (CMS) بدون رأس

هندسة المحتوى

تتكامل واجهات متاجر الهيدروجين عادةً مع منصات CMS مقطوعة الرأس للمحتوى غير المنتج:

عمليات تكامل CMS الشائعة

• العقل: معاينات في الوقت الفعلي باستخدام Sanity Studio المضمن في الهيدروجين
• المحتوى: تكامل GraphQL API مع نمذجة المحتوى
• Strapi: خيار مستضاف ذاتيًا مع REST أو GraphQL API
• Shopify Metaobjects: محتوى Shopify الأصلي لمتطلبات أبسط

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

تطبيقات تحسين محركات البحث المهمة

• العرض من جانب الخادم: يتم عرض كل المحتوى على الخادم لبرامج زحف محركات البحث
• العلامات الوصفية: استخدم تصدير meta الخاص بـ Remix للعنوان والوصف وعلامات الرسم البياني المفتوح
• البيانات المنظمة: مخططات JSON-LD للمنتج وقائمة مسارات التنقل والمؤسسة
• خريطة الموقع: يتم إنشاؤها ديناميكيًا من بيانات Storefront API
• عناوين URL الأساسية: منع المحتوى المكرر عبر المتغيرات والمجموعات
• Hreflang: يتم تنفيذه لواجهات متاجر Markets Pro متعددة اللغات

خدمات الهيدروجين ECOSIRE

يتطلب إنشاء واجهة متجر Shopify بدون رأس خبرة في تطوير الواجهة الأمامية جنبًا إلى جنب مع استراتيجية التجارة. يقوم فريق ECOSIRE تطوير السمات المخصصة في Shopify ببناء واجهات متاجر الهيدروجين بدءًا من المفهوم وحتى الإطلاق. تضمن خدمات تحسين السرعة أن واجهة متجرك بدون واجهة تلبي أهداف مؤشرات أداء الويب الأساسية، كما أن دعمنا المستمر يحافظ على واجهة متجرك ويطورها مع تقدم منصة Shopify.

القراءة ذات الصلة

• Shopify التجارة بلا رأس مع الهيدروجين
• دليل تكامل واجهة برمجة تطبيقات Shopify
• دليل تحسين سرعة الصفحة في Shopify
• دليل تطوير تطبيقات Shopify
• دليل تخصيص سمة Shopify

هل يعني الاستغناء عن الهيدروجين فقدان محرر السمات في Shopify؟

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

هل يمكنني استخدام الهيدروجين لجزء فقط من متجر Shopify الخاص بي؟

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

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

عادةً ما تكلف بنية Hydrogen المخصصة ما بين 2 إلى 5 مرات أكثر من سمة Liquid المخصصة نظرًا لمتطلبات تطوير React وإعداد البنية التحتية. ومع ذلك، تكون سرعة التكرار المستمر أسرع بالنسبة للفرق التي تتمتع بخبرة React، ويمكن ترجمة فوائد الأداء إلى تحسينات تحويل قابلة للقياس تبرر الاستثمار.