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

2024 sonrasında Shopify projelerinde mimari karar vermek artık "modern ya da değil" sorusu değil. Soru şu: hangi rakamlar projeyi haklı çıkarıyor. Hydrogen'in React Server Components mimarisi ile Liquid'in monolitik yaklaşımı arasında doğru seçimi yapmak için 6 farklı projede topladığımız sayısal verileri paylaşıyoruz. Bu yazıda teorik framework karşılaştırması yok — sadece TTFB, build time, developer velocity ve migration cost üzerinden kanıt-odaklı analiz var.

TTFB: Edge SSR vs Server-Side Render

İlk metrik Time to First Byte. Hydrogen projelerinde Oxygen (Shopify'ın edge runtime'ı) ile Cloudflare Workers arasında test ettik. Liquid temalar Shopify'ın default rendering pipeline'ını kullanıyor.

Benchmark setup:

• Hydrogen: Remix 2.x + Oxygen, 8 route, ortalama 120kb bundle
• Liquid: Dawn 15.0, default cache ayarları
• Test: WebPageTest, Virginia location, 3G Fast connection, 9 run ortalaması

Sonuç:

Hydrogen'de edge SSR caching stratejisi doğru kurulduğunda TTFB %58 düşüyor. Ama bu sadece statik route'lar için geçerli — cart, checkout gibi personalized route'larda fark %30'a düşüyor çünkü cache bypass oluyor.

Personalized Route Tradeoff

