متجرك على Shopify Plus ينطلق برصيد Lighthouse بقيمة 98. شعر النشر بأنه مثالي—SSR الهيدروجين بالبث، LCP أقل من 900 ميلي ثانية، بدون تحول تخطيط. بعد ثلاثة أشهر، ينخفض تحويل الدفع بنسبة 14%. تلوم فريق المنتج API السلة. يشير الهندسة إلى نصوص الطرف الثالث. تطرح المالية تساؤلات حول إعادة النشر ذات الستة أرقام. شهدت بالضبط هذا التسلسل في 87 من أكثر من 400 عملية بناء headless Shopify التي قمنا بتدقيقها منذ عام 2020. الفرق بين المتاجر التي حققت 1 مليون دولار ARR في أربعة أشهر وتلك التي توقفت عن العمل لمدة ربعين ليس الهيدروجين مقابل Next.js—إنه ثلاثة قرارات هجرة يخطئ فيها معظم الفريق قبل الالتزام الأول. إليك ما علمتنا به 400 عملية بناء حول الفخاخ التي لا تذكرها أي وثائق إطار عمل.

هذا الدليل هو كل شيء كنت أتمنى أن يكون قد سُلم إلي في عام 2020 عندما بنيت أول متجر headless Shopify لي باستخدام إعداد Next.js مرتجل وواجهة برمجة التطبيقات REST القديمة. إنها المعرفة المركزة من بناء المتاجر للعلامات التجارية DTC وتجار الجملة B2B وتجار Shopify Plus enterprise. بعض هذا سيؤكد ما تشك فيه بالفعل. بعضها سيطعن في الحكمة التقليدية التي كنت تقرأها على Twitter.

فلنبدأ.

جدول المحتويات

دليل تطوير Headless Shopify 2026: الهيدروجين و Next.js وما بعده

ما يعنيه Headless Shopify فعلاً في 2026

Headless Shopify يعني فصل طبقة العرض الأمامية عن خلفية Shopify. تحافظ على Shopify لما تجيده حقاً — الجرد والطلبات والمدفوعات والتنفيذ — واستبدل مواضيع Liquid بواجهة أمامية مخصصة تتحدث إلى Storefront API.

لكن إليك الشيء الذي لن تخبرك به معظم المقالات: headless Shopify في 2026 حيوان مختلف تماماً عما كان عليه قبل سنتين. ثلاثة تحولات غيرت بشكل أساسي المشهد:

  1. الهيدروجين 2 ناضج. إطار عمل Shopify القائم على React والذي يعمل على Oxygen (منصة الاستضافة الخاصة بهم) قد استقر كثيراً منذ إطلاقه غير المستقر في 2023. إنه الآن على Remix تحت الغطاء ويتم شحنه مع إعدادات معقولة.

  2. وصلت Storefront API إلى الإصدار 2025-04. أحضر هذا Customer Account API v2 وتحسينات البحث التنبؤية و — بشكل حاسم — عمليات السلة من جانب الخادم التي لا تتطلب JavaScript من جانب العميل.

  3. استبدلت Checkout Extensions checkout.liquid بالكامل. اعتباراً من أغسطس 2025، يجب على جميع متاجر Shopify Plus استخدام Checkout Extensibility. لا مزيد من تخصيص الدفع السائل. وحده، دفع هذا آلاف المتاجر نحو هندسات معمارية headless.

النموذج الذهني الذي أستخدمه: Shopify هو محرك التجارة الخاص بك. واجهتك الأمامية هي واجهة مخصصة الغرض تحدث لسحب البيانات من هذا المحرك. كل شيء بينهما هو نداءات API واستراتيجية التخزين المؤقت.

مجموعة البنية المعمارية

إعداد headless Shopify نموذجي في 2026 يبدو كالتالي:

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   Frontend App   │────▶│  Storefront API   │────▶│  Shopify Backend │
│  (Hydrogen/Next) │     │  (GraphQL)        │     │  (Admin, Orders) │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │                                                  │
        ▼                                                  ▼
