Shopify Hydrogen ve Oxygen 2026 — Production Mimarisi Derinlemesine Rehber

Bir Duesseldorf moda markasi subatta bizi aradi, yeni Hydrogen storefrontlarinin canliya alinmasindan alti hafta sonra. Ekip iyi is cikarmisti, tasarim guclu, marka gururluydu. Yalniz bir sey ters gidiyordu — magaza, yerine gectigi eski Liquid temadan daha yavasti. Koleksiyon listelemesinde TTFB 1.8 saniyeydi, mobilde LCP 4.6 saniyeye tirmaniyordu ve PageSpeed skoru yesil 82den kirmizi 41e dusmustu. CTO neredeyse her basarisiz headless projesinde duydugumuz cumleyi kurdu — ama headless daha hizli olacakti hani.

Asil hata React kodunda degildi. Caching mimarisindeydi. Her Storefront API sorgusu cache stratejisi olmadan calisiyordu, koleksiyon loaderlari her requestte bastan fetch ediyordu, deferred data hicbir yerde kullanilmiyordu ve Oxygen full-page caching her responsetaki bir Set-Cookie header yuzunden devre disi kalmisti. Storefront teknik olarak her seyi dogru yapiyordu — ve hicbir sey cachelemiyordu. Sekiz hafta sonra, temiz bir caching refactoru ardindan, cachelenmis routelarda TTFB 180 milisaniye, LCP 2.1 saniye, PageSpeed 91 oldu. Tek bir ozellik degismedi. Sadece mimari.

Bu derinlemesine rehber, Hydrogen icin stratejik karari zaten vermis ve artik duzgun kurup deploy etmek isteyen gelistiriciler, teknik liderler ve CTOlar icindir. Headlesin genel olarak mantikli olup olmadigini hala tartisiyorsaniz once stratejik rehberimizi okuyun — Hydrogeni Ne Zaman Kullanmalisiniz? — bu yazi classic ve headless karsilastirmasini, gizli maliyetleri ve karar agacini ele alir. Bu makale karari verilmis kabul eder ve dogrudan implementasyona girer.

Hydrogen 2026 stacki — bugun gercekte ne teslim ediliyor

Cogu kisinin hala fark etmedigi buyuk kirilma — Hydrogen 2025te React Router 7ye gecti. Remix ve React Router birlesti, React Router 7 Remixin halefidir ve Hydrogen bugun tam olarak bu temelin uzerinde oturur. Hala kendi React Server Components runtimeina sahip Hydrogen 1 doneminden tutorial okuyan biri, artik o bicimde var olmayan bir mimariyle calisiyor demektir. Guncel stack daha yalin ve standart bir web frameworkune cok daha yakin.

Somut olarak bir Hydrogen 2026 projesi su yapi taslarindan olusur. @shopify/hydrogen paketi Shopifye ozgu utilityleri, komponentleri ve hooklari saglar. Storefront client createStorefrontClient ile olusturulur ve tipli Storefront API GraphQL arayuzunu sunar. Giris yapmis musteriler icin yeni Customer Account APIyi saran createCustomerAccountClient vardir. Bunun altinda loaderlari, actionlari ve dosya tabanli routingi ile React Router 7 bulunur. Butun bunlar Shopifyin kendi edge runtimei olan Oxygena deploy edilir.

// server.ts — bir Hydrogen projesinin giris noktasi
const storefront = createStorefrontClient({
  cache: await caches.open('hydrogen'),
  waitUntil,
  i18n: {language: 'TR', country: 'DE'},
  publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
  storeDomain: env.PUBLIC_STORE_DOMAIN,
  storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION,
});

Mimari icin belirleyici nokta — storefront.query basit bir fetch degildir. Argument olarak bir cache stratejisi alan, cache bilincli bir clienttir. Bu parametreyi gormezden gelen, Hydrogenin tum performans temelini har vurup harman savurur. Buna birazdan geri donecegiz, cunku basarisiz buildlerin cogunun cekirdegi tam da buradadir.

