Headless Shopify with Hydrogen: Build High-Performance Custom Storefronts

ہائیڈروجن کے ساتھ # ہیڈ لیس Shopify: ہائی پرفارمنس کسٹم اسٹور فرنٹ بنائیں

ہیڈ لیس کامرس بیک اینڈ کامرس انجن سے فرنٹ اینڈ پریزنٹیشن پرت کو ڈی جول کرتا ہے۔ Shopify Hydrogen حسب ضرورت اسٹور فرنٹ بنانے کا آفیشل فریم ورک ہے جو Storefront API کے ذریعے Shopify کے بیک اینڈ سے جڑتا ہے۔ ریمکس (ری ایکٹ پر مبنی فل اسٹیک فریم ورک) پر بنایا گیا، ہائیڈروجن کامرس کے لیے مخصوص اجزاء، ہکس، اور افادیت فراہم کرتا ہے جو Shopify کے کارٹ، چیک آؤٹ، اور کسٹمر مینجمنٹ انفراسٹرکچر کا فائدہ اٹھاتے ہوئے ترقی کو تیز کرتا ہے۔ اس گائیڈ میں تعیناتی کے ذریعے فن تعمیر کے فیصلوں سے لے کر ہر چیز کا احاطہ کیا گیا ہے۔

اہم نکات

• ہائیڈروجن بہترین سرور سائیڈ رینڈرنگ کارکردگی کے لیے ری ایکٹ سرور اجزاء کے ساتھ ریمکس پر بنایا گیا ہے۔
• اسٹور فرنٹ API مصنوعات، مجموعوں اور مواد تک پڑھنے کی رسائی فراہم کرتا ہے۔ کسٹمر اکاؤنٹ API تصدیق کو ہینڈل کرتا ہے۔
• تجارتی اجزاء (مصنوعات کی قیمت، کارٹ فارم، AddToCartButton) بوائلر پلیٹ کو ختم کرتے ہوئے مکمل طور پر حسب ضرورت باقی رہتے ہیں۔
• آکسیجن ہوسٹنگ خودکار اسکیلنگ کے ساتھ ہائیڈروجن کے لیے بہتر بنائے گئے کنارے پر تعینات انفراسٹرکچر فراہم کرتی ہے۔
• Shopify Liquid تھیمز کے مقابلے سب سے بڑے Contentful Paint میں 30-50% کی کارکردگی میں اضافہ عام ہے

بے سر کب جانا ہے۔

ہائیڈروجن کب منتخب کریں۔

• آپ کے برانڈ کو اپنی مرضی کے مطابق ڈیزائن کی ضرورت ہے جو Liquid تھیم کی صلاحیتوں سے زیادہ ہو۔
• آپ کو بغیر ہیڈ لیس CMS سے مواد کو ضم کرنے کی ضرورت ہے۔
• کارکردگی ایک اہم مسابقتی تفریق ہے (ذیلی 1-سیکنڈ صفحہ لوڈ)
• آپ کی فرنٹ اینڈ ٹیم React اور جدید JavaScript ٹولنگ کو ترجیح دیتی ہے۔
• آپ کو ترقی پسند ویب ایپ (PWA) کا تجربہ درکار ہے۔
• آپ ویب، موبائل اور دیگر چینلز پر اجزاء کا اشتراک کرنا چاہتے ہیں۔

جب مائع تھیمز کے ساتھ رہیں

• آپ کی ڈیزائن کی ضروریات حسب ضرورت کے ساتھ موجودہ تھیمز سے پوری ہوتی ہیں۔
• آپ کے پاس جاری دیکھ بھال کے لیے فرنٹ اینڈ ترقیاتی وسائل کی کمی ہے۔
• آپ کو غیر تکنیکی صارفین کے لیے Shopify ایڈمن تھیم ایڈیٹر کا مکمل تجربہ درکار ہے۔
• آپ کا بجٹ کسٹم فرنٹ اینڈ ڈیولپمنٹ اور ہوسٹنگ کو سپورٹ نہیں کرتا ہے۔

فن تعمیر کا جائزہ

ہائیڈروجن کیسے کام کرتا ہے۔