┌─────────────────┐                              ┌─────────────────┐
│   Headless CMS   │                              │  Checkout Ext.  │
│  (Sanity/Contentful)                            │  (Shopify UI Ext)│
└─────────────────┘                              └─────────────────┘

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

Storefront API: أفضل صديق جديد لك

Storefront API هو واجهة برمجية رسومية عامة الغرض مصممة خصيصاً للتجارب التي تواجه العملاء. إنها متميزة عن Admin API، التي تتعامل مع العمليات الخلفية. فهم هذا التمييز حاسم.

ما يمكنك فعله

query ProductPage($handle: String!) {
  product(handle: $handle) {
    id
    title
    description
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    variants(first: 100) {
      edges {
        node {
          id
          title
          availableForSale
          selectedOptions {
            name
            value
          }
          price {
            amount
            currencyCode
          }
        }
      }
    }
    metafields(identifiers: [
      { namespace: "custom", key: "sizing_guide" },
      { namespace: "custom", key: "material_info" }
    ]) {
      key
      value
      type
    }
    media(first: 20) {
      edges {
        node {
          ... on MediaImage {
            image {
              url
              altText
              width
              height
            }
          }
          ... on Video {
            sources {
              url
              mimeType
            }
          }
        }
      }
    }
  }
}

حدود معدل التخزين المؤقت

اعتباراً من 2026، تسمح Storefront API بـ 100 طلب في الثانية لكل متجر لرموز الوصول العامة (بزيادة من 60 في أوائل 2024). تحصل رموز الوصول الخاصة على حدود أعلى. لكنك لا يجب أن تضرب هذه الحدود على أي حال — إذا كنت تفعل، فإن استراتيجية التخزين المؤقت الخاصة بك مكسورة.

إليك ما أفعله في كل مشروع:

  • التخزين المؤقت الكامل للصفحة على مستوى CDN (Vercel أو Cloudflare أو Oxygen) مع رؤوس stale-while-revalidate
  • التخزين المؤقت لطبقة البيانات مع TTLs مدتها 60 ثانية لبيانات المنتج و 300 ثانية لبيانات المجموعة
  • عمليات السلة لم تُخزن مؤقتاً أبداً — هذه تضرب API مباشرة في كل مرة
  • فحوصات الجرد تستخدم آلية استقصاء خفيفة أو webhooks لإبطال بيانات الأسهم القديمة
// مثال: استراتيجية التخزين المؤقت لاستعلامات المنتج في Next.js
export async function getProduct(handle: string) {
  const data = await shopifyFetch({
    query: PRODUCT_QUERY,
    variables: { handle },
    cache: 'force-cache',
    next: { revalidate: 60, tags: [`product-${handle}`] },
  });
  return data.product;
}

Hydrogen مقابل Next.js Commerce: المقارنة الحقيقية

هذا هو السؤال الذي أتلقاه معظم الوقت. والإجابة الصادقة هي: هذا يعتمد على فريقك والجدول الزمني والتفضيلات الاستضافة. لكن إليك البيانات.

| عامل | Hydrogen 2 (Remix/Oxygen) | Next.js Commerce (Vercel) | |--------|--------------------------|---------------------------|| | الإطار | Remix (React) | Next.js 15 (React) | | الاستضافة | Oxygen (Shopify) أو self-host | Vercel أو Netlify أو self-host | | تكامل Shopify | طرف أول وعميق | محافظ مدعومة من المجتمع | | منحنى التعلم | معتدل (أنماط Remix) | أقل (إذا كان الفريق يعرف Next.js) | | مرونة CMS | جيد لكن Shopify-centric | ممتاز — النظام البيئي ضخم | | وسيط LCP (بيانات لدينا) | 0.8 ثانية | 0.7 ثانية | | وسيط TTFB | 120 ميلي ثانية (Oxygen) | 90 ميلي ثانية (Vercel Edge) | | التكلفة بالمقياس | طبقة Oxygen المجانية سخية | Vercel Pro 20 دولار/شهر، Enterprise $$$ | | تكامل الدفع | سلة أصلية → تدفق الدفع | يتطلب إعداد سلة Storefront API | | مكونات النظام البيئي | النمو، حوالي 200 حزمة | ضخم، 10k+ حزمة | | حجم المجتمع | حوالي 15k نجمة GitHub | حوالي 40k نجمة GitHub |

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

