الهيدروجين مقابل السائل: دليل المهندس الفني للهجرة

إذا كنت مديرًا للتكنولوجيا أو مهندسًا رئيسيًا، فمن المحتمل أنك وصلت إلى “السقف السائل”. السائل رائع للمتاجر البسيطة. ولكن عندما تحاول تنفيذ إدارة الحالة المعقدة، أو التخصيص، أو تكامل واجهة برمجة تطبيقات الطرف الثالث، يصبح الأمر في حالة من الفوضى مثل “Spaghetti jQuery”. ** Shopify الهيدروجين ** (مبني على ريمكس) هو الجواب. انها ليست مجرد “موضوع”؛ إنه تطبيق متكامل.

التحول المعماري

في Liquid، كل شيء يحدث على خوادم Shopify. لديك سيطرة محدودة. في الهيدروجين، أنت تمتلك Edge.

الرسم البياني TD
    المستخدم [متصفح المستخدم] -->|الطلب| الحافة[عامل Cloudflare (الأكسجين)]
    
    رسم بياني فرعي "منطق التطبيق الخاص بك"
    الحافة -->|فحص ذاكرة التخزين المؤقت| ذاكرة التخزين المؤقت{هل تم تخزينها مؤقتًا؟}
    ذاكرة التخزين المؤقت -->|نعم| المستخدم
    ذاكرة التخزين المؤقت -->|لا| ريمكس [محمل ريمكس]
    نهاية
    
    ريمكس -->|GraphQL| واجهة المتجر[Shopify Storefront API]
    ريمكس -->|الراحة| الطرف الثالث[ERP / CMS / PIM]
    
    واجهة المتجر --> ريمكس
    الطرف الثالث -> ريمكس
    ريمكس -->|HTML Stream| المستخدم

لماذا هذا مهم

باستخدام Liquid، لا يمكنك جلب البيانات بسهولة من نظام تخطيط موارد المؤسسات (ERP) خارجي قبل عرض الصفحة. يتعين عليك استخدام الجلب من جانب العميل (useEffect)، مما يؤدي إلى تحول التخطيط التراكمي (CLS) وتجربة مستخدم سيئة. باستخدام الهيدروجين، نقوم بإحضار على الخادم. يرى المستخدم الصفحة المشكلة بالكامل والتي تحتوي على بيانات تخطيط موارد المؤسسات (ERP) على الفور.

مقارنة الميزات: حدود السائل

ميزة	سائل (تراث)	الهيدروجين (رد فعل/ريميكس)
التوجيه	جامدة (/المنتجات/*، /مجموعات/*)	ديناميكي (/المنتجات/اللون/الأزرق)
إدارة الدولة	لا شيء (الاعتماد على DOM)	قوية (السياق / زوستاند)
الاختبار	الانحدار البصري فقط	الوحدة وE2E (فيتست/كاتب مسرحي)
DX (تجربة التطوير)	ضعيف (تأخير مزامنة Themekit)	ممتاز (HMR، TypeScript)
الأداء	جيد (ولكن لا يمكن السيطرة عليه)	ممتاز (بث SSR)

دليل التنفيذ: طريقك الأول

في Liquid، تكون صفحة المنتج عبارة عن ملف ضخم يسمى “product.liquid”. في الهيدروجين، إنها وحدة طريق نظيفة.

// التطبيق/الطرق/($locale).products.$handle.tsx
استيراد { تأجيل } من '@shopify/remix-oxygen'؛
استيراد { في انتظار، useLoaderData } من '@remix-run/react'؛

// 1. المُحمل (جانب الخادم)
تصدير محمل دالة غير متزامنة ({params, context }: LoaderArgs) {
  const { Handle } = Params;
  
  // جلب البيانات المهمة (انتظرها)
  منتج ثابت = انتظار context.storefront.query(PRODUCT_QUERY, {
    المتغيرات: {المقبض}،
  });

  // جلب البيانات غير الهامة (دفقها)
  مراجعات const = context.yotpo.fetchReviews(product.id);

  إذا قام (! المنتج) بإلقاء استجابة جديدة (فارغة، { الحالة: 404 })؛

  تأجيل الإرجاع({ المنتج، المراجعات });
}

// 2. المكون (جانب العميل)
تصدير الوظيفة الافتراضية ProductPage () {
  const { المنتج، المراجعات } = useLoaderData();

  العودة (
    <div className="product-grid">
      <ProductGallery media={product.media.nodes} />
      <ProductDetails title={product.title} السعر={product.priceRange} />
      
      {/* 3. التشويق بسبب بث المحتوى */}
      <التشويق الاحتياطي={<ReviewsSkeleton />}>
        <في انتظار الحل={المراجعات}>
          {(بيانات) => <بيانات قائمة المراجعات={بيانات} />}
        </انتظر>
      </تشويق>
    </div>
  );
}

استراتيجية الهجرة: النمط الخانق

لا تقم بإعادة بناء موقعك بالكامل في يوم واحد. استخدم نمط التين الخانق.

1. المرحلة الأولى: إطلاق الهيدروجين على نطاق فرعي (experimental.brand.com).
2. المرحلة الثانية: توجيه حركة المرور لـ “المجموعة الجديدة” إلى الهيدروجين عبر Cloudflare Workers.
3. المرحلة 3: إبقاء الدفع والحساب في حالة سائلة (في الوقت الحالي). وهذا يقلل من المخاطر إلى ما يقرب من الصفر.

الخلاصة

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

---

---

هل تصطدم بالسقف؟

نحن متخصصون في عمليات نقل الهيدروجين عالية الأداء. قم بتوظيف مهندسينا.