Hidrojen ile Başsız Shopify: Ne Zaman ve Nasıl

Çoğu Shopify mağazasının başsız olmasına gerek yoktur. Bu ifade, Shopify geliştirici çevrelerinde başsızın genellikle her ciddi e-ticaret markasının kaçınılmaz evrimi olarak konumlandırıldığı hakim anlatıya ters düşüyor. Gerçek daha incelikli: Başsız Shopify, belirli bir satıcı profili için doğru seçimdir ve marjinal olarak daha iyi sonuçlar elde etmek için önemli ölçüde daha fazla harcama yapacak birçok kişi için yanlış seçimdir.

Bu kılavuz, Hydrogen (Shopify'ın resmi React tabanlı başsız çerçevesi) uygun seçim olduğunda, başsız Shopify'ın gerçekte ne anlama geldiğini, onunla nasıl derleme yapılacağını ve taahhütte bulunmadan önce dürüst bir maliyet-fayda değerlendirmesinin nasıl yapılacağını açıklamaktadır.

Önemli Çıkarımlar

Başsız Shopify, Storefront API aracılığıyla vitrini (ön uç) ticaret motorundan (Shopify arka uç) ayırır

Hydrogen, Shopify'ın başsız vitrinler için Remix'i temel alan resmi React tabanlı çerçevesidir

Yıllık geliri 5 milyon doların altında olan çoğu mağazaya, optimize edilmiş Shopify 2.0 temaları, başsız mimariden daha iyi hizmet veriyor

Headless şu durumlarda haklı çıkar: son derece özel UX gereksinimleri, içerik ticareti entegrasyonu, çok kanallı yayınlama veya aşırı performans gereksinimleri

Oxygen, Shopify'ın Hydrogen uygulamalarına yönelik barındırma platformudur — küresel uç ağ ile sıfır yapılandırma dağıtımı

Başsız için toplam sahip olma maliyeti, devam eden bakım için tema tabanlı Shopify'dan 3-5 kat daha yüksektir

Shopify'ın Storefront API'si ürünlere, koleksiyonlara, sepete, ödemeye ve müşteri verilerine erişim sağlar

Remix (Hidrojen'in temelini oluşturur), mükemmel Önemli Web Verileri için sunucu tarafında HTML oluşturmaya ve akışa almaya olanak tanır

Başsız Shopify'ın Gerçekte Anlamı Nedir?

Geleneksel bir Shopify mağazasında her şey Shopify platformunda çalışır: ürün verileri, vitrin teması, alışveriş sepeti, ödeme, müşteri hesapları ve sipariş yönetimi. Liquid şablon dili, ürün sayfalarını Shopify'ın altyapısında sunucu tarafında işler.

Başsız bir Shopify mimarisinde:

Ticaret motoru (Shopify): Ürünleri, envanteri, siparişleri, müşterileri, ödemeleri ve sipariş karşılamayı yönetir - değişmeden
Storefront (özel ön yüzünüz): Storefront API aracılığıyla Shopify'dan veri alan ve müşteriye dönük deneyim sunan ayrı bir uygulama (React, Next.js, Hydrogen veya herhangi bir web çerçevesi)

Ön uç her yerde çalışabilir: Vercel, Netlify, Cloudflare Workers, Shopify'ın kendi Oxygen platformu veya kendi altyapınız. Ticaret arka ucu Shopify olarak kalmaya devam ediyor.

Bunu Neden Yapasınız?

Başsız olmanın motivasyonu her zaman aşağıdakilerden biri veya birkaçıdır:

Shopify'ın bölüm/blok tema mimarisinde elde edilemeyen özel kullanıcı deneyimi
İçerik ticareti entegrasyonu — Contentful, Sanity veya Prismic gibi ürünleri bir CMS'ye yerleştirme
Çok kanallı yayınlama — bir web sitesini, mobil uygulamayı, dijital tabelayı ve sesli ticareti destekleyen aynı ürün verileri
Performans — JavaScript paketi, bileşen yükleme ve oluşturma stratejisi üzerinde tam kontrol
Teknik ekip tercihi — Liquid şablonlarını rahatsız bulan React geliştiricilerinden oluşan bir ekip

Hidrojen: Shopify'ın Resmi Başsız Çerçevesi

Hydrogen, Shopify'ın başsız Shopify vitrinleri oluşturmaya yönelik React tabanlı çerçevesidir. Remix'in (React çerçevesi, artık React Router 7'nin bir parçası) temel alınarak oluşturulmuştur ve Shopify'ın Storefront API'si için optimize edilmiştir.

Hidrojen Ne Sağlar

Özellik	Neleri İçerir
Vitrin API istemcisi	Shopify verileri için önceden yapılandırılmış GraphQL istemcisi
Önbelleğe alma katmanı	Eskimişken yeniden doğrulama stratejisiyle akıllı önbelleğe alma
SEO yardımcı programları	Meta etiket yönetimi, kanonik URL'ler, yapılandırılmış veri yardımcıları
Sepet yönetimi	Shopify'ın Sepet API'si ile sepet durumu yönetimi
SSR Akışı	Hızlı ilk sayfa yüklemeleri için Remix ile akışa tepki verin
Shopify Analitikleri	Yerleşik analitik olay takibi
Müşteri hesabı API'si	Başsız müşteri kimlik doğrulama akışları
Tahminli arama	Shopify'ın ön yazı sonuçlarıyla araması

Oxygen: Shopify'ın Hidrojen için Edge Hosting'i

Oxygen, Shopify'ın Hydrogen uygulamalarına yönelik küresel uç dağıtım platformudur. Shopify Plus'a hiçbir ek ücret olmadan dahildir. Oxygen, Hydrogen uygulamanızı Cloudflare'in küresel uç ağına dağıtır; Shopify'ın kendi vitrinlerinin kullandığı altyapının aynısı.

Oxygen'in üçüncü taraf barındırmaya göre avantajları:

Shopify CLI aracılığıyla sıfır yapılandırma dağıtımı
Özel alan adınızda otomatik HTTPS
Kenar önbelleğe alma özelliğine sahip global CDN
Shopify'ın veri altyapısıyla birinci sınıf entegrasyon (azaltılmış API gecikmesi)
Tipik trafik hacimleri için çıkış veya bilgi işlem fiyatlandırması yok

Oxygen yerine Vercel veya Netlify'ı seçmenin birincil nedeni: Oxygen'in desteklemediği bir barındırma özelliğine ihtiyacınız olması (veritabanı bağlantıları, uç olmayan çalışma zamanı gerektiren harici API entegrasyonları vb.) veya Shopify Plus'ta olmamanız.

Shopify Storefront API: Nelere Erişebilirsiniz?

Storefront API, Hydrogen'in (ve herhangi bir başsız uygulamanın) verileri almak için kullandığı genel API'dir. Bu, genel erişim belirteçlerine sahip bir GraphQL API'sidir; temel işlemler için sunucu tarafı sırrı gerekmez.

Mevcut Kaynaklar

Kaynak	Mevcut İşlemler
Ürünler	Tanıtıcıya göre getirme, kimlik, toplama, arama; varyantlar, meta alanlar, resimler
Koleksiyonlar	Tanıtıcıyla getir, kimlik; koleksiyonlardaki ürünleri filtreleyin ve sıralayın
Sepet	Öğe oluşturun, ekleyin/güncelleyin/kaldırın, indirim uygulayın, ödemeyi tahmin edin
Ödeme	Sepetten ödeme oluştur (Shopify dışı ödeme için)
Müşteri	Giriş, kayıt, hesap yönetimi, sipariş geçmişi
Metanesneler	Özel yapılandırılmış içerik türleri
Tahminli Arama	Önerilerle gerçek zamanlı arama
Blog/Makaleler	İçerik-ticaret entegrasyonuna yönelik blog yazıları ve makaleler
Menüler	Gezinme yapısı
Mağaza	Meta verileri ve politikaları saklayın

Storefront API'nin Yapamayacağı Şeyler

Operasyon	Gerekli API
Ürün oluşturun veya güncelleyin	Yönetici API'si (sunucu tarafı, yönetici kimlik bilgilerini gerektirir)
Sipariş ayrıntılarına erişim (yönetici düzeyi)	Yönetici API'si
Tamamlamalar oluşturun	Yönetici API'si
Müşterinin kişisel verilerine yönetici ayrıntılarıyla erişin	Yönetici API'si
İndirimleri yönetin	Yönetici API'sı

Başsız bir kurulumda tam ticaret işlevselliği için, yönetici düzeyindeki işlemlerde genellikle hem Storefront API'ye (genel, istemci tarafı) hem de Admin API'ye (özel, yalnızca sunucu tarafı) ihtiyacınız vardır.

Hidrojen Mağazası İnşa Etmek: Temel Bilgiler

Proje Oluşturma

npm create @shopify/hydrogen@latest
# Select: Connect to existing Shopify store
# Enter your myshopify.com domain
# The CLI creates a Hydrogen project with Storefront API connected

Bu, aşağıdakilerle eksiksiz bir Hidrojen projesinin iskelesini oluşturur:

Remix v2 yönlendirme (/app/routes/'da dosya tabanlı yönlendirme)
Shopify Storefront API istemcisi önceden yapılandırılmıştır
Örnek ürün, toplama ve sepet rotaları
Oksijen dağıtım yapılandırması

Temel Mimari Desenleri

Hydrogen, sunucu tarafı veri alımı için Remix'in yükleyici modelini kullanır:

Ürün rotasında (/app/routes/products.$handle.tsx), yükleyici işlevi, ürün verilerini sunucudaki Storefront API'sinden alır, React ile işler ve HTML yanıtını yayınlar. Bu, istemci tarafı SPA oluşturma işleminden temel olarak farklıdır; HTML, tarayıcıya ulaştığında tamamlanır; bu, SEO ve Önemli Web Verileri için kritik öneme sahiptir.

Sepet: İstemci Tarafı Karmaşıklığı

Hydrogen'deki sepet, Shopify'ın Sepet API'sini (localStorage tabanlı değil, sunucu tarafından kalıcı bir sepet) kullanır. Hydrogen, alışveriş sepeti durumunu yöneten ve Shopify'ın Sepet API'si ile senkronize edilen bir CartProvider bağlamı ve useCart kancası sağlar. Sepet işlemleri (ekleme, güncelleme, kaldırma) iyimserdir; kullanıcı arayüzü hemen güncellenir ve API çağrısı arka planda gerçekleşir.

Ödeme Yönlendirmesi

Hydrogen'in standart ödeme akışı, müşterileri Shopify'ın barındırılan ödeme URL'sine yönlendirir. Bu, özel ön uçunuzun vitrin deneyimini yönettiği ancak ödeme işleminin kendisi hala Shopify'ın altyapısında çalıştığı anlamına gelir (tüm Shopify Payments, güven ve ödeme optimizasyonu yerleşik olarak).

Shopify Plus'ta tamamen özel bir ödeme isteyen satıcılar için Ödeme Genişletilebilirliği uygun yoldur; Shopify dışında özel bir ödeme oluşturmaz.

Başsız Olduğunda Buna Değer

Bu karar çerçevesini kullanın:

Dikkate Alınması	Başsız Haklı mı?
Yıllık gelir	5 milyon doların altında: muhtemelen hayır. 10 milyon doların üzerinde: ciddiyetle değerlendirin
Özel UX gereksinimleri	Shopify 2.0 temalarında ulaşılabilirse: hayır. Gerçekten benzersizse: evet
İçerik platformu entegrasyonu	CMS olarak İçerikli/Akıl Sağlığı/Prizmik: Başsız olmak doğru yaklaşımdır
Çok kanallı veri ihtiyaçları	Web, uygulama ve kiosk için aynı veriler: başsız bunu mümkün kılar
Geliştirici ekibi	Sıvı şablon konforu: yerel kalın. React ekibi: başsız yaşayabilir
Performans gereksinimleri	Standart tema iyi puanlar alıyor: hayır. Özel performans SLA'sı: değerlendirme
Bakım bütçesi	Devam eden geliştirme maliyetini 3-5 kat daha yüksek tutabilir: bunu düşünün. Yapılamaz: yerel kal

Performans Argümanı: Çoğunlukla Abartılır

Pek çok kafasız savunucu, performansı birincil gerekçe olarak gösteriyor. Ancak Shopify'ın Şafak teması (ve iyi optimize edilmiş premium temalar) mükemmel Core Web Vitals puanlarına ulaşıyor. İyi optimize edilmiş bir yerel tema ile iyi optimize edilmiş bir Hydrogen uygulaması arasındaki performans tavan farkı, gerçek dünya trafiği için genellikle marjinaldir.

Başsızların performans açısından gerçekten kazandığı yer: karmaşık filtrelemeye sahip çok ağır ürün kataloğu sayfaları, video ve animasyonla zengin medya içerikli editoryal deneyimler ve Shopify'ın CDN'sinin tek başına optimize edemeyeceği agresif uç önbellekleme stratejileri gerektiren siteler.

İçerik-Ticaret Entegrasyonu Argümanı: Çoğunlukla Az Ağırlıklandırılır

Başsızlar için en güçlü durum içerik ticareti entegrasyonudur. Ürünlerin yanı sıra editoryal içerik de yayınlayan markalar (lookbook'lar, tarifler, ürünleri içeren nasıl yapılır kılavuzları) birleşik içerik modelinden büyük ölçüde yararlanır. Ürün referanslarına sahip İçerikli veya Sağlıklı bir CMS, ürün verilerini Shopify'ın Storefront API'sinden alır ve editoryal + ticareti birleşik, SEO için optimize edilmiş bir sayfada işler. Bu, yerel Shopify'da önemli tavizler olmadan başarılamaz.

Başsız ve Yerel Tema: Toplam Maliyet Karşılaştırması

Maliyet Faktörü	Yerel Shopify Teması	Başsız Hidrojen
İlk geliştirme	5.000 ABD Doları–25.000 ABD Doları (tema satın alma + özelleştirme)	50.000$–200.000$
Barındırma	Shopify aboneliğine dahil	Oksijen (Plus'a dahildir) veya Vercel/Netlify (50–500$/ay)
Uygulama uyumluluğu	Tam Shopify uygulama ekosistemi	Sınırlı — birçok uygulama yerel Liquid uyumluluğu gerektirir
Devam eden bakım	Düşük — Shopify altyapıyı koruyor	Yüksek — ekibiniz ön uç altyapısını koruyor
Shopify platformu güncellemeleri	Otomatik	Son API değişikliklerini manuel olarak uygulamanız gerekir
Geliştirici kullanılabilirliği	Birçok Shopify tema geliştiricisi	Daha az Hidrojene özgü geliştirici (daha yüksek gün oranları)
Lansman zamanı	4–12 hafta	16–52 hafta

Maliyet farkı gerçek ve önemlidir. Yıllık geliri 2 milyon ABD doları olan bir marka için, başsız Shopify'ın ilk geliştirme maliyeti 150.000 ABD doları, bakım maliyeti ise yılda 50.000 ABD doları olabilir; bu da Shopify Plus abonelik maliyetini gölgede bırakır. Bunu doğrulamak için yatırım getirisi hesaplamasının iyileştirilmiş kullanıcı deneyiminden elde edilen önemli gelir etkisini göstermesi gerekir.

Uygulama Uyumluluğu: Gizli Başsız Mücadelesi

Shopify uygulama ekosistemi öncelikle yerel Liquid tabanlı vitrinler için oluşturulmuştur. Pek çok popüler Shopify uygulaması, Liquid temasına JavaScript enjekte eder; bunların Storefront API eşdeğeri yoktur.

Sorunsuz Çalışan Uygulamalar

Uygulama	Başsız Uyumlu	Nasıl
Klaviyo	Evet	API aracılığıyla sunucu tarafı olay takibi
Şarj Et	Evet	Vitrin API entegrasyonu
Yotpo İncelemeleri	Kısmi	Okumalar için Vitrin API'si; sınırlı yazma
Gorgias	Evet	JavaScript widget'ı herhangi bir ön yüze gömülür
Yargıç.me	Evet	Vitrin API entegrasyonu mevcut
Yeniden Satın Al	Evet (kısmen)	Vitrin API'si önerileri

Sorunsuz Çalışmayan Uygulamalar

Liquid tema entegrasyonu, ScriptTag veya checkout.liquid kullanan çoğu Shopify uygulaması, başsız vitrinlerle uyumlu değildir. Buna birçok CRO aracı, bazı sadakat uygulamaları ve eski inceleme platformları dahildir.

Başsız kalmadan önce tüm uygulama yığınınızı uyumluluk açısından denetleyin. Uyumsuz her uygulama aşağıdakilerden birini gerektirir: (1) başsız uyumlu bir alternatif bulma, (2) özel işlevler oluşturma veya (3) bu işlevlerin kaybını kabul etme.

Alternatif: "Hibrit" Yaklaşım

Pek çok tüccar tamamen başsız kalmak yerine hibrit bir yaklaşımdan yararlanıyor:

Vitrinlerin çoğu için standart Shopify teması (yüksek uygulama uyumluluğu, düşük bakım)
Benzersiz kullanıcı deneyiminin önemli olduğu belirli yüksek değerli sayfalar (ana sayfa, ürün sayfaları) için Özel React uygulaması
Shopify'ın Storefront API'si, normalde yerel tema içindeki özel bileşenleri güçlendiriyor

Bu hibrit model, en önemli yerde özel kullanıcı deneyimi sunarken maliyeti ve karmaşıklığı azaltır.

Sıkça Sorulan Sorular

Başsız bir Hydrogen uygulaması için Shopify Plus'a ihtiyacım var mı?

Hayır — Hydrogen ve Storefront API, tüm Shopify planlarında mevcuttur. Oxygen hosting (Shopify'ın Hydrogen için uç platformu) Shopify Plus'ı gerektirir. Diğer planlarda Hydrogen uygulamasını Vercel, Netlify, Cloudflare Workers veya Node.js uyumlu herhangi bir ana bilgisayarda barındırırsınız. Storefront API erişimi ve Hydrogen çerçevesi, plandan bağımsız olarak tamamen mevcuttur.

Hydrogen başsız bir mağazada SEO nasıl çalışır?

Hydrogen, Shopify'ın yerel Liquid temalarıyla aynı yaklaşım olan, sunucuda tam HTML üreten Remix'in sunucu tarafı oluşturma özelliğini kullanır. Arama motoru tarayıcıları, tüm ürün içeriğinin görünür olduğu, tamamen oluşturulmuş HTML'yi alır. Hydrogen, meta etiketler, kanonik URL'ler ve yapılandırılmış veriler için SEO yardımcı programlarını içerir. CSR (istemci tarafı oluşturma) SPA'larına kıyasla SEO avantajı önemlidir; yerel Shopify temaları ile karşılaştırıldığında, her ikisi de doğru şekilde yapılandırılırsa fark çok azdır.

Shopify için Hydrogen ve Next.js Commerce arasındaki fark nedir?

Her ikisi de başsız Shopify için React tabanlı çerçevelerdir. Hydrogen, Shopify'ın birinci sınıf Shopify Storefront API entegrasyonu, Oxygen barındırma ve Shopify'a özel yardımcılar (sepet, ödeme, analiz) içeren, Remix üzerine kurulu resmi çerçevesidir. Next.js Commerce, Vercel'in Shopify dahil birden fazla platformu destekleyen, başsız e-ticarete yönelik açık kaynaklı başlangıç kitidir. Hidrojen, Shopify'a özgü daha derin bir optimizasyona sahiptir; Next.js Commerce, ticaret platformlarını değiştirebilmeniz veya Next.js'ye özgü özelliklere ihtiyaç duymanız durumunda daha fazla esneklik sunar.

Shopify'ın ödeme özelliğini başsız bir ön uçla kullanabilir miyim?

Evet — bu standart başsız modeldir. Özel Hydrogen ön yüzünüz vitrini yönetir ve ödeme noktasında Shopify'ın barındırılan ödeme URL'sine (Cart API'nin checkoutUrl alanından oluşturulan) yönlendirme yaparsınız. Bu size ürün keşfi ve alışveriş sepeti için tam özel kullanıcı deneyimi ve ödeme adımı için Shopify'ın optimize edilmiş, dönüşüm açısından test edilmiş ödeme özelliğini sunar. Ödeme Genişletilebilirliği (Shopify Plus), Shopify ödeme işleminin kendisinin uzantılarla özelleştirilmesine olanak tanır.

Hidrojen uygulaması genellikle ne kadar sürer?

Olgun bir Shopify temasının yerini alan tamamen özel bir Hydrogen mağazası: Karmaşıklığa bağlı olarak 16-52 hafta. Eski karmaşıklık olmadan yeni bir mağaza lansmanı için daha basit bir Hydrogen uygulaması: 8-16 hafta. Temel zaman çizelgesi etkenleri şunlardır: özel tasarımın karmaşıklığı, ürün türü sayısı ve katalog boyutu, gerekli uygulama ekosistemi değişiklikleri ve özellikle Hydrogen ile ekip deneyimi.

Sonraki Adımlar

Hydrogen ile Headless Shopify, doğru satıcı için güçlü bir mimaridir; ancak karar, UX gereksinimlerinizin, geliştirici kapasitenizin, bütçenizin ve uygulama ekosistemi bağımlılıklarınızın dürüst bir şekilde değerlendirilmesini gerektirir.

ECOSIRE'ın Shopify Plus hizmetleri denetimsiz mimari danışmanlığı, Hydrogen vitrin geliştirme, Storefront API entegrasyonu ve Oxygen dağıtımını içerir. Satıcıların, başsız seçeneğin doğru seçim olup olmadığını değerlendirmelerine ve uygulamayı doğru zamanda yürütmelerine yardımcı oluyoruz; buna tam başsız çözümden daha düşük maliyetle özel UX sunan hibrit yaklaşımlar da dahil.

Özel gereksinimlerinizi değerlendirmek ve başsız Shopify'ın mağazanız için doğru yatırım olup olmadığı konusunda dürüst bir öneri almak için Başsız bir mimari danışmanlığı planlayın.

Headless Shopify with Hydrogen: When and How