Hydrogen ile Başsız Shopify: Yüksek Performanslı Özel Vitrinler Oluşturun

Başsız ticaret, ön uç sunum katmanını arka uç ticaret motorundan ayırır. Shopify Hydrogen, Shopify'ın arka ucuna Storefront API aracılığıyla bağlanan özel vitrinler oluşturmaya yönelik resmi çerçevedir. Remix (React tabanlı tam yığın çerçevesi) üzerine inşa edilen Hydrogen, Shopify'ın alışveriş sepeti, ödeme ve müşteri yönetimi altyapısından yararlanırken aynı zamanda geliştirmeyi hızlandıran ticarete özel bileşenler, kancalar ve yardımcı programlar sağlar. Bu kılavuz, mimari kararlardan dağıtıma kadar her şeyi kapsar.

Temel Çıkarımlar

• Hidrojen, optimum sunucu tarafı işleme performansı için React Sunucu Bileşenleri ile Remix üzerine kurulmuştur
• Storefront API, ürünlere, koleksiyonlara ve içeriğe okuma erişimi sağlar; Müşteri Hesabı API'si kimlik doğrulamayı yönetir
• Ticari bileşenler (ProductPrice, CartForm, AddToCartButton) tamamen özelleştirilebilir kalarak ortak metinleri ortadan kaldırır
• Oksijen barındırma, otomatik ölçeklendirmeyle Hydrogen için optimize edilmiş uçta konuşlandırılmış altyapı sağlar
• Shopify Liquid temalarına kıyasla Largest Contentful Paint'te %30-50'lik performans artışı tipiktir

Ne Zaman Başsız Kalmalı

Ne Zaman Hidrojeni Seçin

• Markanız, Liquid temasının yeteneklerini aşan özel bir tasarım gerektiriyor
• Başsız bir CMS'den (Contentful, Sanity, Strapi) içerik entegre etmeniz gerekiyor
• Performans, rekabette kritik bir fark yaratan unsurdur (1 saniyeden kısa sayfa yüklemeleri)
• Ön uç ekibiniz React'ı ve modern JavaScript araçlarını tercih ediyor
• Aşamalı bir web uygulaması (PWA) deneyimine ihtiyacınız var
• Bileşenleri web, mobil ve diğer kanallar arasında paylaşmak istiyorsanız

Liquid Temalarıyla Kalın

• Tasarım gereksinimleriniz özelleştirme ile mevcut temalarla karşılanır
• Devam eden bakım için ön uç geliştirme kaynaklarına sahip değilsiniz
• Teknik bilgisi olmayan kullanıcılar için tam Shopify yönetici teması düzenleyici deneyimine ihtiyacınız var
• Bütçeniz özel ön uç geliştirmeyi ve barındırmayı desteklemiyor

Mimariye Genel Bakış

Hidrojen Nasıl Çalışır?

Hidrojen mimarisi aşağıdakilerden oluşur:

Remix (tam yığın çerçeve): Yönlendirmeyi, sunucu tarafı oluşturmayı, veri yüklemeyi ve form işlemeyi yönetir. Her rota bir loader fonksiyonunu (sunucuda çalışır) ve bir bileşeni (istemcide işlenir) tanımlar.

Storefront API (GraphQL): Ürün bilgileri, koleksiyonlar, arama ve içerik için birincil veri kaynağı. Tüm ürün verileri, doğrudan veritabanı erişimi yerine bu API üzerinden akar.

Müşteri Hesabı API'si: Müşteri kimlik doğrulamasını, sipariş geçmişini ve hesap yönetimini yönetir. Bu API, Shopify'a özgü, şifresiz bir kimlik doğrulama akışı sağlar.

Sepet API'si: Alışveriş sepetini sunucu tarafı durumuyla yönetir. Sepet işlemleri (ekleme, güncelleme, kaldırma) Shopify'ın sepet altyapısını kullanır.

Ödeme: Shopify tarafından barındırılan ödeme (Ödeme Genişletilebilirliği). Başsız vitrin, Shopify'ın ödeme işlemlerini, gönderimi ve sipariş oluşturma işlemlerini gerçekleştiren ödeme sayfasına yönlendirir.

Veri Akışı

Proje Kurulumu

Hidrojen Projesi Oluşturma

Shopify CLI'yi kullanarak yeni bir Hidrojen projesinin iskelesini oluşturun:

Yeni bir proje oluşturmak için Shopify Hydrogen CLI'yi npx shopify hydrogen init ile çalıştırın. CLI şunları ister:

1. Proje adı: Vitrin adınız
2. Şablon: İskelet (minimum), demo mağazası (tam örnek) veya özel
3. Dil: TypeScript (önerilen) veya JavaScript
4. Stil: Tailwind CSS, CSS Modülleri veya vanilya CSS
5. Storefront API kimlik bilgileri: Depolama alanı ve API belirteci