Geciste ekipleri sasirtan ikinci bir nokta — Storefront API versiyonludur ve ceyreklik olarak yeni stable versiyonlarla guncellenir. storefrontApiVersion bir kez set edip unutacaginiz bir deger degildir. Her versiyon yaklasik bir yil sonra kaldirilir ve suresi dolmus bir API versiyonu uzerinde duran bir Hydrogen storefronti er ya da gec devre disi kalir. Temiz mimari API versiyon migrasyonunu acil durum olarak degil, bakim dongusunde planli, tekrar eden bir gorev olarak ele alir. Ayni sey Customer Account API ve @shopify/hydrogen paketinin kendisi icin de gecerlidir — her ikisi de hizli hareket eder ve alti ay bagimlilik guncellemeyen biri, sonradan pahaliya patlayan teknik borc biriktirir.

Data loading gercekte nasil calisir — streaming, loaderlar ve deferred data

Hydrogende data loading, Remix ve React Routerdan bildiginiz loader fonksiyonlari uzerinden calisir. Bir loader edgede sunucu tarafinda calisir, veriyi ceker ve route komponentine verir. Klasik client tarafli Reacttan gelen ekipler icin onemli kavramsal siçrama — komponent renderlanirken veri zaten oradadir. useEffect yok, loading spinner yok, client fetchlerinden olusan bir waterfall yok.

Ama asil performans kaldiraci kritik ve kritik olmayan veri ayrimidir. Hydrogen kritik veriyi await ile yuklemenize ve geri kalanini deferred data olarak awaitsiz gecirmenize izin verir. Kritik veri ilk baytı bloklar, kritik olmayan arkadan stream olur. Iste 200 milisaniyelik TTFB ile 1.5 saniyelik TTFB arasindaki fark budur.

// Kritik veriyi awaitle, onerileri deferre et
export async function loader({context, params}) {
  const {storefront} = context;
  // kritik — ilk baytı bloklar
  const product = await storefront.query(PRODUCT_QUERY, {
    variables: {handle: params.handle},
    cache: storefront.CacheLong(),
  });
  // kritik degil — stream olur, await yok
  const recommendations = storefront.query(RECOMMENDATIONS_QUERY, {
    variables: {productId: product.id},
    cache: storefront.CacheShort(),
  });
  return {product, recommendations};
}

Komponentte deferred promise <Await> ve React Suspense ile cozulur. Kullanici urunu aninda gorur, oneriler bir an sonra temiz bir fallback arkasindan belirir. Urun detay sayfalari icin bu belirleyicidir — baslik, fiyat, hero gorseli ve sepete ekle aninda orada olmali, yorumlar, cross-selller ve ilgili urunler ise arkadan stream olmasina izin verilebilir.

En yaygin yanlis kullanim — her seyi awaitlemek. Ilk bayt cikmadan once alti Storefront sorgusunu ard arda awaitleyen loaderlar goruyoruz. Sonuc, tum sorgu surelerinin toplami olan bir TTFBdir. Dogru mimari yalnizca ekranin ustunde gereken veriyi awaitler ve geri kalanini tutarli bicimde deferre eder.

Zihinsel model icin onemli — streaming SSR, Hydrogenin HTMLi tarayiciya birden fazla chunk halinde gonderdigi anlamina gelir. Ilk chunk kritik, awaitlenmis markupi icerir ve aninda cikar, boylece tarayici sunucu hala deferred kisimlar uzerinde calisirken renderlamaya baslayabilir. Kullanici icin bu su demek — bos bir sayfa ve spinner degil, urun sayfasini gorur. Core Web Vitals icin bu su demek — genelde urun ana gorseli olan LCP adayi ilk chunkta yer alir ve erken cizilir. Iste temiz kurulmus bir Hydrogen storefronti tam burada, once bos bir HTML iskeleti gonderip sonra her seyi JavaScript ile ceken client agirlikli bir React SPAsindan ayrilir. Fark sahada olculebilir ve yesil ya da kirmizi LCP degerlerini belirler.

Caching mimarisi — isi yapan ya da bozan kisim

Iste tacin mucevheri ve ayni zamanda en yaygin hata kaynagi. Hydrogenin kesin olarak birbirinden ayirmaniz gereken iki cache katmani vardir — tek tek Storefront sorgulari duzeyinde sub-request caching ve Oxygen edgede full-page caching.

Sub-request caching

