Hydrogen’ı nerede barındırmalı: Oxygen mı, Workers mı?

Hydrogen vitrini sunucu tarafında render edilen bir uygulamadır; yani çalışacak bir yere ihtiyacı vardır. Shopify, Hydrogen için geliştirilmiş Oxygen’ı sunar. Shopify, Hydrogen’ı başka JavaScript çalışma ortamlarında çalıştırmayı da belgeler; Cloudflare Workers bunlardan biridir. Bu web sitesini Workers üzerinde çalıştırıyoruz; yani bu karşılaştırma hem dokümantasyona hem de kendi yayınımıza dayanıyor.

Oxygen size ne verir?

• Maliyet ve planlar. Oxygen ücretli Shopify planlarında ek ücret olmadan sunulur: Starter, Basic, Grow, Advanced, Plus ve Pause and build. Agentic planlarda yoktur. Geliştirme mağazaları ve deneme planları da kullanabilir, ama yalnızca özel olarak; Plus Partner Sandbox mağazaları bir public ortam alır.
• Ortamlar. Her ortam bir Git dalına bağlanır ve en fazla 110 ortam değişkeni tutabilir. Ortamlar varsayılan olarak özeldir ve mağaza girişi gerektirir. Public ortamlar: Starter, Basic, Grow, Advanced ve Pause and build’de bir, Shopify Plus’ta 25, geliştirme mağazaları ve deneme planlarında hiç yok.
• Operasyon. Shopify, Oxygen’ı yayın ortamlarını, ortam değişkeni yönetimini, önbelleği ve Shopify’ın CDN’iyle entegrasyonu üstlenen bir hizmet olarak tanımlar. Oxygen’dan ayrıldığınızda yeniden kurduğunuz ya da değiştirdiğiniz dört şey bunlardır.
• Varsayılan olarak özel önizlemeler. Ortamlar public yapılmadıkça mağaza girişi gerektirdiği için yarım kalmış işler ziyaretçilere ya da tarayıcılara yanlışlıkla açılmaz.

Kendiniz barındırınca neler değişir?

Shopify’ın kendi kendine barındırma kılavuzu Vercel, Netlify, Fly.io ve Cloudflare Workers’ı sayar. Shopify tarafındaki gereksinim, Storefront API ve Customer Account API erişimini sağlayan Headless kanalıdır. Sizin tarafınızdaki iş:

1. Oxygen’a özel paketleri kaldırın ve vite.config.ts, react-router.config.ts ve sunucu giriş dosyasını uyarlayın. Hydrogen’ın kendi Vite eklentisi kalır.
2. Hydrogen’ın Storefront API önbelleği çalışmaya devam etsin diye standart Web Cache API’yi uygulayan bir önbellek sağlayın.
3. Çalışma ortamınız için oturum yönetimini kurun ve waitUntil gibi arka plan işlerini nasıl desteklediğini kontrol edin.
4. Sunucu tarafındaki Storefront API isteklerine Shopify-Storefront-Buyer-IP header’ını ekleyin. Bu olmadan Shopify alıcıları birbirinden ayıramaz; bu da isteklerin kısıtlanmasına yol açabilir.
5. Önizlemeler artık mağaza girişiyle korunmadığı için önizleme ile production’ı kendiniz ayırın; production dışındaki her şey için bir noindex kuralı da ekleyin.

Cloudflare Workers’a özgü noktalar

On milisaniyelik CPU, bir React sayfasını sunucuda render etmek için dar bir bütçedir. Burada dengeyi değiştiren Workers Cache’tir: Cloudflare, Worker’ı çağırmadan önce önbelleğe bakar; önbellekte bulunan bir yanıt kodunuz hiç çalışmadan döner, yani CPU harcamaz. Önbellek, stale-while-revalidate dahil standart Cache-Control yönergelerine uyar; çerez ayarlayan yanıtları ve Authorization header’ı taşıyan istekleri atlar. Önbellek anahtarı hostname değil; istek yolu, entrypoint, ctx.props ve varsayılan olarak Worker sürümüdür.

Her seçeneğin işletme maliyeti