ہائیڈروجن فن تعمیر پر مشتمل ہے:

ریمکس (مکمل اسٹیک فریم ورک): ہینڈل روٹنگ، سرور سائیڈ رینڈرنگ، ڈیٹا لوڈنگ، اور فارم ہینڈلنگ۔ ہر راستہ ایک loader فنکشن (سرور پر چلتا ہے) اور ایک جزو (کلائنٹ پر پیش کرتا ہے) کی وضاحت کرتا ہے۔

اسٹور فرنٹ API (GraphQL): پروڈکٹ کی معلومات، مجموعے، تلاش اور مواد کے لیے بنیادی ڈیٹا ماخذ۔ تمام پروڈکٹ ڈیٹا ڈیٹا بیس تک براہ راست رسائی کے بجائے اس API کے ذریعے بہتا ہے۔

کسٹمر اکاؤنٹ API: گاہک کی توثیق، آرڈر کی تاریخ، اور اکاؤنٹ کا نظم و نسق ہینڈل کرتا ہے۔ یہ API Shopify کو بغیر پاس ورڈ کے تصدیقی بہاؤ فراہم کرتا ہے۔

کارٹ API: سرور سائیڈ حالت کے ساتھ شاپنگ کارٹ کا انتظام کرتا ہے۔ کارٹ آپریشنز (شامل کریں، اپ ڈیٹ کریں، ہٹائیں) Shopify کے کارٹ انفراسٹرکچر کا استعمال کریں۔

چیک آؤٹ: Shopify کی میزبانی شدہ چیک آؤٹ (چیک آؤٹ ایکسٹینبیلٹی)۔ ہیڈ لیس اسٹور فرنٹ Shopify کے چیک آؤٹ پر ری ڈائریکٹ کرتا ہے، جو ادائیگی کی پروسیسنگ، شپنگ اور آرڈر کی تخلیق کو سنبھالتا ہے۔

ڈیٹا فلو

پروجیکٹ سیٹ اپ

ہائیڈروجن پروجیکٹ بنانا

Shopify CLI کا استعمال کرتے ہوئے ایک نئے ہائیڈروجن پروجیکٹ کو اسکافولڈ کریں:

ایک نیا پروجیکٹ بنانے کے لیے Shopify Hydrogen CLI کو npx shopify hydrogen init کے ساتھ چلائیں۔ CLI اشارہ کرتا ہے:

1. پروجیکٹ کا نام: آپ کے اسٹور فرنٹ کا نام
2. ٹیمپلیٹ: کنکال (کم سے کم)، ڈیمو اسٹور (مکمل مثال)، یا حسب ضرورت
3. زبان: TypeScript (تجویز کردہ) یا JavaScript
4. اسٹائلنگ: Tailwind CSS، CSS ماڈیولز، یا ونیلا CSS
5. اسٹور فرنٹ API اسناد: اسٹور ڈومین اور API ٹوکن

پروجیکٹ کا ڈھانچہ

ایک ہائیڈروجن پروجیکٹ ریمکس کنونشن کی پیروی کرتا ہے:

اسٹور فرنٹ API کنکشن

اسٹور فرنٹ API کنکشن کو hydrogen.config.ts میں کنفیگر کریں:

• اسٹور ڈومین: آپ کا myshopify.com ڈومین
• اسٹور فرنٹ API ٹوکن: عوامی رسائی کا ٹوکن (کلائنٹ کے سائڈ استعمال کے لیے محفوظ)
• API ورژن: اسٹور فرنٹ API ورژن (جیسے، 2026-01)
• ڈیفالٹ ملک/زبان: مقامی قیمتوں اور مواد کے لیے

بنیادی صفحات کی تعمیر

مصنوعات کی فہرست کا صفحہ

سٹور فرنٹ API سے پروڈکٹس لانے کے لیے مجموعہ کا صفحہ loader فنکشن کا استعمال کرتا ہے:

لوڈر فنکشن URL پیرامز سے کلیکشن ہینڈل وصول کرتا ہے، صفحہ بندی (پہلے N پروڈکٹس) کے ساتھ اسٹور فرنٹ API سے استفسار کرتا ہے، اور جمع کرنے کا ڈیٹا واپس کرتا ہے۔ جزو تصاویر، عنوانات، قیمتوں، اور مختلف معلومات کے ساتھ ایک ذمہ دار پروڈکٹ گرڈ پیش کرتا ہے۔

