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

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

دعنا ندخل إليها.

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

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond

ما يعنيه Shopify بدون رأس فعلاً في 2026

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

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

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

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

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

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

مكدس الهندسة المعمارية

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

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   تطبيق أمامي   │────▶│  Storefront API   │────▶│ خلفية Shopify  │
│  (Hydrogen/Next) │     │  (GraphQL)        │     │  (Admin, Orders) │
└─────────────────┘     └──────────────────┘     └─────────────────┘
        │                                                  │
        ▼                                                  ▼
┌─────────────────┐                              ┌─────────────────┐
│  CMS بدون رأس   │                              │  Checkout Ext.  │
│  (Sanity/Contentful)                            │  (Shopify UI Ext)│
└─────────────────┘                              └─────────────────┘

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

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

Storefront API هي واجهة برمجية GraphQL عامة تم تصميمها خصيصاً لتجارب مواجهة العملاء. تختلف عن 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 ثانية لبيانات المجموعة
  • عمليات السلة لا تُخزن مؤقتاً — تضرب واجهة برمجية مباشرة في كل مرة
  • فحوصات المخزون تستخدم آلية استقصاء خفيفة الوزن أو 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 ممتاز — النظام البيئي ضخم
**متوسط LCP (بيانات) ** 0.8s 0.7s
متوسط TTFB 120ms (Oxygen) 90ms (Vercel Edge)
التكلفة بالحجم الطبقة المجانية من Oxygen سخية Vercel Pro $20/mo و Enterprise $$$
تكامل الدفع سلة أصلية → تدفق الدفع يتطلب إعداد سلة Storefront API
مكونات النظام البيئي تنمو ~ 200 حزمة ضخمة، 10k+ حزمة
حجم المجتمع ~ 15k نجوم GitHub ~ 40k نجوم GitHub

متى تختار Hydrogen

اختر Hydrogen إذا:

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

متى تختار Next.js

اختر Next.js إذا:

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

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

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

Headless Shopify Development Guide 2026: Hydrogen, Next.js & Beyond - architecture

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

هنا حيث يلتقي المطاط بالطريق. تستقر جميع الحالات التجارية لـ Shopify بدون رأس — التبرير المالي الفعلي — على الأداء. والعدد الذي تحتاج إلى ضربه هو LCP أقل من ثانية على الهاتف المحمول.

إليك السبب: كل تحسن 100ms في 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. تقديم المسار الحرج من جانب الخادم

// 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 معاملات. استخدمها. لا تخدم صورة بطل 2000px إلى عرض الهاتف المحمول 375px.

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's worker runtime يعمل على الحافة، مما يعطيك TTFB أقل من 100ms عالمياً. هذا هو أكبر رافعة أداء يمكنك سحبها.

6. مسبقاً على النية

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

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

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

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

// مثال: ملحق بيع إضافي بعد الشراء
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 تعمل بنفس الطريقة سواء كنت بدون رأس أو تستخدم موضوع Liquid. واجهتك الأمامية بدون رأس تسلم إلى Shopify's checkout، وتعمل الملحقات هناك. هذا في الواقع ميزة كبرى للنهج بدون رأس — واجهتك الأمامية مخصصة بالكامل، لكن الدفع يبقى Shopify-hosted (متوافق مع PCI والصيانة من Shopify وما إلى ذلك).

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

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

المرحلة 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 redirects وخريطة الموقع وبيانات البنية المنظمة)

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

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

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

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

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

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

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

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

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

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

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

إذا كنت تقيم الوكالات لعمل Shopify بدون رأس، فإليك تقييمي الصريح للمشهد في 2026.

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

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

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

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

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

إليك شيء معظم أدلة Shopify بدون رأس لن تخبرك: أنت لا تضطر إلى استخدام React.

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

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

---
// مكون 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 للتجارة أصغر. ستكتب المزيد من الكود المخصص لإدارة السلة والمصادقة والبحث. لكن إذا كانت الأداء هي مقياسك الأساسي وفريقك مرتاح للعمل الإضافي، فهو خيار شرعي.

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

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

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

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

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

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

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

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

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

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