Her storefront.query cagrisi bir cache stratejisi alir. Uc yerlesik ve bir ozellestirilebilir strateji vardir. CacheShort() yaklasik bir saniye, dokuz saniyelik stale-while-revalidate penceresiyle cacheler — stok gibi sik degisen veriler icin uygundur. CacheLong() yaklasik bir saat, uzun stale penceresiyle cacheler — urun verisi, koleksiyonlar, menu yapilari icin uygundur. CacheNone() cachingi tamamen kapatir — yalnizca kisisellestirilmis veya sepetle ilgili sorgular icin. Ve CacheCustom() kendi maxAge ve staleWhileRevalidate degerlerinize izin verir.

// Ince ayarli cache stratejileri
storefront.CacheShort();   // maxAge 1s, swr 9s
storefront.CacheLong();    // maxAge 3600s, uzun swr penceresi
storefront.CacheNone();    // cache yok — yalnizca sepet ve musteri
storefront.CacheCustom({
  mode: 'public',
  maxAge: 60 * 60 * 24,     // statik koleksiyon metadatasi icin 24s
  staleWhileRevalidate: 60 * 60 * 24 * 7,
});

Stale-while-revalidate mekanigi asil sirdir. Suresi dolmus bir cache girdisi yine de aninda sunulur, arka planda ise yenisi cekilir. Kullanici asla origine beklemez. Dogru boyutlandirilmis swr pencereleriyle pratikte hicbir kullanici soguk bir sorguya carpmaz.

Oxygen edgede full-page caching

Ikinci katman full-page cachingdir. Oxygen, response cachelenebilir ise tam HTML responselarini edgede cacheleyebilir. Ve en yaygin tuzak tam da buradadir — bir route bir Set-Cookie header set ettigi anda response artik cachelenebilir degildir. Cok ekip session cookielerini veya analytics cookielerini her responseta global olarak set eder ve boylece storefrontun tum full-page cachingini farkinda olmadan devre disi birakir.

Temiz mimari kesin olarak ayirir — statik, kisisellestirilmemis routelar (ana sayfa, koleksiyonlar, anonim kullanicilar icin urun sayfalari) Set-Cookie olmadan cachelenebilir responselar dondurur. Kisisellestirilmis routelar (sepet, hesap, checkout oncesi) cookie set eder ve bilincli olarak edgede cachelenmez. Sepet durumu ayri bir cookie uzerinden calisir ve sepet komponenti client tarafinda hydrate olur, boylece HTML sayfasinin kendisi statik kalabilir.

Cache gecersiz kilma — durustce gercek

Hydrogende cache gecersiz kilma temiz bir push sistemi degildir. Kutudan cikan haliyle webhook tetikli urun bazli purge yoktur. Gercek su — kisa maxAge degerleri arti uzun bir stale-while-revalidate ile calisir ve bir fiyat degisikliginin maxAge sinirina kadar birkac saniye surdugunu kabul edersiniz. Cogu magaza icin bu tamamen kabul edilebilir. Gercek aninda gecersiz kilmaya ihtiyaci olan — ornegin saniye hassasiyetli fiyatli flash indirimler — bu routelar icin cache stratejisini CacheShort veya CacheNoneye ayarlamali ve origin yukunu bilincli olarak ustlenmelidir.

Oxygende deploy — edge runtime, limitler ve yapamayacaklariniz

Oxygen, Shopifyin Hydrogen icin kuresel dagitik hostingidir ve Cloudflare Workers tabanli bir edge runtime uzerinde calisir. Bu bir Node sunucusu degildir. Ve bu tek cumle gordugumuz deployment sorunlarinin yarisini aciklar.

Bir Cloudflare Worker runtimeinin Node sunucusunda olmayan kati kisitlari vardir. Dosya sistemi yok — yerel dosya sisteminden okuyan veya yazan her kod bozulur. Uzun sureli process yok — her requestin bir CPU zaman butcesi vardir, uzun hesaplamalar veya batch isler olmaz. Node-only API yok — fs, net veya belirli crypto fonksiyonlari gibi Node built-inlerini gerektiren bagimliliklar ek is olmadan calismaz. Icten Node APIleri kullanan bir npm kutuphanesi eklerseniz bunu cogu zaman lokalde degil deploy aninda fark edersiniz.