اہم تحفظات:

• صفحہ بندی: کرسر پر مبنی صفحہ بندی کا استعمال کریں (اسٹور فرنٹ API ریلے طرز کے کنکشن استعمال کرتا ہے)
• فلٹرنگ: پروڈکٹس کے استفسار میں filters دلیل کے ذریعے فلٹرز لگائیں
• چھانٹنا: سپورٹ قیمت، عنوان، سب سے زیادہ فروخت ہونے والی، اور متعلقہ چھانٹی
• لامحدود اسکرول یا "مزید لوڈ کریں": مکمل صفحہ دوبارہ لوڈ کیے بغیر اضافی صفحات حاصل کریں۔

پروڈکٹ کی تفصیلات کا صفحہ

پروڈکٹ کا صفحہ تمام قسموں، تصاویر اور میٹا فیلڈز کے ساتھ ایک واحد پروڈکٹ لاتا ہے:

لوڈر ہینڈل کے ذریعے پروڈکٹ سے استفسار کرتا ہے، بشمول قیمتوں کے ساتھ متغیرات، تصاویر (ردعمل کے سائز کے ساتھ)، اور کسی بھی میٹا فیلڈز جس میں پروڈکٹ کی توسیعی معلومات ہوتی ہیں۔ جزو ایک تصویری گیلری، ویرینٹ سلیکٹر، قیمت کا ڈسپلے، اور ٹوکری میں شامل کرنے کا بٹن پیش کرتا ہے۔

ٹوکری پر عمل درآمد

ہائیڈروجن CartForm جزو کے ذریعے کارٹ کی افادیت فراہم کرتا ہے:

CartForm کارٹ آپریشنز کو لپیٹتا ہے (شامل کریں، اپ ڈیٹ کریں، ہٹائیں) فارم جمع کرنے کے طور پر جو جاوا اسکرپٹ (ترقی پسند اضافہ) کے بغیر کام کرتے ہیں۔ کارٹ اسٹیٹ کو Shopify کے کارٹ انفراسٹرکچر میں سرور کے ساتھ اسٹور کیا جاتا ہے، جو ٹیبز اور آلات میں مستقل مزاجی کو یقینی بناتا ہے۔

کارٹ آپریشنز:

کارکردگی کی اصلاح

سرور سائیڈ رینڈرنگ

ہائیڈروجن فاسٹ ٹائم ٹو فرسٹ بائٹ (TTFB) کے لیے ریمکس کے سٹریمنگ SSR کا فائدہ اٹھاتا ہے:

• سٹریمنگ: سرور فوراً ایچ ٹی ایم ایل شیل بھیجتا ہے، پھر ڈیٹا لوڈ کے طور پر متحرک مواد کو اسٹریم کرتا ہے۔
• کیشے ہیڈر: CDN کیشنگ کے لیے فی روٹ Cache-Control ہیڈر سیٹ کریں
• Stale-while-Revalidate: بیک گراؤنڈ میں ریفریش کرتے ہوئے فوری طور پر کیش شدہ مواد پیش کریں

امیج آپٹیمائزیشن

بہتر تصاویر کے لیے @shopify/hydrogen سے Image جزو استعمال کریں:

• ریسپانسیو امیجز کے لیے خودکار srcset جنریشن
• براؤزر سپورٹ پر مبنی WebP/AVIF فارمیٹ کی ترسیل
• فولڈ کے نیچے کی تصاویر کے لیے سست لوڈنگ
• لوڈ کے دوران پلیس ہولڈر کی دھندلی تصاویر

کوڈ کی تقسیم

ریمکس خود بخود کوڈ اسپلٹس بذریعہ راستے۔ اضافی اصلاح:

