[{"data":1,"prerenderedAt":1084},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik":13},{"i18nKey":4,"paths":5},"tech-002-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-detras-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-numbers","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":12,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":1078,"_id":1079,"_source":1080,"_file":1081,"_stem":1082,"_extension":1083},"tech",false,"","Shopify Hydrogen vs Liquid: Kararı Hangi Sayılarla Verdik","TTFB 840ms → 180ms, build time 12dk → 90sn. Hydrogen geçişinin arkasındaki sayılar, tradeoff'lar ve migration cost hesabı.","2026-05-09",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","remix","ttfb",8,"Roibase",{"type":29,"children":30,"toc":1068},"root",[31,39,46,51,56,61,182,187,193,198,203,208,215,220,246,251,270,275,298,304,309,463,468,473,478,483,748,759,765,770,778,811,819,837,845,863,882,887,922,933,938,944,949,957,980,988,1022,1027,1032,1038,1043,1048,1062],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Shopify'ın Liquid temalarını 7 yıldır kullanıyorduk. Theme customization limitleri, server response time sabitleri ve monolitik deploy cycle'ları bizi sınırlamaya başladığında \"headless\" kelimesi masaya geldi. Ama karar vermeyi engelleyen soru şuydu: Hydrogen'e geçiş ROI'sini nasıl ölçeceğiz? Bu yazı o soruya verdiğimiz yanıtın sayısal detayı — TTFB, build time, developer velocity, migration cost. Hydrogen seçtik çünkü bir framework değil, ölçülebilir performans kazanımı verdi.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"liquidin-performans-tavanı",[44],{"type":37,"value":45},"Liquid'in Performans Tavanı",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Shopify'ın Liquid theme engine'i server-rendered HTML döndürür. Sunucu tarafında Liquid syntax parse edilir, Storefront API çağrıları yapılır, HTML birleştirilir ve client'a gönderilir. Bu mimari basit ve stabil — ama ceiling var.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Bizim Production store'da median TTFB 840ms idi (RUM data, Cloudflare Analytics). %95 percentile 1.4 saniyeye çıkıyordu. Shopify'ın server response time'ı kontrol edemiyoruz — shared infrastructure. Liquid theme dosyalarını optimize etsek bile (unused section lazy load, snippet count azaltma) sunucu tarafı latency sabitti.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Build time ayrı bir sorun. Theme dosyasında değişiklik yaptığınızda Shopify CLI üzerinden push ediyorsunuz. Ortalama deploy süresi 12 dakika. CI\u002FCD pipeline'ında bu süre stage→production arasında beklemek demek. A\u002FB test iteration hızı düşük. Developer velocity kısıtlı.",{"type":32,"tag":62,"props":63,"children":67},"pre",{"className":64,"code":65,"language":66,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Liquid theme deploy (average)\nshopify theme push --store=production\n⏱ Upload: 4m 20s\n⏱ Processing: 7m 40s\n✅ Total: 12m 00s\n","bash",[68],{"type":32,"tag":69,"props":70,"children":71},"code",{"__ignoreMap":16},[72,84,111,135,158],{"type":32,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78],{"type":32,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#6A737D",[82],{"type":37,"value":83},"# Liquid theme deploy (average)\n",{"type":32,"tag":73,"props":85,"children":87},{"class":75,"line":86},2,[88,94,100,105],{"type":32,"tag":73,"props":89,"children":91},{"style":90},"--shiki-default:#B392F0",[92],{"type":37,"value":93},"shopify",{"type":32,"tag":73,"props":95,"children":97},{"style":96},"--shiki-default:#9ECBFF",[98],{"type":37,"value":99}," theme",{"type":32,"tag":73,"props":101,"children":102},{"style":96},[103],{"type":37,"value":104}," push",{"type":32,"tag":73,"props":106,"children":108},{"style":107},"--shiki-default:#79B8FF",[109],{"type":37,"value":110}," --store=production\n",{"type":32,"tag":73,"props":112,"children":114},{"class":75,"line":113},3,[115,120,125,130],{"type":32,"tag":73,"props":116,"children":117},{"style":90},[118],{"type":37,"value":119},"⏱",{"type":32,"tag":73,"props":121,"children":122},{"style":96},[123],{"type":37,"value":124}," Upload:",{"type":32,"tag":73,"props":126,"children":127},{"style":96},[128],{"type":37,"value":129}," 4m",{"type":32,"tag":73,"props":131,"children":132},{"style":96},[133],{"type":37,"value":134}," 20s\n",{"type":32,"tag":73,"props":136,"children":138},{"class":75,"line":137},4,[139,143,148,153],{"type":32,"tag":73,"props":140,"children":141},{"style":90},[142],{"type":37,"value":119},{"type":32,"tag":73,"props":144,"children":145},{"style":96},[146],{"type":37,"value":147}," Processing:",{"type":32,"tag":73,"props":149,"children":150},{"style":96},[151],{"type":37,"value":152}," 7m",{"type":32,"tag":73,"props":154,"children":155},{"style":96},[156],{"type":37,"value":157}," 40s\n",{"type":32,"tag":73,"props":159,"children":161},{"class":75,"line":160},5,[162,167,172,177],{"type":32,"tag":73,"props":163,"children":164},{"style":90},[165],{"type":37,"value":166},"✅",{"type":32,"tag":73,"props":168,"children":169},{"style":96},[170],{"type":37,"value":171}," Total:",{"type":32,"tag":73,"props":173,"children":174},{"style":96},[175],{"type":37,"value":176}," 12m",{"type":32,"tag":73,"props":178,"children":179},{"style":96},[180],{"type":37,"value":181}," 00s\n",{"type":32,"tag":33,"props":183,"children":184},{},[185],{"type":37,"value":186},"Liquid'in tradeoff'u: basit kurulum, sıfır infrastructure yönetimi — ama performans kontrolü yok, iteration yavaş.",{"type":32,"tag":40,"props":188,"children":190},{"id":189},"hydrogenin-teknik-vaadi",[191],{"type":37,"value":192},"Hydrogen'in Teknik Vaadi",{"type":32,"tag":33,"props":194,"children":195},{},[196],{"type":37,"value":197},"Hydrogen, Shopify'ın Remix üzerine kurulu headless framework'ü. React Server Components, streaming SSR, edge deployment. Mimari fark şu: Liquid'de Shopify sunucusu HTML render eder. Hydrogen'de sen kendi edge sunucunu deploy edersin (Oxygen, Cloudflare, Vercel). Storefront API'yi doğrudan çağırırsın, response'u component tree'de stream edersin.",{"type":32,"tag":33,"props":199,"children":200},{},[201],{"type":37,"value":202},"TTFB vaadi: edge node'dan render ettiğin için Shopify sunucu latency'si ortadan kalkar. Cloudflare Workers'a deploy edersen median TTFB 100-200ms aralığına düşer (Cloudflare'in POP latency'si + Storefront API RTT). Build time vaadi: Vite-based build, incremental deploy, 2 dakikanın altı.",{"type":32,"tag":33,"props":204,"children":205},{},[206],{"type":37,"value":207},"Ama vaatlerin yanında cost var: migration effort, developer learning curve, infrastructure ownership. Biz bu tradeoff'ları sayısal modelleyerek ilerledik.",{"type":32,"tag":209,"props":210,"children":212},"h3",{"id":211},"benchmark-metodolojisi",[213],{"type":37,"value":214},"Benchmark Metodolojisi",{"type":32,"tag":33,"props":216,"children":217},{},[218],{"type":37,"value":219},"İki ortam kurduk:",{"type":32,"tag":221,"props":222,"children":223},"ol",{},[224,236],{"type":32,"tag":225,"props":226,"children":227},"li",{},[228,234],{"type":32,"tag":229,"props":230,"children":231},"strong",{},[232],{"type":37,"value":233},"Liquid Baseline:",{"type":37,"value":235}," Production store, Dawn theme fork, 80+ section, Cloudflare proxy (cache bypass)",{"type":32,"tag":225,"props":237,"children":238},{},[239,244],{"type":32,"tag":229,"props":240,"children":241},{},[242],{"type":37,"value":243},"Hydrogen Prototype:",{"type":37,"value":245}," Aynı homepage component tree, Cloudflare Workers deploy, Storefront API 2024-01 version",{"type":32,"tag":33,"props":247,"children":248},{},[249],{"type":37,"value":250},"Test setup:",{"type":32,"tag":252,"props":253,"children":254},"ul",{},[255,260,265],{"type":32,"tag":225,"props":256,"children":257},{},[258],{"type":37,"value":259},"WebPageTest (Dulles location, Moto G4, 3G Fast)",{"type":32,"tag":225,"props":261,"children":262},{},[263],{"type":37,"value":264},"3 run median değerleri",{"type":32,"tag":225,"props":266,"children":267},{},[268],{"type":37,"value":269},"Cache cold state (her test öncesi cache flush)",{"type":32,"tag":33,"props":271,"children":272},{},[273],{"type":37,"value":274},"Metrikler:",{"type":32,"tag":252,"props":276,"children":277},{},[278,283,288,293],{"type":32,"tag":225,"props":279,"children":280},{},[281],{"type":37,"value":282},"TTFB (Time to First Byte)",{"type":32,"tag":225,"props":284,"children":285},{},[286],{"type":37,"value":287},"LCP (Largest Contentful Paint)",{"type":32,"tag":225,"props":289,"children":290},{},[291],{"type":37,"value":292},"TBT (Total Blocking Time)",{"type":32,"tag":225,"props":294,"children":295},{},[296],{"type":37,"value":297},"Build time (CI\u002FCD içinde ölçüldü)",{"type":32,"tag":40,"props":299,"children":301},{"id":300},"performans-karşılaştırması",[302],{"type":37,"value":303},"Performans Karşılaştırması",{"type":32,"tag":33,"props":305,"children":306},{},[307],{"type":37,"value":308},"Sonuçlar (median 3 run):",{"type":32,"tag":310,"props":311,"children":312},"table",{},[313,342],{"type":32,"tag":314,"props":315,"children":316},"thead",{},[317],{"type":32,"tag":318,"props":319,"children":320},"tr",{},[321,327,332,337],{"type":32,"tag":322,"props":323,"children":324},"th",{},[325],{"type":37,"value":326},"Metric",{"type":32,"tag":322,"props":328,"children":329},{},[330],{"type":37,"value":331},"Liquid",{"type":32,"tag":322,"props":333,"children":334},{},[335],{"type":37,"value":336},"Hydrogen",{"type":32,"tag":322,"props":338,"children":339},{},[340],{"type":37,"value":341},"Fark",{"type":32,"tag":343,"props":344,"children":345},"tbody",{},[346,376,405,434],{"type":32,"tag":318,"props":347,"children":348},{},[349,358,363,368],{"type":32,"tag":350,"props":351,"children":352},"td",{},[353],{"type":32,"tag":229,"props":354,"children":355},{},[356],{"type":37,"value":357},"TTFB",{"type":32,"tag":350,"props":359,"children":360},{},[361],{"type":37,"value":362},"840ms",{"type":32,"tag":350,"props":364,"children":365},{},[366],{"type":37,"value":367},"180ms",{"type":32,"tag":350,"props":369,"children":370},{},[371],{"type":32,"tag":229,"props":372,"children":373},{},[374],{"type":37,"value":375},"-79%",{"type":32,"tag":318,"props":377,"children":378},{},[379,387,392,397],{"type":32,"tag":350,"props":380,"children":381},{},[382],{"type":32,"tag":229,"props":383,"children":384},{},[385],{"type":37,"value":386},"LCP",{"type":32,"tag":350,"props":388,"children":389},{},[390],{"type":37,"value":391},"2.4s",{"type":32,"tag":350,"props":393,"children":394},{},[395],{"type":37,"value":396},"1.1s",{"type":32,"tag":350,"props":398,"children":399},{},[400],{"type":32,"tag":229,"props":401,"children":402},{},[403],{"type":37,"value":404},"-54%",{"type":32,"tag":318,"props":406,"children":407},{},[408,416,421,426],{"type":32,"tag":350,"props":409,"children":410},{},[411],{"type":32,"tag":229,"props":412,"children":413},{},[414],{"type":37,"value":415},"TBT",{"type":32,"tag":350,"props":417,"children":418},{},[419],{"type":37,"value":420},"680ms",{"type":32,"tag":350,"props":422,"children":423},{},[424],{"type":37,"value":425},"220ms",{"type":32,"tag":350,"props":427,"children":428},{},[429],{"type":32,"tag":229,"props":430,"children":431},{},[432],{"type":37,"value":433},"-68%",{"type":32,"tag":318,"props":435,"children":436},{},[437,445,450,455],{"type":32,"tag":350,"props":438,"children":439},{},[440],{"type":32,"tag":229,"props":441,"children":442},{},[443],{"type":37,"value":444},"Build Time",{"type":32,"tag":350,"props":446,"children":447},{},[448],{"type":37,"value":449},"12m 00s",{"type":32,"tag":350,"props":451,"children":452},{},[453],{"type":37,"value":454},"1m 30s",{"type":32,"tag":350,"props":456,"children":457},{},[458],{"type":32,"tag":229,"props":459,"children":460},{},[461],{"type":37,"value":462},"-88%",{"type":32,"tag":33,"props":464,"children":465},{},[466],{"type":37,"value":467},"TTFB düşüşü beklentimize uydu. Hydrogen'de Cloudflare Workers edge node'u Storefront API'ye 40-60ms RTT ile ulaşıyor (Shopify'ın CDN'i zaten Cloudflare üzerinde). Liquid'de Shopify sunucusu Liquid parse + API çağrı + HTML birleştirme yapıyor — minimum 600ms overhead.",{"type":32,"tag":33,"props":469,"children":470},{},[471],{"type":37,"value":472},"LCP kazanımı streaming SSR'dan geldi. Hydrogen ilk byte'ı erken gönderip HTML'i stream ediyor. Critical content (hero image, ATF product grid) önce render ediliyor, below-the-fold lazy load. Liquid'de HTML blocking render — tüm sayfa hazır olana kadar gönderilmiyor.",{"type":32,"tag":33,"props":474,"children":475},{},[476],{"type":37,"value":477},"TBT düşüşü bundle size + hydration optimizasyonundan. Hydrogen'de React Server Components kullandık — client-side JS bundle 120KB (gzip). Liquid theme'de jQuery + custom scripts 340KB idi. Hydration time azaldı.",{"type":32,"tag":33,"props":479,"children":480},{},[481],{"type":37,"value":482},"Build time farkı development velocity'ye doğrudan etki eder. 12 dakika yerine 90 saniye, günde 10 deploy yapıyorsanız 115 dakika tasarruf. CI\u002FCD pipeline'ı hızlanır, A\u002FB test iteration cycle kısalır.",{"type":32,"tag":62,"props":484,"children":488},{"className":485,"code":486,"language":487,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen streaming SSR örneği (Remix loader)\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  \n  const productsPromise = storefront.query(PRODUCTS_QUERY);\n  const collectionsPromise = storefront.query(COLLECTIONS_QUERY);\n  \n  \u002F\u002F Stream: ilk response hemen dönüyor\n  return defer({\n    products: productsPromise,\n    collections: collectionsPromise,\n  });\n}\n","typescript",[489],{"type":32,"tag":69,"props":490,"children":491},{"__ignoreMap":16},[492,500,556,589,597,639,677,685,693,712,721,730,739],{"type":32,"tag":73,"props":493,"children":494},{"class":75,"line":76},[495],{"type":32,"tag":73,"props":496,"children":497},{"style":80},[498],{"type":37,"value":499},"\u002F\u002F Hydrogen streaming SSR örneği (Remix loader)\n",{"type":32,"tag":73,"props":501,"children":502},{"class":75,"line":86},[503,509,514,519,524,530,536,541,546,551],{"type":32,"tag":73,"props":504,"children":506},{"style":505},"--shiki-default:#F97583",[507],{"type":37,"value":508},"export",{"type":32,"tag":73,"props":510,"children":511},{"style":505},[512],{"type":37,"value":513}," async",{"type":32,"tag":73,"props":515,"children":516},{"style":505},[517],{"type":37,"value":518}," function",{"type":32,"tag":73,"props":520,"children":521},{"style":90},[522],{"type":37,"value":523}," loader",{"type":32,"tag":73,"props":525,"children":527},{"style":526},"--shiki-default:#E1E4E8",[528],{"type":37,"value":529},"({ ",{"type":32,"tag":73,"props":531,"children":533},{"style":532},"--shiki-default:#FFAB70",[534],{"type":37,"value":535},"context",{"type":32,"tag":73,"props":537,"children":538},{"style":526},[539],{"type":37,"value":540}," }",{"type":32,"tag":73,"props":542,"children":543},{"style":505},[544],{"type":37,"value":545},":",{"type":32,"tag":73,"props":547,"children":548},{"style":90},[549],{"type":37,"value":550}," LoaderFunctionArgs",{"type":32,"tag":73,"props":552,"children":553},{"style":526},[554],{"type":37,"value":555},") {\n",{"type":32,"tag":73,"props":557,"children":558},{"class":75,"line":113},[559,564,569,574,579,584],{"type":32,"tag":73,"props":560,"children":561},{"style":505},[562],{"type":37,"value":563},"  const",{"type":32,"tag":73,"props":565,"children":566},{"style":526},[567],{"type":37,"value":568}," { ",{"type":32,"tag":73,"props":570,"children":571},{"style":107},[572],{"type":37,"value":573},"storefront",{"type":32,"tag":73,"props":575,"children":576},{"style":526},[577],{"type":37,"value":578}," } ",{"type":32,"tag":73,"props":580,"children":581},{"style":505},[582],{"type":37,"value":583},"=",{"type":32,"tag":73,"props":585,"children":586},{"style":526},[587],{"type":37,"value":588}," context;\n",{"type":32,"tag":73,"props":590,"children":591},{"class":75,"line":137},[592],{"type":32,"tag":73,"props":593,"children":594},{"style":526},[595],{"type":37,"value":596},"  \n",{"type":32,"tag":73,"props":598,"children":599},{"class":75,"line":160},[600,604,609,614,619,624,629,634],{"type":32,"tag":73,"props":601,"children":602},{"style":505},[603],{"type":37,"value":563},{"type":32,"tag":73,"props":605,"children":606},{"style":107},[607],{"type":37,"value":608}," productsPromise",{"type":32,"tag":73,"props":610,"children":611},{"style":505},[612],{"type":37,"value":613}," =",{"type":32,"tag":73,"props":615,"children":616},{"style":526},[617],{"type":37,"value":618}," storefront.",{"type":32,"tag":73,"props":620,"children":621},{"style":90},[622],{"type":37,"value":623},"query",{"type":32,"tag":73,"props":625,"children":626},{"style":526},[627],{"type":37,"value":628},"(",{"type":32,"tag":73,"props":630,"children":631},{"style":107},[632],{"type":37,"value":633},"PRODUCTS_QUERY",{"type":32,"tag":73,"props":635,"children":636},{"style":526},[637],{"type":37,"value":638},");\n",{"type":32,"tag":73,"props":640,"children":642},{"class":75,"line":641},6,[643,647,652,656,660,664,668,673],{"type":32,"tag":73,"props":644,"children":645},{"style":505},[646],{"type":37,"value":563},{"type":32,"tag":73,"props":648,"children":649},{"style":107},[650],{"type":37,"value":651}," collectionsPromise",{"type":32,"tag":73,"props":653,"children":654},{"style":505},[655],{"type":37,"value":613},{"type":32,"tag":73,"props":657,"children":658},{"style":526},[659],{"type":37,"value":618},{"type":32,"tag":73,"props":661,"children":662},{"style":90},[663],{"type":37,"value":623},{"type":32,"tag":73,"props":665,"children":666},{"style":526},[667],{"type":37,"value":628},{"type":32,"tag":73,"props":669,"children":670},{"style":107},[671],{"type":37,"value":672},"COLLECTIONS_QUERY",{"type":32,"tag":73,"props":674,"children":675},{"style":526},[676],{"type":37,"value":638},{"type":32,"tag":73,"props":678,"children":680},{"class":75,"line":679},7,[681],{"type":32,"tag":73,"props":682,"children":683},{"style":526},[684],{"type":37,"value":596},{"type":32,"tag":73,"props":686,"children":687},{"class":75,"line":26},[688],{"type":32,"tag":73,"props":689,"children":690},{"style":80},[691],{"type":37,"value":692},"  \u002F\u002F Stream: ilk response hemen dönüyor\n",{"type":32,"tag":73,"props":694,"children":696},{"class":75,"line":695},9,[697,702,707],{"type":32,"tag":73,"props":698,"children":699},{"style":505},[700],{"type":37,"value":701},"  return",{"type":32,"tag":73,"props":703,"children":704},{"style":90},[705],{"type":37,"value":706}," defer",{"type":32,"tag":73,"props":708,"children":709},{"style":526},[710],{"type":37,"value":711},"({\n",{"type":32,"tag":73,"props":713,"children":715},{"class":75,"line":714},10,[716],{"type":32,"tag":73,"props":717,"children":718},{"style":526},[719],{"type":37,"value":720},"    products: productsPromise,\n",{"type":32,"tag":73,"props":722,"children":724},{"class":75,"line":723},11,[725],{"type":32,"tag":73,"props":726,"children":727},{"style":526},[728],{"type":37,"value":729},"    collections: collectionsPromise,\n",{"type":32,"tag":73,"props":731,"children":733},{"class":75,"line":732},12,[734],{"type":32,"tag":73,"props":735,"children":736},{"style":526},[737],{"type":37,"value":738},"  });\n",{"type":32,"tag":73,"props":740,"children":742},{"class":75,"line":741},13,[743],{"type":32,"tag":73,"props":744,"children":745},{"style":526},[746],{"type":37,"value":747},"}\n",{"type":32,"tag":33,"props":749,"children":750},{},[751,757],{"type":32,"tag":69,"props":752,"children":754},{"className":753},[],[755],{"type":37,"value":756},"defer",{"type":37,"value":758}," API'si promise'leri stream eder. Client ilk HTML'i alır, data hazır oldukça sayfa progresif render olur. TTFB düşük kalır.",{"type":32,"tag":40,"props":760,"children":762},{"id":761},"migration-cost-hesabı",[763],{"type":37,"value":764},"Migration Cost Hesabı",{"type":32,"tag":33,"props":766,"children":767},{},[768],{"type":37,"value":769},"Performans kazanımı net — ama geçiş maliyeti? Biz şu breakdownu yaptık:",{"type":32,"tag":33,"props":771,"children":772},{},[773],{"type":32,"tag":229,"props":774,"children":775},{},[776],{"type":37,"value":777},"Development Effort:",{"type":32,"tag":252,"props":779,"children":780},{},[781,786,791,796,801],{"type":32,"tag":225,"props":782,"children":783},{},[784],{"type":37,"value":785},"Theme → Hydrogen component migration: 160 saat (2 senior developer, 4 hafta)",{"type":32,"tag":225,"props":787,"children":788},{},[789],{"type":37,"value":790},"Storefront API integration (GraphQL query rewrite): 40 saat",{"type":32,"tag":225,"props":792,"children":793},{},[794],{"type":37,"value":795},"CI\u002FCD pipeline setup (Cloudflare Workers): 16 saat",{"type":32,"tag":225,"props":797,"children":798},{},[799],{"type":37,"value":800},"QA + edge case fixing: 24 saat",{"type":32,"tag":225,"props":802,"children":803},{},[804,809],{"type":32,"tag":229,"props":805,"children":806},{},[807],{"type":37,"value":808},"Toplam:",{"type":37,"value":810}," 240 saat",{"type":32,"tag":33,"props":812,"children":813},{},[814],{"type":32,"tag":229,"props":815,"children":816},{},[817],{"type":37,"value":818},"Infrastructure Cost:",{"type":32,"tag":252,"props":820,"children":821},{},[822,827,832],{"type":32,"tag":225,"props":823,"children":824},{},[825],{"type":37,"value":826},"Cloudflare Workers: $5\u002Fmo (100K request'e kadar ücretsiz — bizim traffic 80K\u002Fmo)",{"type":32,"tag":225,"props":828,"children":829},{},[830],{"type":37,"value":831},"Oxygen (Shopify'ın edge platform'u): $20\u002Fmo başlangıç tier",{"type":32,"tag":225,"props":833,"children":834},{},[835],{"type":37,"value":836},"Biz Cloudflare seçtik — zaten Cloudflare proxy kullanıyorduk",{"type":32,"tag":33,"props":838,"children":839},{},[840],{"type":32,"tag":229,"props":841,"children":842},{},[843],{"type":37,"value":844},"Maintenance Overhead:",{"type":32,"tag":252,"props":846,"children":847},{},[848,853,858],{"type":32,"tag":225,"props":849,"children":850},{},[851],{"type":37,"value":852},"Hydrogen versiyonu her 6 ayda güncellenmeli (Remix upstream takibi)",{"type":32,"tag":225,"props":854,"children":855},{},[856],{"type":37,"value":857},"Developer learning curve: ekipte React + Remix deneyimi gerekli",{"type":32,"tag":225,"props":859,"children":860},{},[861],{"type":37,"value":862},"Liquid'de Shopify Theme Store şablonu kullanıyorduk — Hydrogen'de custom development",{"type":32,"tag":33,"props":864,"children":865},{},[866,868,873,875,880],{"type":37,"value":867},"Toplam one-time migration cost: ",{"type":32,"tag":229,"props":869,"children":870},{},[871],{"type":37,"value":872},"240 saat × $80\u002Fsaat = $19,200",{"type":37,"value":874},". Infrastructure yıllık cost: ",{"type":32,"tag":229,"props":876,"children":877},{},[878],{"type":37,"value":879},"$60",{"type":37,"value":881},".",{"type":32,"tag":33,"props":883,"children":884},{},[885],{"type":37,"value":886},"Buna karşılık kazanımları nasıl modelledik? İki başlık:",{"type":32,"tag":221,"props":888,"children":889},{},[890,906],{"type":32,"tag":225,"props":891,"children":892},{},[893,898,900,905],{"type":32,"tag":229,"props":894,"children":895},{},[896],{"type":37,"value":897},"Conversion Rate Impact:",{"type":37,"value":899}," Core Web Vitals ile conversion rate korelasyonu bilinen (Google\u002FDeloitte study: 0.1s LCP düşüşü = %1-2 conversion lift). Bizim LCP 1.3s düşmüş — konservatif estimate %1.5 lift. Aylık $200K revenue'de = $3K\u002Fay lift. Yıllık ",{"type":32,"tag":229,"props":901,"children":902},{},[903],{"type":37,"value":904},"$36K",{"type":37,"value":881},{"type":32,"tag":225,"props":907,"children":908},{},[909,914,916,921],{"type":32,"tag":229,"props":910,"children":911},{},[912],{"type":37,"value":913},"Developer Velocity:",{"type":37,"value":915}," Build time 88% azaldı. Ekip ayda 40 deploy yapıyor (CI\u002FCD). Her deploy'da 10.5 dakika tasarruf = ayda 420 dakika = 7 saat. Senior developer $80\u002Fsaat varsayımı ile aylık $560 tasarruf. Yıllık ",{"type":32,"tag":229,"props":917,"children":918},{},[919],{"type":37,"value":920},"$6.7K",{"type":37,"value":881},{"type":32,"tag":33,"props":923,"children":924},{},[925,927,932],{"type":37,"value":926},"Payback period: $19,200 \u002F ($36K + $6.7K) = ",{"type":32,"tag":229,"props":928,"children":929},{},[930],{"type":37,"value":931},"5.4 ay",{"type":37,"value":881},{"type":32,"tag":33,"props":934,"children":935},{},[936],{"type":37,"value":937},"Bu hesap migration'ı justify etti. Performans kazanımı + developer velocity artışı migration costunu 6 ayda geri ödüyor.",{"type":32,"tag":40,"props":939,"children":941},{"id":940},"tradeofflar-ve-sınırlar",[942],{"type":37,"value":943},"Tradeoff'lar ve Sınırlar",{"type":32,"tag":33,"props":945,"children":946},{},[947],{"type":37,"value":948},"Hydrogen her store için doğru seçim değil. Şu senaryolarda Liquid daha mantıklı:",{"type":32,"tag":33,"props":950,"children":951},{},[952],{"type":32,"tag":229,"props":953,"children":954},{},[955],{"type":37,"value":956},"Liquid kalmalı:",{"type":32,"tag":252,"props":958,"children":959},{},[960,965,970,975],{"type":32,"tag":225,"props":961,"children":962},{},[963],{"type":37,"value":964},"Traffic düşük (\u003C10K\u002Fmo visitor) — TTFB farkı conversion'a etki etmez",{"type":32,"tag":225,"props":966,"children":967},{},[968],{"type":37,"value":969},"Ekip React\u002FTypeScript bilmiyor — learning curve migration cost'unu 2x'ler",{"type":32,"tag":225,"props":971,"children":972},{},[973],{"type":37,"value":974},"Theme Store şablonu yeterli — customization ihtiyacı yok",{"type":32,"tag":225,"props":976,"children":977},{},[978],{"type":37,"value":979},"Infrastructure yönetimi istemiyorsan — shared Shopify sunucusu basit",{"type":32,"tag":33,"props":981,"children":982},{},[983],{"type":32,"tag":229,"props":984,"children":985},{},[986],{"type":37,"value":987},"Hydrogen'e geçmeli:",{"type":32,"tag":252,"props":989,"children":990},{},[991,996,1012,1017],{"type":32,"tag":225,"props":992,"children":993},{},[994],{"type":37,"value":995},"Traffic yüksek (>50K\u002Fmo) — TTFB her 100ms conversion'ı etkiler",{"type":32,"tag":225,"props":997,"children":998},{},[999,1001,1010],{"type":37,"value":1000},"Custom UI\u002FUX gerekiyor — ",{"type":32,"tag":1002,"props":1003,"children":1007},"a",{"href":1004,"rel":1005},"https:\u002F\u002Fwww.roibase.com.tr\u002Ftr\u002Fheadless",[1006],"nofollow",[1008],{"type":37,"value":1009},"Headless Commerce",{"type":37,"value":1011}," mimarisi esneklik veriyor",{"type":32,"tag":225,"props":1013,"children":1014},{},[1015],{"type":37,"value":1016},"A\u002FB test iteration hızı kritik — CI\u002FCD pipeline 2 dakikanın altı olmalı",{"type":32,"tag":225,"props":1018,"children":1019},{},[1020],{"type":37,"value":1021},"Developer ekip modern frontend stack (React\u002FRemix) ile çalışıyor",{"type":32,"tag":33,"props":1023,"children":1024},{},[1025],{"type":37,"value":1026},"Hydrogen'in bakım maliyeti de var. Remix her 6 ayda major version değişiyor. Hydrogen bunları takip ediyor. Liquid'de Shopify backward compatibility garantisi veriyor — eski theme 5 yıl sonra da çalışır. Hydrogen'de dependency update disiplini gerekli.",{"type":32,"tag":33,"props":1028,"children":1029},{},[1030],{"type":37,"value":1031},"Edge deployment de sınır getiriyor. Cloudflare Workers runtime kısıtlamaları var (CPU time 50ms, memory 128MB). Complex backend logic (örneğin recommendation engine) edge'de çalışmaz — origin server'a offload etmelisin. Liquid'de bu sorun yok, sunucu tarafı sınırsız.",{"type":32,"tag":40,"props":1033,"children":1035},{"id":1034},"i̇şte-şimdi-ne",[1036],{"type":37,"value":1037},"İşte Şimdi Ne",{"type":32,"tag":33,"props":1039,"children":1040},{},[1041],{"type":37,"value":1042},"Biz Hydrogen'i seçtik — çünkü TTFB 79% düştü, build time 88% azaldı, payback period 5.4 ay. Ama karar verirken migration cost modelini yaptık, tradeoff'ları listeledik.",{"type":32,"tag":33,"props":1044,"children":1045},{},[1046],{"type":37,"value":1047},"Eğer sen de Hydrogen'e geçiş düşünüyorsan önce şu soruları cevapla: Monthly visitor sayın kaç? Ekip React biliyor mu? Custom UI\u002FUX ihtiyacın var mı? CI\u002FCD pipeline'ın var mı? Bu sorulara \"evet\" diyorsan sayısal model yap — TTFB farkını conversion lift'e çevir, developer velocity artışını saat cinsinden hesapla. O sayılar migration cost'unu justify ediyorsa ileri git.",{"type":32,"tag":33,"props":1049,"children":1050},{},[1051,1053,1060],{"type":37,"value":1052},"Bizim gibi headless geçişi değerlendiriyorsan ",{"type":32,"tag":1002,"props":1054,"children":1057},{"href":1055,"rel":1056},"https:\u002F\u002Fwww.roibase.com.tr\u002Ftr\u002Fshopify",[1006],[1058],{"type":37,"value":1059},"Shopify Partner Hizmetleri",{"type":37,"value":1061}," kapsamında Hydrogen migration roadmap'i çıkarabiliriz — benchmark, cost model, incremental rollout plan dahil.",{"type":32,"tag":1063,"props":1064,"children":1065},"style",{},[1066],{"type":37,"value":1067},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":113,"depth":113,"links":1069},[1070,1071,1074,1075,1076,1077],{"id":42,"depth":86,"text":45},{"id":189,"depth":86,"text":192,"children":1072},[1073],{"id":211,"depth":113,"text":214},{"id":300,"depth":86,"text":303},{"id":761,"depth":86,"text":764},{"id":940,"depth":86,"text":943},{"id":1034,"depth":86,"text":1037},"markdown","content:tr:tech:shopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik.md","content","tr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik.md","tr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik","md",1778364198173]