اختر Hydrogen إذا:

  • فريقك مرتاح لأنماط Remix loader/action
  • تريد تجربة Shopify الأصلية الأقرب
  • أنت متاجر Shopify Plus يريد استضافة Oxygen المضمنة
  • لا تحتاج إلى محتوى غير تجاري ثقيل (مدونة وتحرير وما إلى ذلك)

متى اختار Next.js

اختر Next.js إذا:

  • فريقك يشحن بالفعل تطبيقات Next.js
  • تحتاج إلى تكامل CMS عميق بما يتجاوز metafields من Shopify
  • تريد أقصى مرونة في الاستضافة
  • تبني تجربة ماركة ثقيلة المحتوى إلى جانب التجارة
  • تخطط لتبديل خلفيات التجارة في المستقبل

سأكون صريحاً: في 70٪ من المتاجر التي بنيتها في السنة الماضية، كان Next.js هو الخيار الصحيح. ليس لأنه متفوق من الناحية التقنية — إنه ليس كذلك، بالضرورة — لكن لأن حوض المواهب أكبر بـ 5 مرات والنظام البيئي يحتوي على حلول لحالات الحافة. عندما يريد فريق التسويق الخاص بك مكتبة رسوم متحركة معينة أو يتطلب وكيل SEO الخاص بهم هيكل علامة تعريف معين، ستجد الإجابة بشكل أسرع في أراضي Next.js.

ومع ذلك، متاجر Hydrogen على Oxygen لديها بساطة نشر يصعب التغلب عليها. ادفع إلى main، إنه مباشر. بدون بناء التكوين، بدون بدء بارد من وظيفة edge للتصحيح.

دليل تطوير Headless Shopify 2026: الهيدروجين و Next.js وما بعده - الهندسة المعمارية

تحقيق LCP أقل من ثانية واحدة

هنا حيث يلبي المطاط الطريق. تستند الحالة التجارية بأكملها لـ headless Shopify — التبرير المالي الفعلي — على الأداء. والرقم الذي تحتاج إلى الوصول إليه هو Largest Contentful Paint أقل من ثانية واحدة على الهاتف المحمول.

إليك السبب: كل تحسن 100 ميلي ثانية من LCP يتعلق بتقريباً زيادة معدل التحويل بنسبة 1٪، وفقاً لدراسة Shopify الخاصة بالأداء لعام 2025. متجر يجني 5 ملايين دولار في السنة يذهب من 2.5s LCP (موضوع Liquid نموذجي) إلى 0.9s LCP يمكن أن يتوقع تقريباً رفع بنسبة 15٪. هذا 750 ألف دولار في إيرادات إضافية.

بيانات لدينا عبر 400+ موقع تؤكد هذا النطاق. متاجر Headless أسرع بنسبة 60-75٪ من مواضيع Liquid في المتوسط، مقاس ببيانات Core Web Vitals من المستخدمين الحقيقيين في تقارير CrUX.

دليل الأداء

إليك بالضبط كيف نحقق بشكل ثابت LCP أقل من ثانية واحدة:

1. خادم-render المسار الحرج

// مكون خادم Next.js App Router — لصفحة المنتج
export default async function ProductPage({ params }: { params: { handle: string } }) {
  const product = await getProduct(params.handle);
  
  return (
    <main>
      <ProductHero product={product} />
      <Suspense fallback={<PriceSkeleton />}>
        <ProductPricing productId={product.id} />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={product.id} />
      </Suspense>
    </main>
  );
}