Buna karsilik Oxygenin muhtesem cozdugu seyler — kendi altyapi yonetiminiz olmadan kuresel edge dagitimi, her pull request icin otomatik preview deploymentlar, Shopify CLI uzerinden temiz env ve secrets yonetimi ve otomatik TLS ile custom domain baglama. PR basina preview deploy hafife alinan bir avantajdir — her branch kendi tam islevsel URLini alir, bu da review ve QAyi ciddi biçimde hizlandirir.

# Secrets ve env degiskenleri Shopify CLI uzerinden
shopify hydrogen env push
shopify hydrogen deploy         # production deploy
# preview deploylar PR basina otomatik olusur

Mimari icin pratik sonuc — her agir hesaplama, her batch is, her gorsel isleme gorevi ve her Node-only sistem entegrasyonu Oxygen workerina degil ayri bir servise aittir. Worker hizli, durumsuz request islemek icin kurulmustur, backend agir yuku icin degil.

Headlesde Core Web Vitals — durustce gercek

Headles etrafindaki en buyuk mit — otomatik hizli oldugu. Degildir. Kotu kurulmus bir Hydrogen storefronti iyi bir Liquid temadan daha yavastir. Headless size mukemmel Core Web Vitals icin araclar verir ama hicbir sey garanti etmez. Giristeki Duesseldorf vakasi kural, istisna degil.

En buyuk LCP kaldiraci gorsel islemedir. Hydrogen, otomatik olarak responsive srcset ureten ve gorselleri Shopify CDN uzerinden optimal formatta sunan Shopify image loader ile <Image> komponentini saglar. Bunun yerine tam cozunurluklu native img etiketleri kullanan biri, mobilde 400 piksellik bir slota 2000 piksellik gorsel yukler ve LCPyi mahveder.

// Responsive srcsetli Hydrogen Image
<Image
  data={product.featuredImage}
  sizes="(min-width: 768px) 50vw, 100vw"
  loading="eager"
  aspectRatio="1/1"
/>

Ikinci kaldirac hydrationdir. Her interaktif React komponenti client tarafinda hydrate edilmeli ve hydration ana thread zamanina mal olur, bu da dogrudan INPyi kotulestirir. Disiplin — yalnizca gercekten interaktif olani hydrate etmek. Statik editoryal bolumler, footerlar, heritage icerigi client JSe ihtiyac duymaz. Ne kadar az hydrate edilirse INP o kadar iyi olur.

Ucuncu kaldirac font stratejisidir. font-display swap olmadan ve subsetting olmadan font yukleme CLS uretir ve LCPyi kaydirir. En fazla iki font ailesi, gercekte kullanilan glyphlere subsetting, ucuncu taraf font hosti yerine kendi CDNiniz uzerinden self-hosted. Ve dorduncu kaldirac — ucuncu taraf scriptler. Tek bir agir pazarlama etiketi Hydrogenin tum INP avantajini yiyebilir. Ucuncu taraf scriptler minimize edilmeli, geciktirilerek yuklenmeli ve consent sonrasi filtrelenmelidir.

Production konulari — sepet, Customer Account API, Markets, SEO ve analytics

useOptimisticCart ile sepet

Sepet her storefrontun en hassas kismidir. Hydrogen, sunucu yanit vermeden once sepet aksiyonlarini UIda optimistik gosteren useOptimisticCarti saglar. Kullanici sepete ekleye tiklar ve sepet mutationi arka planda calisirken urunu aninda gorur. Optimistik UI olmadan her sepet tiklamasi agir hisseder cunku Storefront API gidis donusunu bekler.

Yeni Customer Account API

Giris ve hesap 2026da eski customer access token mekanigi uzerinden degil yeni Customer Account API uzerinden calisir. Client createCustomerAccountClient ile olusturulur ve kimlik saglayici olarak Shopify ile OAuth tabanli giris kullanir. Bu su demek — giris akisi Shopifye yonlendirir ve geri doner, parolalar artik sizin tarafinizdan islenmez, passkeyler ve yeni auth yontemleri otomatik gelir. Hala eski Customer APIyi implemente eden biri tukenmekte olan bir model uzerine insa ediyor demektir.

Headlesde Markets ve i18n