• بھاری اجزاء کے لیے متحرک درآمدات کا استعمال کریں (تصویری گیلریاں، 3D ناظرین)
• صفحہ لوڈ ہونے کے بعد سست لوڈ تھرڈ پارٹی اسکرپٹس (تجزیہ، چیٹ ویجٹ)
• ری ایکٹ سرور اجزاء کے ساتھ کلائنٹ سائیڈ جاوا اسکرپٹ کو کم سے کم کریں۔

کارکردگی کے معیارات

مائع تھیمز کے مقابلے میں ہائیڈروجن کی عام کارکردگی:

آکسیجن کے ساتھ تعیناتی۔

آکسیجن کیا ہے؟

آکسیجن Shopify کا ہوسٹنگ پلیٹ فارم ہے جو خاص طور پر ہائیڈروجن اسٹور فرنٹ کے لیے بنایا گیا ہے۔ یہ عالمی کنارے کے نیٹ ورک پر اس کے ساتھ تعینات کرتا ہے:

• ٹریفک کی بنیاد پر خودکار اسکیلنگ
• بلٹ ان DDoS تحفظ
• SSL/TLS سرٹیفکیٹ کا انتظام
• GitHub کے ساتھ CI/CD انضمام
• ماحولیاتی متغیرات کا انتظام
• پل کی درخواستوں کے لیے تعیناتیوں کا پیش نظارہ کریں۔

تعیناتی کا عمل

1. Shopify ایڈمن کے ذریعے اپنے GitHub ریپوزٹری کو آکسیجن سے جوڑیں۔
2. مین برانچ کی طرف دھکیلنا خودکار تعیناتی کو متحرک کرتا ہے۔
3. پل کی درخواستیں جانچ کے لیے پیش نظارہ یو آر ایل تیار کرتی ہیں۔
4. ماحولیاتی متغیرات کا انتظام Shopify منتظم کے ذریعے کیا جاتا ہے۔
5. حسب ضرورت ڈومینز DNS CNAME ریکارڈز کے ساتھ کنفیگر کیے گئے ہیں۔

متبادل ہوسٹنگ

جب کہ آکسیجن ہائیڈروجن کے لیے موزوں ہے، آپ کسی بھی Node.js-مطابقت رکھنے والی ہوسٹنگ پر تعینات کر سکتے ہیں:

• ورسل: ایج فنکشنز کے ساتھ بہترین ریمکس سپورٹ
• کلاؤڈ فلیئر ورکرز: ورکرز کے رن ٹائم کے ساتھ ایج تعیناتی۔
• Fly.io: عالمی تقسیم کے ساتھ کنٹینر پر مبنی تعیناتی۔
• AWS: ECS، Lambda، یا ایپ رنر کی تعیناتی۔

ہیڈ لیس CMS انٹیگریشن

مواد کا فن تعمیر

ہائیڈروجن اسٹور فرنٹ عام طور پر غیر پروڈکٹ مواد کے لیے بغیر ہیڈ لیس CMS پلیٹ فارمز کے ساتھ ضم ہوتے ہیں:

مقبول CMS انٹیگریشنز

• سنٹی: ہائیڈروجن میں ایمبیڈڈ سینٹی اسٹوڈیو کے ساتھ ریئل ٹائم پیش نظارہ
• مطلوبہ: مواد کی ماڈلنگ کے ساتھ گراف کیو ایل API کا انضمام
• Strapi: REST یا GraphQL API کے ساتھ خود میزبانی کا اختیار
• Shopify Metaobjects: آسان ضروریات کے لیے مقامی Shopify مواد

بغیر ہیڈ لیس اسٹور فرنٹ کے لیے SEO

SEO کے اہم نفاذ

• سرور سائیڈ رینڈرنگ: تمام مواد سرور پر سرچ انجن کرالر کے لیے پیش کیا جاتا ہے
• میٹا ٹیگز: عنوان، تفصیل اور اوپن گراف ٹیگز کے لیے ریمکس کا meta برآمد استعمال کریں۔
• سٹرکچرڈ ڈیٹا: پروڈکٹ، بریڈکرمب لسٹ، اور تنظیم کے لیے JSON-LD اسکیما
• سائٹ میپ: اسٹور فرنٹ API ڈیٹا سے متحرک طور پر تخلیق کریں۔
• کیننیکل URLs: مختلف قسموں اور مجموعوں میں ڈپلیکیٹ مواد کو روکیں۔
• Hreflang: ملٹی لینگویج مارکیٹس پرو اسٹور فرنٹ کے لیے لاگو کریں۔

