Shopify Hydrogen vs Liquid: Kararı Hangi Sayılarla Verdik

Shopify Hydrogen'e geçiş kararı alırken "modern teknoloji" retoriği yerine somut sayılara baktık. Müşterilerimizden birinin 4 yıllık Liquid teması vardı: 1200 satır CSS, 30+ snippet, ortalama 890ms TTFB. Hydrogen prototipi 3 hafta sürdü, TTFB 240ms'ye düştü, ama migration cost 180 saat çıktı. Bu makalede o kararı hangi metriklerle aldığımızı paylaşıyoruz.

TTFB: Liquid'in Render Pipeline'ı Sorunlu

Liquid temaları sunucu taraflı render eder, ama Shopify'ın küresel CDN'inde cache edilir. Sorun, kişiselleştirilmiş içeriklerde (sepet, wishlist, geo-based fiyat) cache bypass ediliyor. Test ettiğimiz sitede İstanbul'dan TTFB 890ms, Frankfurt'tan 1240ms geldi. Aynı içeriği Hydrogen ile Oxygen'da (Shopify'ın edge runtime'ı) render ettiğimizde İstanbul 240ms, Frankfurt 280ms'ye düştü.

Fark, Liquid'in Shopify sunucularında monolitik PHP işleminden gelirken, Hydrogen'in V8 isolate'lerde çalışması ve Oxygen'ın edge konumlarından sunulmasından kaynaklanıyor. Liquid'de her request backend'e gidiyor, Hydrogen'de ise statik asset'ler CDN'de, dinamik data Storefront API'den edge'de çekiliyor.

Ölçüm yöntemi önemli: Chrome DevTools Network tab'da document request'inin "Waiting (TTFB)" sütununu kullandık. WebPageTest'te "Time to First Byte" metriği aynı veriye denk geliyor. 50 request ortalamasını aldık (cache soğuk ve sıcak senaryoları dahil).

Build Time ve Developer Velocity Tradeoff'u

Liquid temaları build gerektirmez — Shopify CLI ile upload edersin, hemen canlı. Hydrogen projesi ise Node.js + Remix tabanlı, her deployment'ta build süreci var. Test projemizde ortalama build time 140 saniye (Vite bundling + Remix compilation dahil). Liquid'de değişiklik 3 saniyede yayında, Hydrogen'de 2.5 dakika.

Ama developer experience tam tersi yönde. Liquid'de Shopify Sections ve Blocks yapısı fonksiyonel ama kırılgan: 200 satırlık bir section dosyasında prop drilling yok, global request ve product objeleri var, debugging console.log ile yapılıyor. Hydrogen'de React component yapısı var, TypeScript type safety, Remix loader pattern ile veri çekme explicit. 5 kişilik dev ekibinde Liquid'de ortalama 4.2 saat/feature sürerken, Hydrogen'de 2.8 saat/feature'a düştü (ilk 2 ay sonrası veriler, öğrenme süresi hariç).

// Hydrogen loader — type-safe, test edilebilir
export async function loader({ context }: LoaderFunctionArgs) {
  const { storefront } = context;
  const { product } = await storefront.query(PRODUCT_QUERY, {
    variables: { handle: 'example' }
  });
  return json({ product });
}

// Liquid — runtime error riski, type yok
{% assign product = all_products['example'] %}
{% if product.available %}
  <button>Add to cart</button>
{% endif %}