Multi-market ve cok dillilik locale routing uzerinden calisir. Locale baglami (dil ve ulke) tipik olarak URL onekinden turetilir (ornegin /de-de/ ve /tr-de/) ve storefront cliente i18n parametresi olarak verilir. Storefront API sorgusu ardindan fiyatlari dogru para biriminde ve icerigi dogru dilde dondurur. Onemli — Storefront APInin @inContext directivei country ve language ile tutarli beslenmelidir, aksi halde yanlis fiyatlar doner.

DACH markalari icin bunun somut bir sonucu var — Isvicre pazari EUR cevirisi degil CHF ister. Fiyatlari @inContext uzerinden storefronttan dogru para biriminde almak yerine client tarafinda ceviren biri, yuvarlama hatalari, yanlis vergi gosterimi ve en kotu ihtimalle urun sayfasi ile checkout arasinda farkli fiyatlar elde eder. Kural — para birimi ve fiyat gercegi her zaman Shopifyde durur, asla React kodunda degil. Locale baglami ilk loaderdan sepet mutationina kadar tutarli biçimde tasinmalidir, aksi halde kullanici pazari degistirdigi anda sepet yanlis para birimine kayar.

Headlesde SEO — asil risk alani

Headless projelerin en sik gorunurluk kaybettigi alan budur. Liquid temada meta etiketleri, canonical URLler, yapisal veri ve sitemap buyuk olcude otomatik gelir. Hydrogende bunlarin hepsi manuel kurulmalidir. Meta etiketleri loader ve routeun meta export fonksiyonu uzerinden set edilir. Sitemap, Storefront APIyi tum urunler ve koleksiyonlar icin sorgulayan ayri bir route olarak uretilmelidir. Yapisal veri (product schema, breadcrumb schema) elle JSON-LD olarak gomulur. Ve multi-market icin hreflang locale basina temiz set edilmelidir.

Headless buildlerdeki en yaygin SEO hatasi — multi-markette eksik veya yanlis hreflang etiketleri, ki bu arama sonuclarinda market arasi kanibalizasyona yol acar. Ikinci en yaygin — statik uretilmis ve yeni urunleri icermeyen bir sitemap. Bu noktalar sonradan akla gelen degil, en bastan mimaride olmalidir.

Analytics ve Consent Mode

Hydrogen, standart ticaret olaylarini (sayfa goruntuleme, urun goruntuleme, sepete ekleme, checkout) tek biçimde yayan <Analytics.Provider> komponentini saglar. DACH icin kritik olan — Consent Mode. Hicbir izleme scripti onaydan once tetiklenmemelidir. Temiz mimari consent yonetim platformunu tum pazarlama etiketlerinden once devreye alir ve analytics olaylarini yalnizca onay verildikten sonra tetikler. Bu opsiyonel degil, KVKK ve GDPR yukumlulugudur.

Bir Hydrogen buildini olduren 10 mimari hata

1. storefront.query uzerinde cache stratejisi olmamasi. Her sorgu origine cachesiz gider. Cozum — her sorgu bilincli olarak CacheShort, CacheLong veya CacheCustom alir.
2. Loaderda her seyi awaitlemek. TTFB tum sorgu surelerinin toplamina donusur. Cozum — yalnizca ekran ustu veriyi awaitle, geri kalanini Await ile deferred data olarak streamle.
3. Her responseta Set-Cookie. Tum Oxygen full-page cachingini devre disi birakir. Cozum — cookieler yalnizca kisisellestirilmis routelarda, statik routelar cachelenebilir kalir.
4. Image komponenti yerine native img etiketleri. Kucuk slotlarda tam cozunurluklu gorseller LCPyi mahveder. Cozum — sizes ve aspectRatio ile Hydrogen Image komponenti.
5. Asiri hydration. Statik bolumler gereksiz hydrate edilir ve ana threadi yorar. Cozum — yalnizca interaktif komponentleri hydrate et, geri kalanini statik HTML birak.
6. Workerda Node-only bagimliliklar. Lokalde degil yalnizca Oxygen deployunda bozulur. Cozum — edge uyumlu kutuphaneler sec ve agir backend mantigini ayri servislere tasi.
7. SEOnun sonradan akla gelmesi. Eksik meta etiketleri, dinamik sitemap yok, yanlis hreflang. Cozum — meta, sitemap, JSON-LD ve hreflang ilk gunden mimaride.
8. Optimistik UI olmadan sepet. Her sepet tiklamasi API gidis donusunu bekler. Cozum — aninda UI geri bildirimi icin useOptimisticCart.
9. Customer Account API yerine eski Customer API. Tukenmekte olan model uzerine insa. Cozum — OAuth girisli createCustomerAccountClient.
10. Consent gating ve geciktirme olmadan ucuncu taraf scriptler. INP avantajini yer ve GDPRi ihlal eder. Cozum — tum etiketlerden once consent yonetimi, kritik olmayan scriptlerin geciktirilmis yuklenmesi.