ECOSIRE ہائیڈروجن سروسز

بغیر ہیڈ لیس Shopify اسٹور فرنٹ کی تعمیر کے لیے کامرس اسٹریٹجی کے ساتھ ساتھ فرنٹ اینڈ ڈیولپمنٹ کی مہارت کی ضرورت ہوتی ہے۔ ECOSIRE کی Shopify کسٹم تھیم ڈیولپمنٹ ٹیم لانچ کے ذریعے تصور سے ہائیڈروجن اسٹور فرنٹ بناتی ہے۔ ہماری اسپیڈ آپٹیمائزیشن سروسز یقینی بناتی ہے کہ آپ کا ہیڈ لیس اسٹور فرنٹ کور ویب وائٹلز کے اہداف کو پورا کرتا ہے، اور ہمارا جاری تعاون Shopify کے پلیٹ فارم کی ترقی کے ساتھ ہی آپ کے اسٹور فرنٹ کو برقرار رکھتا ہے اور اسے تیار کرتا ہے۔

متعلقہ پڑھنا

• ہائیڈروجن کے ساتھ بغیر ہیڈ لیس کامرس کی خریداری کریں
• Shopify API انٹیگریشن گائیڈ
• Shopify پیج اسپیڈ آپٹیمائزیشن گائیڈ
• Shopify ایپ ڈویلپمنٹ گائیڈ
• Shopify تھیم حسب ضرورت گائیڈ

کیا ہائیڈروجن کے ساتھ بغیر سر کے جانے کا مطلب Shopify کے تھیم ایڈیٹر کو کھو دینا ہے؟

جی ہاں ہائیڈروجن اسٹور فرنٹ شاپائف تھیم ایڈیٹر استعمال نہیں کرتے ہیں۔ مواد کی تبدیلیوں کے لیے کوڈ اپ ڈیٹس یا بغیر ہیڈ لیس CMS کے ساتھ انضمام کی ضرورت ہوتی ہے جو بصری ترمیم کا تجربہ فراہم کرتا ہے۔ یہ ہیڈ لیس فن تعمیر کا بنیادی تجارت ہے---کوڈ ایڈیٹنگ کے تجربے کی قیمت پر زیادہ سے زیادہ فرنٹ اینڈ لچک۔

کیا میں اپنے Shopify اسٹور کے صرف ایک حصے کے لیے Hydrogen استعمال کر سکتا ہوں؟

براہ راست نہیں---ہائیڈروجن پورے فرنٹ اینڈ کی جگہ لے لیتا ہے۔ تاہم، آپ ہائبرڈ اپروچ استعمال کر سکتے ہیں: مرکزی سائٹ کے لیے ہائیڈروجن اسٹور فرنٹ چلائیں اور ادائیگی کے بہاؤ کے لیے Shopify کی میزبانی شدہ چیک آؤٹ استعمال کریں (یہ معیاری طریقہ ہے)۔ کچھ تاجر کیٹلاگ کے لیے مائع تھیم رکھتے ہوئے مارکیٹنگ کے صفحات کے لیے ہائیڈروجن کا بھی استعمال کرتے ہیں۔

مائع تھیم کے مقابلے ہائیڈروجن اسٹور فرنٹ کی ترقی کی قیمت کیا ہے؟

ری ایکٹ ڈیولپمنٹ کی ضرورت اور انفراسٹرکچر سیٹ اپ کی وجہ سے حسب ضرورت ہائیڈروجن کی تعمیر کی لاگت عام طور پر کسٹم مائع تھیم سے 2-5x زیادہ ہوتی ہے۔ تاہم، ری ایکٹ کا تجربہ رکھنے والی ٹیموں کے لیے جاری تکرار کی رفتار تیز ہوتی ہے، اور کارکردگی کے فوائد قابل پیمائش تبادلوں کی بہتری میں ترجمہ کر سکتے ہیں جو سرمایہ کاری کا جواز پیش کرتے ہیں۔