Proje Yapısı

Bir Hidrojen projesi Remix kuralını takip eder:

Vitrin API Bağlantısı

hydrogen.config.ts'da Storefront API bağlantısını yapılandırın:

• Mağaza alanı: myshopify.com alanınız
• Storefront API belirteci: Genel erişim belirteci (istemci tarafında kullanım için güvenli)
• API sürümü: Vitrin API sürümü (ör. 2026-01)
• Varsayılan ülke/dil: Yerelleştirilmiş fiyatlandırma ve içerik için

Temel Sayfalar Oluşturma

Ürün Listeleme Sayfası

Koleksiyon sayfası, ürünleri Storefront API'sinden getirmek için bir loader işlevini kullanır:

Yükleyici işlevi, toplama tanıtıcısını URL parametrelerinden alır, Storefront API'sini sayfalandırmayla (ilk N ürün) sorgular ve koleksiyon verilerini döndürür. Bileşen, görseller, başlıklar, fiyatlar ve çeşit bilgileri içeren duyarlı bir ürün tablosu oluşturur.

Önemli hususlar:

• Sayfalandırma: İmleç tabanlı sayfalandırmayı kullanın (Storefront API, Aktarma stili bağlantıları kullanır)
• Filtreleme: Ürünler sorgusunda filters bağımsız değişkeni aracılığıyla filtreler uygulayın
• Sıralama: Destek fiyatı, başlık, en çok satan ve alaka düzeyi sıralaması
• Sonsuz kaydırma veya "Daha Fazla Yükle": Tam sayfayı yeniden yüklemeden ek sayfaları getirin

Ürün Detay Sayfası

Ürün sayfası, tüm varyantları, resimleri ve meta alanları içeren tek bir ürünü getirir:

Yükleyici, fiyatlandırmayı içeren çeşitler, görseller (duyarlı boyutlara sahip) ve genişletilmiş ürün bilgileri içeren meta alanlar da dahil olmak üzere ürünü tanıtıcıya göre sorgular. Bileşen bir resim galerisi, çeşit seçici, fiyat ekranı ve sepete ekle düğmesi oluşturur.

Sepet Uygulaması

Hidrojen, CartForm bileşeni aracılığıyla araba hizmetleri sağlar:

CartForm, sepet işlemlerini (ekleme, güncelleme, kaldırma) JavaScript olmadan çalışan form gönderimleri (aşamalı geliştirme) olarak sarar. Sepet durumu, Shopify'ın sepet altyapısında sunucu tarafında depolanarak sekmeler ve cihazlar arasında tutarlılık sağlanır.

Sepet işlemleri:

Performans Optimizasyonu

Sunucu Tarafı İşleme

Hydrogen, hızlı İlk Bayt Süresi (TTFB) için Remix'in akışlı SSR'sinden yararlanır:

• Akış: Sunucu, HTML kabuğunu hemen gönderir ve ardından veri yüklenirken dinamik içeriğin akışını sağlar
• Önbellek başlıkları: CDN önbelleğe alma için rota başına Cache-Control başlıklarını ayarlayın
• Yeniden doğrulama sırasında eskime: Önbelleğe alınmış içeriği arka planda yenilerken hemen yayınlayın

Görüntü Optimizasyonu

Optimize edilmiş görseller için @shopify/hydrogen'deki Image bileşenini kullanın:

• Duyarlı görüntüler için otomatik srcset oluşturma
• Tarayıcı desteğine dayalı WebP/AVIF formatı teslimatı
• Ekranın alt kısmındaki görseller için yavaş yükleme
• Yükleme sırasında yer tutucu bulanık görüntüler

Kod Bölme

Remix, kodu rotaya göre otomatik olarak böler. Ek optimizasyon:

• Ağır bileşenler için dinamik içe aktarmaları kullanın (resim galerileri, 3D görüntüleyiciler)
• Üçüncü taraf komut dosyalarının (analizler, sohbet widget'ları) sayfa yüklendikten sonra geç yüklenmesi
• React Server Bileşenleri ile istemci tarafı JavaScript'i en aza indirin

Performans Karşılaştırmaları

Sıvı temalarla karşılaştırıldığında tipik Hidrojen performansı:

Oksijenle Dağıtım

Oksijen Nedir?

Oxygen, Shopify'ın Hydrogen mağaza vitrinleri için özel olarak oluşturulmuş barındırma platformudur. Aşağıdakilerle küresel bir uç ağına dağıtılır:

• Trafiğe göre otomatik ölçeklendirme
• Yerleşik DDoS koruması
• SSL/TLS sertifika yönetimi
• GitHub ile CI/CD entegrasyonu
• Ortam değişkenleri yönetimi
• Çekme istekleri için dağıtımları önizleyin

Dağıtım Süreci

1. GitHub deponuzu Shopify yöneticisi aracılığıyla Oxygen'e bağlayın
2. Ana şubeye itme otomatik dağıtımı tetikler
3. Çekme istekleri, test için önizleme URL'leri oluşturur
4. Ortam değişkenleri Shopify yöneticisi aracılığıyla yönetilir
5. Özel alanlar DNS CNAME kayıtlarıyla yapılandırılır

Alternatif Barındırma

Oxygen, Hydrogen için optimize edilmiş olsa da Node.js uyumlu herhangi bir barındırma sistemine dağıtım yapabilirsiniz:

• Vercel: Edge işlevleriyle mükemmel Remix desteği
• Cloudflare Workers: Workers çalışma zamanı ile uç dağıtım
• Fly.io: Küresel dağıtımla konteyner tabanlı dağıtım
• AWS: ECS, Lambda veya App Runner dağıtımı

Başsız CMS Entegrasyonu

İçerik Mimarisi

Hidrojen vitrinleri genellikle ürün dışı içerikler için başsız CMS platformlarıyla entegre olur:

Popüler CMS Entegrasyonları

• Sanity: Hydrogen'e yerleştirilmiş Sanity Studio ile gerçek zamanlı önizlemeler
• İçerikli: İçerik modelleme ile GraphQL API entegrasyonu
• Strapi: REST veya GraphQL API ile kendi kendine barındırılan seçenek
• Shopify Metaobjects: Daha basit gereksinimler için yerel Shopify içeriği

Başsız Vitrinler için SEO

Kritik SEO Uygulamaları

• Sunucu tarafı oluşturma: Arama motoru tarayıcıları için tüm içerik sunucuda oluşturulur
• Meta etiketleri: Başlık, açıklama ve Açık Grafiği etiketleri için Remix'in meta dışa aktarma özelliğini kullanın
• Yapılandırılmış veriler: Ürün, BreadcrumbList ve Organizasyon için JSON-LD şemaları
• Site Haritası: Storefront API verilerinden dinamik olarak oluşturun
• Kanonik URL'ler: Varyantlar ve koleksiyonlar arasında yinelenen içeriği önleyin
• Hreflang: Çok dilli Markets Pro vitrinleri için uygulama

ECOSIRE Hidrojen Hizmetleri

Başsız bir Shopify mağazası oluşturmak, ticaret stratejisinin yanı sıra ön uç geliştirme uzmanlığını da gerektirir. ECOSIRE'ın Shopify özel tema geliştirme ekibi, konseptten lansmana kadar Hydrogen vitrinleri oluşturuyor. Hız optimizasyon hizmetlerimiz, başsız vitrininizin Önemli Web Verileri hedeflerini karşılamasını sağlar ve sürekli desteğimiz, Shopify'ın platformu ilerledikçe vitrininizi korur ve geliştirir.

İlgili Okumalar

• Hidrojenle Shopify Kafasız Ticaret
• Shopify API Entegrasyon Kılavuzu
• Shopify Sayfa Hızı Optimizasyon Kılavuzu
• Shopify Uygulama Geliştirme Kılavuzu
• Shopify Tema Özelleştirme Kılavuzu

Hydrogen ile başıboş kalmak Shopify'ın tema düzenleyicisini kaybetmek anlamına mı geliyor?

Evet. Hidrojen vitrinleri Shopify tema düzenleyicisini kullanmaz. İçerik değişiklikleri, kod güncellemelerini veya görsel düzenleme deneyimi sağlayan başsız bir CMS ile entegrasyonu gerektirir. Bu, başsız mimarinin birincil değiş tokuşudur; kodsuz düzenleme deneyimi pahasına maksimum ön uç esnekliği.

Hidrojeni Shopify mağazamın yalnızca bir kısmı için kullanabilir miyim?

Doğrudan değil --- Hidrojen tüm ön ucun yerini alır. Ancak hibrit bir yaklaşım kullanabilirsiniz: ana site için bir Hydrogen mağazası çalıştırın ve ödeme akışı için Shopify tarafından barındırılan ödemeyi kullanın (bu standart yaklaşımdır). Bazı satıcılar katalog için Liquid temasını korurken pazarlama sayfaları için Hydrogen'i de kullanıyor.

Liquid temasıyla karşılaştırıldığında Hydrogen mağazasının geliştirme maliyeti nedir?

Özel bir Hydrogen yapısı, React geliştirme gereksinimi ve altyapı kurulumu nedeniyle genellikle özel bir Liquid temasından 2-5 kat daha pahalıdır. Ancak devam eden yineleme hızı, React deneyimine sahip ekipler için daha hızlıdır ve performans avantajları, yatırımı haklı çıkaracak ölçülebilir dönüşüm iyileştirmelerine dönüşebilir.