DACH markalari icin 2026 maliyet ve ekip gercegi

Hydrogen saf bir Liquid tema ekibi icin bir proje degildir. Gercek React ve TypeScript yetkinligi arti edge runtime ve caching anlayisi gerektirir. Bu maliyete yansir.

React, TypeScript ve Hydrogen deneyimli kidemli bir frontend gelistirici DACH bolgesinde gercekci olarak yilda 75 ila 110 bin EUR maas tutar, Muenchen ve Zurichte ust bantta, kucuk sehirlerde alt bantta. Buna yuzde 20 ila 30 isveren maliyeti eklenir. Hydrogen yetkinligi icin ajans saat ucretleri 110 ila 190 EUR arasindadir — standart Shopify tema isinden acikca yuksek, cunku bu beceri seti daha kittir.

Temiz bir ilk build katalog boyutuna, market sayisina ve ozel ozellik kapsamina gore gercekci olarak uc ila alti ay surer. Ve cogu zaman hafife alinan nokta — bakim yuku. Bir Hydrogen storefronti, guncellenmesi gereken bagimliliklari, migrate edilmesi gereken Shopify API versiyonlari ve goz onunde tutulmasi gereken edge runtime degisiklikleri olan gercek bir yazilim kod tabanidir. Bir Liquid tema yillarca dokunulmadan calisir. Bir Hydrogen storefronti surekli goz kulak olan bir ekip gerektirir. Bu bakim yuku durustce butceye girmelidir — karmasikliga gore gercekci olarak aylik 800 ila 3000 EUR destek.

Vaka calismasi — DACH moda markasi, headless yeniden kurulum, gercek rakamlar

Giristeki Duesseldorf-Flingern moda markasi — isim talep uzerine — tipik headless hatasinin ve cikis yolunun temiz bir ornegidir. Basarisiz ilk canliya alistan sonraki baslangic durumu.

• Koleksiyon listelemesi TTFB — 1.8 saniye
• Mobil LCP — 4.6 saniye
• INP — 340 milisaniye
• Mobil PageSpeed skoru — 41
• Donusum orani — yuzde 1.1 (eski temada 1.7den dusmus)
• Storefront APIde origin yuku — trafik zirvelerinde rate limite yakin

Sekiz haftalik caching ve mimari refactorundan sonra.

• Cachelenmis routelar TTFB — 180 milisaniye
• Mobil LCP — 2.1 saniye
• INP — 160 milisaniye
• Mobil PageSpeed skoru — 91
• Donusum orani — yuzde 1.9
• Origin yuku — sub-request caching ile yaklasik yuzde 85 dustu

Hafta hafta akis. 1. Hafta — performans denetimi, Set-Cookie sorununun ve cachelenmemis sorgularin tespiti. 2. Hafta — tum Storefront sorgularinda sub-request cache stratejileri, urun ve koleksiyon verisi icin CacheLong, stok icin CacheShort. 3. Hafta — loaderin deferred dataya refactoru, kritik veriyi awaitleme, onerileri ve yorumlari streamleme. 4. Hafta — Set-Cookie temizligi, statik routelar cachelenebilir hale getirildi, full-page caching etkinlestirildi. 5. Hafta — gorsel isleme responsive srcsetli Hydrogen Image komponentine tasindi. 6. Hafta — hydration azaltildi, statik editoryal bolumler ayristirildi, font stratejisi temizlendi. 7. Hafta — SEO duzeltmesi, dinamik sitemap, JSON-LD, iki market icin hreflang. 8. Hafta — ucuncu taraf scriptler consent gating arkasinda geciktirildi, analytics provider temiz baglandi, son olcum.

Sikca sorulan sorular

Hydrogen bir Liquid temadan otomatik olarak hizli midir?