Ücretli bir Shopify planında Oxygen ayrı bir barındırma faturası getirmez. Workers’ta Cloudflare’in fiyatlarını ödersiniz ve Workers Cache bu faturanın yapısını değiştirir: etkinleştirildiğinde her istek standart Workers istek ücretiyle faturalandırılır, önbellek için ek ücret yoktur ve CPU süresi yalnızca Worker gerçekten çalıştığında faturalandırılır. Sayfaları çoğunlukla önbellekten dönen bir vitrin az CPU harcar; her isteği render eden bir vitrin ise her ziyarette harcar. İki seçenekte de asıl büyük maliyet mühendislik zamanıdır ve kendi kendine barındırma buna biraz ekler: oturumlar, önbellek header’ları, önizleme ortamları ve yükseltme testleri sizin işinizdir.

Kendiniz barındırırken Storefront API önbelleği

Hydrogen’ın veri önbelleği ile sayfaların tamamı için edge önbelleği iki ayrı katmandır ve kendi kendine barındırma ikisine de dokunur:

• Alt istek önbelleği. Hydrogen, Storefront API yanıtlarını ona verdiğiniz önbellek nesnesi üzerinden önbelleğe alır. Workers’ta bu, çalışma ortamının Web Cache API’sidir (caches.open(…)); bu site de Hydrogen’ın context’ine bunu veriyor.
• Sayfa önbelleği. Render edilmiş bir sayfanın önbelleğe alınıp alınmayacağına yanıtta ayarladığınız header’lar ve barındırıcı karar verir. Workers’ta bu, Workers Cache ve sizin Cache-Control kurallarınız demektir.
• Kişisel veri. Çerez ayarlayan yanıtlar hiçbir paylaşılan önbelleğe girmemelidir. Workers Cache, Set-Cookie içeren yanıtları ve Authorization header’ı taşıyan istekleri atlar; ama sizin kurallarınız da bunu açıkça söylemelidir.

Ne çalıştırıyoruz ve neden?

Bu web sitesi Cloudflare Workers’tan sunulan bir Hydrogen 2026.4 uygulamasıdır; Oxygen production hattının bir parçası değildir. Build zaten bir Worker paketi ve statik dosyalar üretiyor; bu yüzden taşımak yeniden yazmayı değil, yapılandırmayı gerektirdi. Önbellek politikası sunucu giriş dosyasında duruyor:

• Public HTML edge’de bir saat önbellekte tutulur ve arka plandaki tek bir istek onu yenilerken bir gün boyunca eski hâliyle sunulabilir. Tarayıcılar her zaman yeniden doğrular.
• Çerez ayarlayan, yönlendiren, sunucu hatasıyla dönen ya da okuma olmayan hiçbir şey önbelleğe alınmaz; böylece oturum verisi paylaşılan önbelleğe sızamaz. Bulunamayan sayfalar yalnızca bir dakika önbellekte tutulur.
• Önbellek anahtarı Worker sürümünü içerdiği için her yayın boş bir önbellekle başlar ve hiçbir zaman eski bir build’den HTML sunmaz.
• Önizleme yayınları, noindex header’lı ayrı bir Worker’dır; Oxygen’da bu işi platform bizim yerimize yapardı.

Geliştirdiğimiz Hydrogen vitrini Snow / Motion iki barındırıcıyı da kullanır. GitHub Actions ile Oxygen’a yayına alınır; ama public Oxygen ortamı olmayan bir geliştirme mağazasında çalıştığı için public kopyası Workers’tan sunulur.

Karar vermeden önce neyi test etmeli?

1. Planınız izin veriyorsa aynı build’i iki barındırıcıya da yayına alın ve önemli sayfaların yanıt sürelerini müşterilerinizin bulunduğu bölgelerden karşılaştırın.
2. Workers’ta önbellekte olmayan sayfalar için istek başına CPU süresini Workers loglarında kontrol edin. Free planın 10 ms’ine yaklaşıyorsa Paid plana geçmeyi ya da daha agresif önbelleklemeyi planlayın.
3. Giriş yapmış ya da sepeti dolu bir ziyaretçinin hiçbir zaman başkası için hazırlanmış önbellekteki bir sayfayı almadığını doğrulayın.
4. Kendi kendine barındırmanın her seferinde size neye mal olduğunu erkenden görmek için yayından önce kendi barındırdığınız sürümde bir Hydrogen yükseltmesi yapın.

Nasıl seçilir?

Varsayılan tercihiniz Oxygen olsun. Kendi kendine barındırma makul bir seçimdir, ama önbellek, önizleme ve yükseltme testi işlerini ekibinize taşır. Headless’ın sizin için doğru olup olmadığına hâlâ karar veriyorsanız Hydrogen mı, Liquid mi yazısıyla başlayın.