2. تحسين الصور بقوة

يدعم CDN من Shopify معاملات width و height و crop. استخدمها. لا ترسل صورة بطل بحجم 2000 بكسل إلى viewport 375 بكسل.

function getOptimizedImageUrl(url: string, width: number) {
  const imageUrl = new URL(url);
  imageUrl.searchParams.set('width', String(width));
  imageUrl.searchParams.set('format', 'webp');
  return imageUrl.toString();
}

3. تحميل صورة LCP مسبقاً

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

4. CSS الحرج إلى الداخل، أجل كل شيء آخر

نحن نحتفظ بـ CSS فوق الطي تحت 14KB (جولة TCP واحدة). كل شيء آخر يحميل بشكل غير متزامن.

5. العرض من جانب الحافة

عمليات Vercel Edge Functions وعامل العمل في وقت التشغيل من Oxygen تنفذ على الحافة، مما يعطيك TTFB أقل من 100ms عالمياً. هذا هو أكبر رافعة أداء يمكنك سحبها.

6. Prefetch على Intent

لا تقم بـ prefetch لكل شيء على viewport. Prefetch عند hover/touch-start. هذا يقطع النطاق الترددي غير الضروري بحوالي 40٪ مع الحفاظ على الشعور الفوري.

Checkout Extensions وعصر ما بعد Checkout.liquid

إليك التغيير الذي أرغم يد العديد من التجار: اعتباراً من أغسطس 2025، غروب الشمس Shopify في checkout.liquid على متاجر Plus. إذا كان لديك تعديلات دفع مخصصة — وكان لدى معظم تجار Plus — فقد كان عليك الهجرة إلى Checkout Extensions.

Checkout Extensions استخدم إطار عمل UI Extensions من Shopify. تكتب مكونات تشبه React التي تُعاد داخل دفع Shopify ضمن نقاط التوسيع المحددة (قبل الشراء، بعد الشراء، الشحن، الدفع، وما إلى ذلك).

// مثال: امتداد بيع إضافي بعد الشراء
import { useApi, reactExtension, BlockStack, Text, Button } from '@shopify/ui-extensions-react/checkout';

export default reactExtension('purchase.checkout.block.render', () => <UpsellBlock />);

function UpsellBlock() {
  const { cost, lines } = useApi();
  
  return (
    <BlockStack>
      <Text size="medium">أضف الملحقات المطابقة؟</Text>
      <Button onPress={() => { /* منطق الإضافة إلى السلة */ }}>
        أضف مقابل 19.99 دولار
      </Button>
    </BlockStack>
  );
}

الشيء الرئيسي الذي يجب فهمه: Checkout Extensions تعمل بنفس الطريقة سواء كنت headless أو باستخدام موضوع Liquid. تسلم واجهتك الأمامية headless إلى دفع Shopify، وتعمل الامتدادات هناك. وهذا في الواقع ميزة كبيرة للنهج headless — متجرك الأمامي مخصص بالكامل، لكن الدفع يظل مستضيفاً Shopify (متوافق مع PCI، تم الحفاظ عليه بواسطة Shopify، وما إلى ذلك).

استراتيجية هجرة Shopify Plus

الهجرة من متجر Shopify Plus موجود إلى headless هي عملية مرحلية. لا تحاول فعل كل شيء في وقت واحد. إليك النهج الذي نجح بشكل أفضل عبر مشاريعنا:

المرحلة 1: الأساس (الأسبوع 1-3)

  • قم بإعداد إطار عمل الواجهة الأمامية (Next.js أو Hydrogen)
  • تطبيق طبقة توصيل Storefront API مع التخزين المؤقت
  • بناء نظام التصميم / مكتبة المكونات
  • إعداد خط أنابيب CI/CD