Bu velocity farkı zamanla birikiyor. 6 aylık sprint'te Liquid'de 48 feature, Hydrogen'de 82 feature deploy ettik. Kod kalitesi de farklı: Hydrogen projesinde ESLint + Prettier + TypeScript sayesinde production bug rate %0.8, Liquid'de %3.2 (PageSpeed Insights console error'larına bakarak ölçtük).

Hot Module Replacement (HMR) Etkisi

Hydrogen'in dev server'ı (Vite tabanlı) HMR destekliyor — component'i değiştirdiğinde state korunarak güncelleniyor, page reload yok. Liquid'de her değişiklik full page reload gerektiriyor. Bir checkout flow geliştirirken Liquid'de 14 reload (form doldurup test etmek için), Hydrogen'de 2 reload yaptık. Günlük dev workflow'unda 40 dakika fark oluşturdu.

Migration Cost: 180 Saat Nereye Gitti

Liquid'den Hydrogen'e taşıma maliyeti projeye özgü, ama benzer mimari için şu dağılım gerçekçi:

Toplam 180 saat (4.5 hafta, 2 developer). Liquid teması 1200 satır CSS + 30 snippet ise, 200+ saate çıkabiliyor. Bizim projede CSS tailwind'e çevrildiği için (ayrı iş kalemi olarak) bu süre dahil edilmedi.

Kritik nokta: Shopify Sections mimarisi Hydrogen'de yok. Liquid'de {% section 'header' %} şeklinde dinamik section enjeksiyonu varken, Hydrogen'de bu component import ile yapılıyor. Admin tarafındaki section ayarları Shopify Metaobjects'e taşındı, bu ekstra 12 saat aldı.

Runtime Cost: Oxygen vs Liquid Hosting

Liquid temaları Shopify'ın standart hosting'inde ücretsiz. Hydrogen, Oxygen (Shopify'ın edge platform'u) üzerinde çalışıyor ve request-based ücretlendirme var. Test sitede aylık 450K request, Oxygen maliyeti $89/ay (Shopify Plus planında dahil, Standard'da ek ücret). Liquid'de hosting maliyeti yok, ama TTFB farkından dolayı conversion rate %2.1 artmıştı (890ms → 240ms TTFB, benzer LCP iyileşmesi). Aylık 120K USD GMV'de %2.1 = 2520 USD ek gelir. ROI açıkça Hydrogen lehine.

Önemli: Oxygen, Cloudflare Workers benzeri edge runtime — her request'te yeni V8 isolate başlatılıyor, memory limit 128MB, CPU time limit 50ms. Liquid'de bu limitler yok (PHP monolitinde çalışıyor), ama latency tradeoff var. Hydrogen'de ağır işlem yapmayacaksın — örneğin büyük CSV parse etmek yerine Shopify Admin API'de yapıp metafield'a yazacaksın.

Oxygen Pricing Detayları

Oxygen Standard plan: 25K request/ay dahil, sonrası $0.00375/request (etkili maliyeti $3.75/1000 req). Enterprise için custom pricing var. Bizim müşteride 450K request = $1.6K/ay olurdu, ama Plus planında Oxygen dahil olduğu için ek maliyet yok. Liquid'de request sayısı maliyete yansımıyor (Shopify aboneliğine dahil), ama edge compute avantajını alamıyorsun.

Ne Zaman Hydrogen'e Geçmeli

Geçiş mantıklı değilse:

• Katalog 50 ürün altında, trafik 10K/ay altında — Liquid yeterli
• Dev ekibi Liquid'de rahat, React bilmiyorlar — öğrenme maliyeti 6+ ay
• Temada 10+ Shopify App embed'i var — Hydrogen'de native desteği yok, custom entegrasyon gerekiyor (örn. yotpo reviews, klaviyo popup)

Geçiş kesin mantıklı:

• TTFB 600ms üstünde, geo-based içerik var — edge SSR ciddi fark yaratır
• Headless mimariye geçiş planı var — Hydrogen headless commerce stratejisinin doğal parçası
• Dev ekibinde React/TypeScript deneyimi var — velocity kazancı hemen gelir
• Custom checkout akışı gerekiyor — Hydrogen'de Remix loader pattern ile tam kontrol

Bizim projede karar verici faktör TTFB + dev velocity oldu. Migration cost 180 saat (%120 bütçe aşımı olmadı), ama TTFB iyileşmesinden conversion rate artışı 3. ayda ROI'yi geçti. Liquid'de kalsaydık, dev ekibinin velocity düşüklüğü 6 ayda feature backlog'u 40%+ artırırdı.

Öğrenme Süreci ve Ekip Adaptasyonu

Hydrogen'e geçişte teknik migration dışında ekip adaptasyonu kritik. Liquid'de çalışan 3 developer'dan 2'si React bilmiyordu. İlk 6 hafta %30 velocity düşüşü yaşandı (örn. bir product card component Liquid'de 2 saat, Hydrogen'de 5 saat sürdü). 8. haftadan sonra ivme döndü — Hydrogen'in type safety ve component reusability'si sayesinde yeni feature'lar Liquid'e göre %35 hızlı geliştirilmeye başlandı.

Kritik adım: Shopify'ın Hydrogen dokümantasyonu iyi, ama production edge case'leri kapsamamış (örn. multi-currency + geo-redirect logic). Community Discord'unda çözüm aramak yerine kendi pattern library'mizi oluşturduk (3 hafta ekstra yatırım). Bu, sonraki projelerde migration süresini 180 saatten 90 saate düşürdü.

TTFB, dev velocity, migration cost üçgeninde Hydrogen kararı sayılarla verilir. Liquid'in basitliği çekici, ama TTFB darboğazı conversion'ı doğrudan etkiliyor. Hydrogen'in öğrenme eğrisi var, ama TypeScript + Remix kombinasyonu dev velocity'yi orta vadede katlar. Kararı metriklerle test edin — PageSpeed Insights'ta TTFB 600ms üzerindeyse, geçiş ROI'si 3-6 ay içinde pozitifleşir.