Hayir. Hydrogen size mukemmel performans icin araclar verir ama hicbir sey garanti etmez. Kotu cachelenmis bir Hydrogen storefronti iyi bir Dawn tabanli Liquid temadan daha yavastir. Avantaj yalnizca temiz caching mimarisi, deferred data ve disiplinli gorsel ve hydration islemesinden gelir.

Mevcut Node backend kodum Oxygende calisir mi?

Yalnizca edge uyumluysa. Oxygen dosya sistemi, uzun sureli process ve Node-only API olmayan bir Cloudflare Workers runtimeidir. Agir backend mantigi, batch isler ve Node built-in bagimli kutuphaneler Oxygen workerina degil ayri bir servise aittir.

Yeni Customer Account APIyi kullanmak zorunda miyiz?

Yeni buildler icin evet. OAuth girisi, kimlik saglayici olarak Shopify ve passkeyler icin otomatik destek ile guncel standarttir. Eski customer access token mekanigi tukenmekte olan bir modeldir ve yeni projelerde implemente edilmemelidir.

Fiyat degisikliklerinde cache gecersiz kilmayi nasil yonetiriz?

Hydrogenin kutudan cikan webhook tetikli aninda purge ozelligi yoktur. Uygulama — kisa maxAge degerleri arti uzun bir stale-while-revalidate. Bir fiyat degisikligi maxAge penceresi icinde yayilir, genelde saniyeler ila dakikalar. Saniye hassasiyetli flash indirimler icin ilgili routelari bilincli olarak CacheShort veya CacheNoneye ayarlarsiniz.

Headlesde SEO bir risk midir?

Evet, hafife alirsaniz. Buyuk olcude otomatik Liquid temanin aksine meta etiketleri, dinamik sitemap, yapisal veri ve hreflang manuel kurulmalidir. Dogru kurulursa headless SEO esdegerdir; sonradan akla gelen bir sey olarak ele alinirsa gorunurluge mal olur — ozellikle multi-marketteki hreflang hatalari.

Bir Hydrogen storefronti icin ekibimiz ne kadar buyuk olmali?

En az React, TypeScript ve edge runtime yetkinligine sahip bir kidemli gelistirici, arti surekli bakim. Saf bir Liquid tema ekibi yeterli degildir. Cogu DACH markasi icin hibrit yol ekonomiktir — build ve mimari icin bir ajans arti icerik ve operasyon icin bir ic ekip.

Sonuc

React Router 7 ve Oxygen uzerindeki Hydrogen 2026 guclu bir stacktir — ama mimari disiplini odullendirir ve dikkatsizligi acimasizca cezalandirir. Rakiplerini geride birakan bir Hydrogen storefronti ile yerine gectigi Liquid temadan daha yavas olan biri arasindaki fark neredeyse hicbir zaman ozellik kodunda degildir. Caching mimarisinde, deferred data loadingde, gorsel ve hydration islemesinde ve SEOnun en bastan tasarlanip tasarlanmadigi sorusundadir.

Durust mesaj — headless hicbir seyi otomatik kazanmaz. Size birinci sinif Core Web Vitals, kuresel edge dagitimi ve frontend uzerinde tam kontrol icin araclar verir. Ama bu araclarin her biri bilincli ve dogru kullanilmalidir. Stacke saygi gosterirseniz hizli, bakimi yapilabilir ve uluslararasi olceklenebilir bir storefront elde edersiniz. Onu siradan bir React SPAsi gibi ele alirsaniz Duesseldorf vakasini elde edersiniz.

Headlesin markaniz icin dogru yol olup olmadigindan henuz emin degilseniz once stratejik rehberimizi okuyun — Hydrogeni Ne Zaman Kullanmalisiniz?. Edge yurutmesi etrafindaki daha derin teknik temel icin WASM ve edge ile Shopify Functions mimarisi derinlemesine rehberimizi ve checkout katmani icin Checkout Extensibility rehberi 2026yi oneririz. Ya da dogrudan ucretsiz performans ve SEO denetimiyle baslayin. Biz Korschenbroichteki 34Devsiz, Duesseldorfa yaklasik 20 dakika, hizli kalmak zorunda olan DACH markalari icin headless Shopify storefrontlari kuruyoruz.