Hydrogen'de personalization latency şöyle çalışıyor: her kullanıcı için cart query Storefront API'ye gidiyor, bu roundtrip edge'de bile ~80-120ms ekliyor. Liquid'de bu query server-side template içinde çözülüyor, ek roundtrip yok. Yani personalized sayfa sayısı yüksekse (örn çok variant gösteren PDP'ler) TTFB kazancı düşer. Bir kozmetik projesinde 240 SKU'lu PDP'de Hydrogen TTFB 290ms, Liquid 380ms — fark %23.

Build Time: Dev Iteration Speed

İkinci metrik: local dev ve production build süresi. Hydrogen projelerinde Vite kullanıyoruz, Liquid'de Theme Kit veya Shopify CLI.

Dev server başlatma:

• Liquid (Theme Kit): ~4s
• Hydrogen (Vite dev): ~1.8s

Production build:

• Liquid: 0s (build yok, doğrudan Shopify render ediyor)
• Hydrogen: 12-18s (bundle + SSR output generation)

Liquid'de build aşaması olmadığı için CI/CD pipeline daha basit. Hydrogen'de npm run build adımı var, bu küçük değişikliklerde bile 12s ekliyor. Ama hot module replacement (HMR) Hydrogen'de çok daha hızlı — Liquid'de .liquid dosyası değişince Theme Kit senkronizasyon yapıyor (~2-3s), Hydrogen'de Vite HMR anında uyguluyor (<200ms).

Günde 50+ değişiklik yapan ekiplerde bu fark dev velocity'ye doğrudan yansıyor. Bir fashion brand projesinde sprint velocity Hydrogen'e geçince %18 arttı — sebep: bekleme süresi yerine akış durumunda kalıyor developer.

Developer Velocity: TypeScript + Tooling

Üçüncü metrik: TypeScript coverage, linting, testing. Liquid JavaScript ile yönetiliyor (Liquid içinde <script> tag'ler), Hydrogen full TypeScript.

Hata yakalama oranı:

Hydrogen'de Storefront API response'ları TypeScript tip tanımları ile geliyor. Yani API contract değişirse build fail oluyor — runtime hatası değil compile-time. Liquid'de bu tip değişiklikleri ancak production'da görüyoruz.

Bir örnek: Storefront API product.metafields response yapısını değiştirdi (2025 Q2). Hydrogen projelerinde TypeScript hatası fırlattı, deployment başarısız oldu, fix edildi. Liquid projelerinde production'da console error olarak göründü, 3 gün sonra fark edildi. Bu risk farkı büyük commerce site'larda kritik.

Migration Cost: Refactor Effort

Dördüncü metrik: mevcut Liquid tema Hydrogen'e taşımanın maliyeti. Üç farklı projedeki effort datası:

Proje A (fashion, 80 SKU):

• Liquid LOC: ~4200
• Hydrogen migration: 18 developer-day
• Component sayısı: 32 React component

Proje B (electronics, 1200 SKU):

• Liquid LOC: ~9800
• Hydrogen migration: 42 developer-day
• Component sayısı: 78 React component

Proje C (cosmetics, 240 SKU):

• Liquid LOC: ~6100
• Hydrogen migration: 28 developer-day
• Component sayısı: 51 React component

Ortalama migration cost: 1 Liquid LOC = 0.004 developer-day. Yani 5000 satırlık Liquid tema ~20 developer-day Hydrogen'e taşınıyor. Bu süreye test + QA dahil değil, sadece development.

Migration'da en çok zaman alan alan: cart/checkout flow (Liquid'de Shopify native, Hydrogen'de custom implementation gerekiyor). Proje B'de checkout customization için 12 gün ekstra harcandı çünkü dynamic discount logic Liquid'den React'e taşınırken yeniden test edilmesi gerekti.

Tradeoff Analizi

Migration cost'u haklı çıkaran senaryo: yüksek traffic + personalization requirement. Bir travel e-commerce site'da (günlük 120k session) Hydrogen'e geçtikten sonra conversion rate %2.1 → %2.6 arttı. Sebep: LCP 2.8s'den 1.4s'ye düştü, bounce rate düştü. 20 günlük migration cost 4 ayda ROI yaptı.

Haklı çıkaramayan senaryo: düşük traffic + sık güncellenmeyen katalog. Bir B2B industrial parts site'ı (günlük 800 session) migration cost'unu 14 ayda amorti edemedi çünkü traffic artışı olmadı, sadece dev stack değişti.

Runtime Cost: Hosting + API Quota

Beşinci metrik: infrastructure ve API kullanım maliyeti. Hydrogen Oxygen'de veya self-hosted edge runtime'da çalışıyor, Liquid Shopify sunucularında.

Oxygen pricing (Shopify Plus):

• Dahil: 1M request/ay
• Üstü: $0.50 / 10k request

Storefront API quota:

• Hydrogen: Storefront API üzerinden her şey çekiliyor (query cost artıyor)
• Liquid: Server-side render, API query sayısı daha az

Bir moda site'ında (200k monthly session):

• Liquid: 0 ekstra hosting cost (Shopify dahil)
• Hydrogen: $120/ay (2.4M request, 1.4M fazla)

API query cost Hydrogen'de dikkat gerektirir. Her SSR route Storefront API'ye istek atıyor. Cache stratejisi agresif yapılmazsa quota aşılabiliyor. Projelerimizde stale-while-revalidate pattern kullanıyoruz:

// Hydrogen route loader örnek
export async function loader({context}: LoaderFunctionArgs) {
  const {storefront} = context;
  
  return defer({
    products: storefront.query(PRODUCTS_QUERY, {
      cache: storefront.CacheCustom({
        mode: 'public',
        maxAge: 3600,
        staleWhileRevalidate: 86400, // 24 saat stale kabul et
      }),
    }),
  });
}

Bu pattern ile API request sayısını %40 düşürdük. Ama stale content riski var — fiyat/stok değişiklikleri 1 saate kadar gecikmeli gösterilebilir. Tradeoff: maliyet vs freshness.

Kararı Hangi Faktörlerle Verdik

Altıncı metrik yok — bu bölümde karar matrisi. Hydrogen seçtiğimiz projeler:

1. Günlük 50k+ session — LCP iyileşmesinin conversion'a doğrudan etkisi var
2. Personalization requirement yüksek — edge SSR ile dynamic content hızlı
3. Developer team React bilir — migration smooth, velocity artıyor
4. Shopify Plus kullanıyor — Oxygen dahil, ekstra runtime cost yok

Liquid'de kaldığımız projeler:

1. Günlük 5k altı session — migration cost'u haklı çıkmıyor
2. Statik katalog — sık güncelleme yok, Liquid template yeterli
3. Küçük dev team — React bilmiyor, öğrenme maliyeti yüksek
4. Budget kısıtlı — migration + hosting cost absorbe edilemiyor

Somut örnek: Bir süpermarket zinciri projesinde (günlük 80k session, 4000 SKU) Hydrogen'e geçtik. TTFB 480ms → 190ms, LCP 3.2s → 1.6s düştü. Conversion rate %1.8 → %2.3 arttı (+%27). Migration 35 developer-day sürdü, 6 ayda ROI yaptı. Aynı dönemde bir boutique hotel projesinde (günlük 1200 session) Liquid'de kaldık çünkü traffic düşük, LCP zaten 2.1s (kabul edilebilir), migration justify edilemedi.

Sonraki Adım: Hybrid Yaklaşım

Hydrogen/Liquid seçimi binary değil. Headless Commerce mimarisinde bazı route'ları Hydrogen ile edge SSR yapıp kritik olmayan sayfaları Liquid'de bırakabilirsiniz. Örneğin PDP + PLP Hydrogen, blog + info pages Liquid. Bu hybrid setup migration risk azaltıyor, cost kontrollü artıyor.

Bizim tercih kriterleri: sayılar konuşuyor — TTFB, conversion rate, developer velocity. Eğer session volümünüz yüksek ve Core Web Vitals kritikse Hydrogen net kazanç. Traffic düşükse ve dev team React bilmiyorsa Liquid pragmatik seçim. Kararı vereceğiniz yer: kendi metriklerinizin olduğu dashboard.