المرحلة 2: التجارة الأساسية (الأسبوع 4-8)

  • صفحات قوائم المنتجات (المجموعات)
  • صفحات تفاصيل المنتج
  • وظيفة السلة
  • البحث (استخدم Shopify's Predictive Search API أو طرف ثالث مثل Algolia)
  • صفحات الحساب عبر Customer Account API

المرحلة 3: المحتوى والتسويق (الأسبوع 9-11)

  • تكامل CMS للصفحات غير التجارية
  • قسم المدونة / التحرير
  • منشئ صفحات الهبوط لفريق التسويق
  • هجرة SEO (عمليات إعادة التوجيه 301، sitemap، البيانات المنظمة)

المرحلة 4: الإطلاق والتحسين (الأسبوع 12-14)

  • تدقيق الأداء والتحسين
  • إعداد اختبار A/B
  • هجرة التحليلات (GA4، التتبع من جانب الخادم)
  • هجرة حركة المرور التدريجية عبر أعلام الميزة أو اختبار الانقسام

الجدول الزمني الإجمالي: 12-14 أسبوع لمتجر Shopify Plus نموذجي. متاجر enterprise ذات فهارس معقدة (50 ألف+ SKU) أو تخصيص ثقيل يمكنها أن تستغرق 16-20 أسبوع.

عتبة 1 مليون دولار ARR: متى يكون Headless منطقياً من الناحية المالية

Headless ليس مجانياً. تطوير الواجهة الأمامية المخصصة يكلف أكثر من تثبيت موضوع Liquid. يتطلب الصيانة المستمرة وقت المطور. فمتى تعمل الرياضيات؟

بناءً على بيانات لدينا: 1 مليون دولار ARR هو العتبة حيث يبدأ headless Shopify يكتسب معنى مالي واضح.

إليك الرياضيات:

مستوى الإيرادات رفع معدل التحويل المقدر كسب الإيرادات تكلفة بناء Headless التكلفة السنوية المستمرة الجدول الزمني ROI
500 ألف دولار ARR 10-15٪ 50-75 ألف دولار 80-150 ألف دولار 24-48 ألف دولار 18-24 شهر
1 مليون دولار ARR 10-15٪ 100-150 ألف دولار 80-150 ألف دولار 24-48 ألف دولار 8-14 شهر
3 ملايين دولار ARR 10-15٪ 300-450 ألف دولار 120-200 ألف دولار 36-60 ألف دولار 4-6 أشهر
10 ملايين دولار ARR 10-15٪ 1-1.5 مليون دولار 150-300 ألف دولار 48-96 ألف دولار 2-3 أشهر

أقل من 1 مليون دولار، تكون أفضل حالاً في الاستثمار في تحسين معدل التحويل على موضوع Liquid المبني جيداً. فوق 1 مليون دولار، تتضاعف مكاسب الأداء بسرعة كافية لتبرير الاستثمار. فوق 3 ملايين دولار، عدم الذهاب headless يترك أموالاً حقيقية على الطاولة.

للتفاصيل التسعير على بناء headless، تحقق من صفحة التسعير الخاصة بنا — نحن شفافون حول نطاقات المشاريع.

اختيار وكالة: Naturaily و Aalpha وما بعده

إذا كنت تقيّم الوكالات لعمل headless Shopify، فإليك تقييمي الصادق للمشهد في 2026.

Naturaily هي وكالة مقرها بولندا بنيت سمعة قوية لـ headless commerce، خاصة مع Next.js و Vue Storefront. نقاط قوتهم في الوسط — العلامات التجارية التي تجني 1-10 ملايين دولار تحتاج إلى بناء احترافي بدون تسعير enterprise. هم أكفاء من الناحية التقنية ولديهم خبرة جيدة Shopify Storefront API. عندما يكافحان: سير عمل B2B عالي التخصيص وإعدادات Shopify متعددة الأسواق.

Aalpha هي شركة تطوير مقرها الهند بتركيز أوسع — يقومون بتطبيقات الهاتف المحمول والبرامج الضخمة وـ headless commerce. معدلاتهم أقل بكثير (غالباً 40-60٪ أقل من الوكالات الغربية)، مما يجعلهم جذابين للمشاريع التي تركز على الميزانية. المقايضة عادة في الحمل الإداري وصقل التصميم. إذا كان لديك فريق تصميم داخلي قوي ويمكنك إدارة المشروع بشكل وثيق، يمكنهم تقديم عمل تقني صلب.

كيف نقارن في Social Animal: نتخصص حصراً في تطوير الويب headless — ليس فقط Shopify، لكن الطيف الكامل لـ تطوير headless CMS وعمل الإطار بما في ذلك Next.js و Astro. منطقة حلولنا الحلوة هي العلامات التجارية والشركات التي تحتاج إلى خبرة تقنية عميقة بدون الحمل الإداري لوكالة كبيرة. إذا كنت فضولياً حول الملاءمة، تواصل معنا — سنخبرك بصراحة إذا كنا المتجر المناسب لمشروعك.

عامل Social Animal Naturaily Aalpha
التخصص Headless web (عميق) Headless commerce + web تطوير كامل
أطر عمل أساسية Next.js و Astro و Hydrogen Next.js و Vue Storefront Next.js و React Native
موقع الفريق مقرها الولايات المتحدة بولندا الهند
نطاق المشروع النموذجي 80-250 ألف دولار 60-200 ألف دولار 25-100 ألف دولار
خبرة Shopify Plus نعم (400+ مواقع headless) نعم نعم
الأفضل ل المتاجر الحرجة للأداء التجارة headless للسوق المتوسط بناء الميزانية الواعية

المتاجر المخصصة مع Astro وأطر عمل أخرى

إليك شيء لن تخبرك به معظم أدلة Shopify headless: لا تحتاج إلى استخدام React.

لقد بنينا عدة متاجر Shopify مع Astro — خاصة للعلامات التجارية حيث يكون المحتوى والافتتاحية مهمة مثل التجارة. تعني بنية الجزيرة من Astro أنك تشحن JavaScript صفر بشكل افتراضي وتحتفل فقط بالأجزاء التفاعلية (السلة ومختاري المنتجات والبحث).

النتائج؟ LCP باستمرار أقل من 0.6 ثانية. إجمالي وزن الصفحة أقل من 100 كيلوبايت. إنه سريع بشكل سخيف.

---
// مكون Astro لبطاقة منتج Shopify
import { getProduct } from '../lib/shopify';

const product = await getProduct(Astro.params.handle);
---

<article class="product-card">
  <img 
    src={product.featuredImage.url + '&width=600'}
    alt={product.featuredImage.altText}
    width="600"
    height="600"
    loading="lazy"
  />
  <h2>{product.title}</h2>
  <p class="price">${product.priceRange.minVariantPrice.amount}</p>
  
  <!-- فقط هذا المكون يشحن JavaScript -->
  <AddToCart client:visible productId={product.id} />
</article>

المقايضة: نظام Astro البيئي لـ commerce أصغر. ستكتب المزيد من الكود المخصص لإدارة السلة والمصادقة والبحث. لكن إذا كانت الأداء هي مقياسك الأساسي وفريقك مرتاح مع العمل الإضافي، فهو خيار شرعي.

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

هل headless Shopify يستحق الأمر بالنسبة للمتاجر الصغيرة؟ بالنسبة للمتاجر أقل من 500 ألف دولار ARR، عادة لا. تكاليف التطوير والصيانة تفوق تحسينات معدل التحويل. أنت أفضل حالاً مع موضوع Liquid سريع ومحسّن جيداً مثل Dawn. بمجرد عبور 1 مليون دولار ARR، يتحول الاقتصاد بشكل قاطع لصالح headless.

كم تكلفة بناء headless Shopify في 2026؟ توقع 80 ألف دولار - 300 ألف دولار للبناء الأولي اعتماداً على التعقيد وموقع الوكالة ونطاق الميزة. الصيانة المستمرة تدور 2 ألف دولار - 8 آلاف دولار شهرياً. يمكن للوكالات في جنوب آسيا تقديم 25 ألف دولار - 80 ألف دولار، لكن ستحتاج عادة إلى إدارة مشروع داخلية أقوى وضمان جودة.

هل يمكنني استخدام دفع Shopify مع متجر headless؟ نعم، ويجب أن تفعل. دفع Shopify متوافق مع PCI واختبر في المعارك ويتعامل مع معالجة الدفع. تقوم واجهتك الأمامية headless بإنشاء سلة عبر Storefront API، ثم إعادة التوجيه إلى دفع Shopify المستضاف. تتيح لك Checkout Extensions تخصيص التجربة ضمن نقاط التوسيع من Shopify.

ما هو فرق الأداء بين headless والمواضيع السائلة؟ تظهر بيانات لدينا عبر 400+ موقع أن متاجر headless أسرع بنسبة 60-75٪ من مواضيع Liquid على مقاييس Core Web Vitals. على وجه التحديد، ينخفض وسيط LCP من 2.3-3.5 ثانية (Liquid) إلى 0.7-1.0 ثانية (headless). هذا يترجم إلى تحسن معدل التحويل بنسبة 10-15٪ في المتوسط.

هل يجب أن أستخدم Hydrogen أو Next.js لمتجر Shopify headless؟ إذا كان فريقك يعرف Next.js، استخدم Next.js. إذا كنت تبدأ من الصفر وتريد أكثر تجارب Shopify المدمجة مع الحد الأدنى من التكوين، فإن Hydrogen على Oxygen ممتاز. فرق الأداء بينهم مهمل — يجب أن تدفع خبرة الفريق واحتياجات النظام البيئي قرارك.

هل أحتاج Shopify Plus لـ headless؟ من الناحية الفنية، لا. Storefront API متاح في جميع خطط Shopify. لكن في الممارسة العملية، معظم بناء headless يستفيد من ميزات Plus: Checkout Extensions و Scripts و Organization API لإعدادات متعددة المتاجر ومعدلات API أعلى. على مستوى الإيرادات حيث headless منطقي (1 مليون دولار +)، يجب أن تكون على Plus على أي حال.

كم من الوقت تستغرق هجرة headless Shopify؟ عملية هجرة Shopify Plus نموذجية إلى headless تستغرق 12-14 أسبوع مع فريق ذي خبرة. متاجر Enterprise ذات فهارس معقدة أو تخصيص ثقيل أو إعدادات متعددة الأسواق يمكنها أن تستغرق 16-20 أسبوع. لا دع أحد يخبرك أنه 4 أسابيع وظيفة — هذا كيف ينتهي بك الحال مع إطلاق مكسور.

ماذا يحدث لتطبيقات Shopify الخاصة بي عندما أذهب headless؟ هذا هو أحد أكبر المشاكل. تحقن العديد من تطبيقات Shopify نصوصاً برمجية في مواضيع Liquid، التي لن تعمل على واجهة أمامية headless. ستحتاج إلى تقييم كل تطبيق: يوفر البعض واجهات برمجة تطبيقات يمكنك دمجها مباشرة، والبعض لديه إصدارات متوافقة مع headless، والبعض سيحتاج إلى استبداله بكود مخصص أو خدمات بديلة. خطة لتدقيق التطبيق والهجرة كجزء من نطاق المشروع.

هل يمكنني استخدام Astro أو أطر عمل غير React أخرى مع Shopify Storefront API؟ قطعا. Storefront API هي واجهة برمجية GraphQL قياسية — أي إطار عمل يمكنه تقديم طلبات HTTP يمكنه استخدامه. لقد بنينا متاجر Shopify مع Astro و SvelteKit وحتى JavaScript عادي. المقايضة هي أن أدوات Shopify الرسمية (Hydrogen وأدوات السلة وما إلى ذلك) قائمة على React، لذا ستكتب المزيد من كود التكامل المخصص مع الأطر الأخرى.