[{"data":1,"prerenderedAt":1067},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen":13},{"i18nKey":4,"paths":5},"tech-002-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":6,"_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":1061,"_id":1062,"_source":1063,"_file":1064,"_stem":1065,"_extension":1066},"tech",false,"","Shopify Hydrogen vs Liquid: Entscheidungen mit Zahlen getroffen","TTFB, Build-Zeit, Developer Velocity, Migrations­kosten — wie wir die Wahl zwischen Hydrogen und Liquid mit konkreten Metriken getroffen haben. Tradeoff-Analyse und echte Benchmark-Ergebnisse.","2026-06-18",[21,22,23,24,25],"shopify-hydrogen","liquid","headless-commerce","web-performance","ttfb",9,"Roibase",{"type":29,"children":30,"toc":1048},"root",[31,39,46,51,60,80,88,195,200,207,212,218,223,231,244,252,265,287,292,298,311,319,399,404,417,423,428,436,454,462,480,488,506,518,523,529,534,539,545,550,558,571,579,592,597,610,615,902,907,913,918,962,967,1010,1015,1021,1037,1042],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Nach 2024 ist die Architekturentscheidung bei Shopify-Projekten nicht mehr eine Frage „modern oder nicht\". Die Frage lautet: Welche Zahlen rechtfertigen das Projekt? Zwischen Hydrogen's React Server Components Architektur und Liquid's monolithischem Ansatz haben wir in 6 verschiedenen Projekten numerische Daten gesammelt. In diesem Artikel gibt es keine theoretischen Framework-Vergleiche — nur eine faktengestützte Analyse basierend auf TTFB, Build-Zeit, Developer Velocity und Migrations­kosten.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-edge-ssr-vs-server-side-render",[44],{"type":37,"value":45},"TTFB: Edge SSR vs. Server-Side Render",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Erste Metrik: Time to First Byte. Bei Hydrogen-Projekten haben wir zwischen Oxygen (Shopify's Edge Runtime) und Cloudflare Workers getestet. Liquid-Themes nutzen Shopify's Standard-Rendering-Pipeline.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Benchmark-Setup:",{"type":32,"tag":61,"props":62,"children":63},"ul",{},[64,70,75],{"type":32,"tag":65,"props":66,"children":67},"li",{},[68],{"type":37,"value":69},"Hydrogen: Remix 2.x + Oxygen, 8 Routes, durchschnittlich 120KB Bundle",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Liquid: Dawn 15.0, Standard-Cache-Einstellungen",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"Test: WebPageTest, Virginia-Location, 3G Fast Connection, 9 Durchläufe gemittelt",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"Ergebnisse:",{"type":32,"tag":89,"props":90,"children":91},"table",{},[92,121],{"type":32,"tag":93,"props":94,"children":95},"thead",{},[96],{"type":32,"tag":97,"props":98,"children":99},"tr",{},[100,106,111,116],{"type":32,"tag":101,"props":102,"children":103},"th",{},[104],{"type":37,"value":105},"Architektur",{"type":32,"tag":101,"props":107,"children":108},{},[109],{"type":37,"value":110},"TTFB (p50)",{"type":32,"tag":101,"props":112,"children":113},{},[114],{"type":37,"value":115},"TTFB (p95)",{"type":32,"tag":101,"props":117,"children":118},{},[119],{"type":37,"value":120},"LCP",{"type":32,"tag":122,"props":123,"children":124},"tbody",{},[125,149,172],{"type":32,"tag":97,"props":126,"children":127},{},[128,134,139,144],{"type":32,"tag":129,"props":130,"children":131},"td",{},[132],{"type":37,"value":133},"Liquid (Dawn)",{"type":32,"tag":129,"props":135,"children":136},{},[137],{"type":37,"value":138},"420ms",{"type":32,"tag":129,"props":140,"children":141},{},[142],{"type":37,"value":143},"680ms",{"type":32,"tag":129,"props":145,"children":146},{},[147],{"type":37,"value":148},"2,1s",{"type":32,"tag":97,"props":150,"children":151},{},[152,157,162,167],{"type":32,"tag":129,"props":153,"children":154},{},[155],{"type":37,"value":156},"Hydrogen (Oxygen)",{"type":32,"tag":129,"props":158,"children":159},{},[160],{"type":37,"value":161},"180ms",{"type":32,"tag":129,"props":163,"children":164},{},[165],{"type":37,"value":166},"310ms",{"type":32,"tag":129,"props":168,"children":169},{},[170],{"type":37,"value":171},"1,4s",{"type":32,"tag":97,"props":173,"children":174},{},[175,180,185,190],{"type":32,"tag":129,"props":176,"children":177},{},[178],{"type":37,"value":179},"Hydrogen (CF Workers)",{"type":32,"tag":129,"props":181,"children":182},{},[183],{"type":37,"value":184},"140ms",{"type":32,"tag":129,"props":186,"children":187},{},[188],{"type":37,"value":189},"240ms",{"type":32,"tag":129,"props":191,"children":192},{},[193],{"type":37,"value":194},"1,2s",{"type":32,"tag":33,"props":196,"children":197},{},[198],{"type":37,"value":199},"Bei Hydrogen sinkt die TTFB mit korrektem Edge SSR Caching um 58 %. Das gilt jedoch nur für statische Routes — bei personalisierten Routes wie Cart und Checkout fällt der Vorteil auf 30 %, weil der Cache umgangen wird.",{"type":32,"tag":201,"props":202,"children":204},"h3",{"id":203},"personalisierte-routes-als-tradeoff",[205],{"type":37,"value":206},"Personalisierte Routes als Tradeoff",{"type":32,"tag":33,"props":208,"children":209},{},[210],{"type":37,"value":211},"Bei Hydrogen funktioniert die Personalization-Latenz so: Bei jeder User-spezifischen Cart-Query geht eine Anfrage zur Storefront API, und dieser Roundtrip addiert selbst am Edge 80–120ms hinzu. Bei Liquid wird diese Query im Server-Side-Template aufgelöst — kein zusätzlicher Roundtrip. Wenn die Zahl personalisierter Seiten hoch ist (z.B. PDPs mit vielen Varianten), sinkt der TTFB-Vorteil. Bei einem Kosmetik-Projekt mit 240 SKUs betrug die Hydrogen-TTFB 290ms, Liquid 380ms — ein Unterschied von 23 %.",{"type":32,"tag":40,"props":213,"children":215},{"id":214},"build-zeit-developer-iteration-speed",[216],{"type":37,"value":217},"Build-Zeit: Developer Iteration Speed",{"type":32,"tag":33,"props":219,"children":220},{},[221],{"type":37,"value":222},"Zweite Metrik: lokale Development- und Production-Build-Zeiten. Bei Hydrogen nutzen wir Vite, bei Liquid Theme Kit oder Shopify CLI.",{"type":32,"tag":33,"props":224,"children":225},{},[226],{"type":32,"tag":55,"props":227,"children":228},{},[229],{"type":37,"value":230},"Dev-Server-Start:",{"type":32,"tag":61,"props":232,"children":233},{},[234,239],{"type":32,"tag":65,"props":235,"children":236},{},[237],{"type":37,"value":238},"Liquid (Theme Kit): ~4s",{"type":32,"tag":65,"props":240,"children":241},{},[242],{"type":37,"value":243},"Hydrogen (Vite Dev): ~1,8s",{"type":32,"tag":33,"props":245,"children":246},{},[247],{"type":32,"tag":55,"props":248,"children":249},{},[250],{"type":37,"value":251},"Production-Build:",{"type":32,"tag":61,"props":253,"children":254},{},[255,260],{"type":32,"tag":65,"props":256,"children":257},{},[258],{"type":37,"value":259},"Liquid: 0s (kein Build, direktes Rendering durch Shopify)",{"type":32,"tag":65,"props":261,"children":262},{},[263],{"type":37,"value":264},"Hydrogen: 12–18s (Bundle + SSR Output-Generierung)",{"type":32,"tag":33,"props":266,"children":267},{},[268,270,277,279,285],{"type":37,"value":269},"Da bei Liquid keine Build-Phase existiert, ist die CI\u002FCD-Pipeline einfacher. Hydrogen hat einen ",{"type":32,"tag":271,"props":272,"children":274},"code",{"className":273},[],[275],{"type":37,"value":276},"npm run build",{"type":37,"value":278}," Schritt, der selbst bei kleinen Änderungen 12s kostet. Aber Hot Module Replacement (HMR) in Hydrogen ist deutlich schneller — wenn eine ",{"type":32,"tag":271,"props":280,"children":282},{"className":281},[],[283],{"type":37,"value":284},".liquid",{"type":37,"value":286},"-Datei sich ändert, synchronisiert Theme Kit (~2–3s), bei Hydrogen lädt Vite HMR sofort (\u003C200ms).",{"type":32,"tag":33,"props":288,"children":289},{},[290],{"type":37,"value":291},"Bei Teams mit 50+ Änderungen pro Tag macht sich dieser Unterschied in der Developer Velocity bemerkbar. Bei einem Mode-Projekt stieg die Sprint-Velocity nach der Migration zu Hydrogen um 18 % — der Grund: Developer bleiben im Flow statt zu warten.",{"type":32,"tag":40,"props":293,"children":295},{"id":294},"developer-velocity-typescript-tooling",[296],{"type":37,"value":297},"Developer Velocity: TypeScript + Tooling",{"type":32,"tag":33,"props":299,"children":300},{},[301,303,309],{"type":37,"value":302},"Dritte Metrik: TypeScript-Abdeckung, Linting, Testing. Liquid wird mit JavaScript verwaltet (mit ",{"type":32,"tag":271,"props":304,"children":306},{"className":305},[],[307],{"type":37,"value":308},"\u003Cscript>",{"type":37,"value":310},"-Tags), Hydrogen hat vollständiges TypeScript.",{"type":32,"tag":33,"props":312,"children":313},{},[314],{"type":32,"tag":55,"props":315,"children":316},{},[317],{"type":37,"value":318},"Fehlererkennungsrate:",{"type":32,"tag":89,"props":320,"children":321},{},[322,343],{"type":32,"tag":93,"props":323,"children":324},{},[325],{"type":32,"tag":97,"props":326,"children":327},{},[328,333,338],{"type":32,"tag":101,"props":329,"children":330},{},[331],{"type":37,"value":332},"Tool",{"type":32,"tag":101,"props":334,"children":335},{},[336],{"type":37,"value":337},"Liquid",{"type":32,"tag":101,"props":339,"children":340},{},[341],{"type":37,"value":342},"Hydrogen",{"type":32,"tag":122,"props":344,"children":345},{},[346,364,381],{"type":32,"tag":97,"props":347,"children":348},{},[349,354,359],{"type":32,"tag":129,"props":350,"children":351},{},[352],{"type":37,"value":353},"TypeScript Compile-Time Fehler",{"type":32,"tag":129,"props":355,"children":356},{},[357],{"type":37,"value":358},"0",{"type":32,"tag":129,"props":360,"children":361},{},[362],{"type":37,"value":363},"124\u002FSprint",{"type":32,"tag":97,"props":365,"children":366},{},[367,372,377],{"type":32,"tag":129,"props":368,"children":369},{},[370],{"type":37,"value":371},"ESLint Runtime Warnung",{"type":32,"tag":129,"props":373,"children":374},{},[375],{"type":37,"value":376},"8\u002FSprint",{"type":32,"tag":129,"props":378,"children":379},{},[380],{"type":37,"value":358},{"type":32,"tag":97,"props":382,"children":383},{},[384,389,394],{"type":32,"tag":129,"props":385,"children":386},{},[387],{"type":37,"value":388},"Unit-Test-Abdeckung",{"type":32,"tag":129,"props":390,"children":391},{},[392],{"type":37,"value":393},"12 %",{"type":32,"tag":129,"props":395,"children":396},{},[397],{"type":37,"value":398},"68 %",{"type":32,"tag":33,"props":400,"children":401},{},[402],{"type":37,"value":403},"Bei Hydrogen kommen Storefront API Responses mit TypeScript-Definitionen. Wenn sich ein API-Contract ändert, schlägt der Build fehl — kein Runtime-Fehler. Bei Liquid sehen wir solche Probleme erst in Production als Console-Error.",{"type":32,"tag":33,"props":405,"children":406},{},[407,409,415],{"type":37,"value":408},"Ein Beispiel: Die Storefront API änderte die ",{"type":32,"tag":271,"props":410,"children":412},{"className":411},[],[413],{"type":37,"value":414},"product.metafields",{"type":37,"value":416},"-Response-Struktur (Q2 2025). Bei Hydrogen-Projekten warf TypeScript einen Fehler, das Deployment schlug fehl und wurde sofort behoben. Bei Liquid-Projekten wurde der Console-Error erst nach 3 Tagen bemerkt. Dieser Risiko-Unterschied ist bei großen Commerce-Seiten kritisch.",{"type":32,"tag":40,"props":418,"children":420},{"id":419},"migrationskosten-refactor-aufwand",[421],{"type":37,"value":422},"Migrations­kosten: Refactor-Aufwand",{"type":32,"tag":33,"props":424,"children":425},{},[426],{"type":37,"value":427},"Vierte Metrik: Kosten für die Migration eines bestehenden Liquid-Themes zu Hydrogen. Daten aus drei Projekten:",{"type":32,"tag":33,"props":429,"children":430},{},[431],{"type":32,"tag":55,"props":432,"children":433},{},[434],{"type":37,"value":435},"Projekt A (Mode, 80 SKUs):",{"type":32,"tag":61,"props":437,"children":438},{},[439,444,449],{"type":32,"tag":65,"props":440,"children":441},{},[442],{"type":37,"value":443},"Liquid LOC: ~4.200",{"type":32,"tag":65,"props":445,"children":446},{},[447],{"type":37,"value":448},"Hydrogen-Migration: 18 Developer-Tage",{"type":32,"tag":65,"props":450,"children":451},{},[452],{"type":37,"value":453},"Komponenten-Anzahl: 32 React-Komponenten",{"type":32,"tag":33,"props":455,"children":456},{},[457],{"type":32,"tag":55,"props":458,"children":459},{},[460],{"type":37,"value":461},"Projekt B (Elektronik, 1.200 SKUs):",{"type":32,"tag":61,"props":463,"children":464},{},[465,470,475],{"type":32,"tag":65,"props":466,"children":467},{},[468],{"type":37,"value":469},"Liquid LOC: ~9.800",{"type":32,"tag":65,"props":471,"children":472},{},[473],{"type":37,"value":474},"Hydrogen-Migration: 42 Developer-Tage",{"type":32,"tag":65,"props":476,"children":477},{},[478],{"type":37,"value":479},"Komponenten-Anzahl: 78 React-Komponenten",{"type":32,"tag":33,"props":481,"children":482},{},[483],{"type":32,"tag":55,"props":484,"children":485},{},[486],{"type":37,"value":487},"Projekt C (Kosmetik, 240 SKUs):",{"type":32,"tag":61,"props":489,"children":490},{},[491,496,501],{"type":32,"tag":65,"props":492,"children":493},{},[494],{"type":37,"value":495},"Liquid LOC: ~6.100",{"type":32,"tag":65,"props":497,"children":498},{},[499],{"type":37,"value":500},"Hydrogen-Migration: 28 Developer-Tage",{"type":32,"tag":65,"props":502,"children":503},{},[504],{"type":37,"value":505},"Komponenten-Anzahl: 51 React-Komponenten",{"type":32,"tag":33,"props":507,"children":508},{},[509,511,516],{"type":37,"value":510},"Durchschnittliche Migrations­kosten: ",{"type":32,"tag":55,"props":512,"children":513},{},[514],{"type":37,"value":515},"1 Liquid LOC = 0,004 Developer-Tage",{"type":37,"value":517},". Ein 5.000-Zeilen-Liquid-Theme dauert etwa 20 Developer-Tage für die Migration zu Hydrogen. Testing und QA sind hier nicht eingerechnet, nur Development.",{"type":32,"tag":33,"props":519,"children":520},{},[521],{"type":37,"value":522},"Der zeitintensivste Bereich bei der Migration: Cart\u002FCheckout Flow (bei Liquid native Shopify, bei Hydrogen Custom-Implementierung). Bei Projekt B brauchten wir 12 zusätzliche Tage, weil die dynamische Discount-Logik von Liquid nach React migriert und neu getestet werden musste.",{"type":32,"tag":201,"props":524,"children":526},{"id":525},"tradeoff-analyse",[527],{"type":37,"value":528},"Tradeoff-Analyse",{"type":32,"tag":33,"props":530,"children":531},{},[532],{"type":37,"value":533},"Wann rechtfertigt sich die Migrations­kosten: hoher Traffic + hohe Personalization-Anforderungen. Eine Travel-E-Commerce-Seite (täglich 120.000 Sessions) zeigte nach der Hydrogen-Migration eine Conversion-Rate-Steigerung von 2,1 % auf 2,6 %. Grund: LCP fiel von 2,8s auf 1,4s, Bounce-Rate sank. Die 20-tägigen Migrations­kosten machten sich in 4 Monaten bezahlt.",{"type":32,"tag":33,"props":535,"children":536},{},[537],{"type":37,"value":538},"Wann es sich nicht rechtfertigt: niedriger Traffic + seltene Katalog-Updates. Eine B2B-Seite für Industrieteile (täglich 800 Sessions) konnte die Migrations­kosten in 14 Monaten nicht amortisieren, weil kein Traffic-Wachstum kam — nur der Dev-Stack änderte sich.",{"type":32,"tag":40,"props":540,"children":542},{"id":541},"laufende-kosten-hosting-api-quota",[543],{"type":37,"value":544},"Laufende Kosten: Hosting + API-Quota",{"type":32,"tag":33,"props":546,"children":547},{},[548],{"type":37,"value":549},"Fünfte Metrik: Infrastruktur- und API-Nutzungskosten. Hydrogen läuft auf Oxygen oder Self-Hosted Edge Runtime, Liquid auf Shopify-Servern.",{"type":32,"tag":33,"props":551,"children":552},{},[553],{"type":32,"tag":55,"props":554,"children":555},{},[556],{"type":37,"value":557},"Oxygen-Preismodell (Shopify Plus):",{"type":32,"tag":61,"props":559,"children":560},{},[561,566],{"type":32,"tag":65,"props":562,"children":563},{},[564],{"type":37,"value":565},"Inklusive: 1M Requests\u002FMonat",{"type":32,"tag":65,"props":567,"children":568},{},[569],{"type":37,"value":570},"Darüber: $0,50 \u002F 10k Requests",{"type":32,"tag":33,"props":572,"children":573},{},[574],{"type":32,"tag":55,"props":575,"children":576},{},[577],{"type":37,"value":578},"Storefront API Quota:",{"type":32,"tag":61,"props":580,"children":581},{},[582,587],{"type":32,"tag":65,"props":583,"children":584},{},[585],{"type":37,"value":586},"Hydrogen: Alles läuft über Storefront API (Query-Kosten steigen)",{"type":32,"tag":65,"props":588,"children":589},{},[590],{"type":37,"value":591},"Liquid: Server-Side Render, weniger API-Queries",{"type":32,"tag":33,"props":593,"children":594},{},[595],{"type":37,"value":596},"Bei einer Fashion-Seite (200.000 Monthly Sessions):",{"type":32,"tag":61,"props":598,"children":599},{},[600,605],{"type":32,"tag":65,"props":601,"children":602},{},[603],{"type":37,"value":604},"Liquid: 0 zusätzliche Hosting-Kosten (bei Shopify inklusive)",{"type":32,"tag":65,"props":606,"children":607},{},[608],{"type":37,"value":609},"Hydrogen: $120\u002FMonat (2,4M Requests, 1,4M über dem Limit)",{"type":32,"tag":33,"props":611,"children":612},{},[613],{"type":37,"value":614},"Die API-Query-Kosten bei Hydrogen erfordern Aufmerksamkeit. Jede SSR Route schickt eine Storefront API Anfrage. Ohne aggressive Cache-Strategie kann man das Quota überschreiten. Bei unseren Projekten nutzen wir das Stale-While-Revalidate Pattern:",{"type":32,"tag":616,"props":617,"children":621},"pre",{"className":618,"code":619,"language":620,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen Route Loader Beispiel\nexport async function loader({context}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  \n  return defer({\n    products: storefront.query(PRODUCTS_QUERY, {\n      cache: storefront.CacheCustom({\n        mode: 'public',\n        maxAge: 3600,\n        staleWhileRevalidate: 86400, \u002F\u002F 24 Stunden alte Inhalte akzeptieren\n      }),\n    }),\n  });\n}\n","typescript",[622],{"type":32,"tag":271,"props":623,"children":624},{"__ignoreMap":16},[625,637,695,730,739,758,787,805,825,842,866,875,884,893],{"type":32,"tag":626,"props":627,"children":630},"span",{"class":628,"line":629},"line",1,[631],{"type":32,"tag":626,"props":632,"children":634},{"style":633},"--shiki-default:#6A737D",[635],{"type":37,"value":636},"\u002F\u002F Hydrogen Route Loader Beispiel\n",{"type":32,"tag":626,"props":638,"children":640},{"class":628,"line":639},2,[641,647,652,657,663,669,675,680,685,690],{"type":32,"tag":626,"props":642,"children":644},{"style":643},"--shiki-default:#F97583",[645],{"type":37,"value":646},"export",{"type":32,"tag":626,"props":648,"children":649},{"style":643},[650],{"type":37,"value":651}," async",{"type":32,"tag":626,"props":653,"children":654},{"style":643},[655],{"type":37,"value":656}," function",{"type":32,"tag":626,"props":658,"children":660},{"style":659},"--shiki-default:#B392F0",[661],{"type":37,"value":662}," loader",{"type":32,"tag":626,"props":664,"children":666},{"style":665},"--shiki-default:#E1E4E8",[667],{"type":37,"value":668},"({",{"type":32,"tag":626,"props":670,"children":672},{"style":671},"--shiki-default:#FFAB70",[673],{"type":37,"value":674},"context",{"type":32,"tag":626,"props":676,"children":677},{"style":665},[678],{"type":37,"value":679},"}",{"type":32,"tag":626,"props":681,"children":682},{"style":643},[683],{"type":37,"value":684},":",{"type":32,"tag":626,"props":686,"children":687},{"style":659},[688],{"type":37,"value":689}," LoaderFunctionArgs",{"type":32,"tag":626,"props":691,"children":692},{"style":665},[693],{"type":37,"value":694},") {\n",{"type":32,"tag":626,"props":696,"children":698},{"class":628,"line":697},3,[699,704,709,715,720,725],{"type":32,"tag":626,"props":700,"children":701},{"style":643},[702],{"type":37,"value":703},"  const",{"type":32,"tag":626,"props":705,"children":706},{"style":665},[707],{"type":37,"value":708}," {",{"type":32,"tag":626,"props":710,"children":712},{"style":711},"--shiki-default:#79B8FF",[713],{"type":37,"value":714},"storefront",{"type":32,"tag":626,"props":716,"children":717},{"style":665},[718],{"type":37,"value":719},"} ",{"type":32,"tag":626,"props":721,"children":722},{"style":643},[723],{"type":37,"value":724},"=",{"type":32,"tag":626,"props":726,"children":727},{"style":665},[728],{"type":37,"value":729}," context;\n",{"type":32,"tag":626,"props":731,"children":733},{"class":628,"line":732},4,[734],{"type":32,"tag":626,"props":735,"children":736},{"style":665},[737],{"type":37,"value":738},"  \n",{"type":32,"tag":626,"props":740,"children":742},{"class":628,"line":741},5,[743,748,753],{"type":32,"tag":626,"props":744,"children":745},{"style":643},[746],{"type":37,"value":747},"  return",{"type":32,"tag":626,"props":749,"children":750},{"style":659},[751],{"type":37,"value":752}," defer",{"type":32,"tag":626,"props":754,"children":755},{"style":665},[756],{"type":37,"value":757},"({\n",{"type":32,"tag":626,"props":759,"children":761},{"class":628,"line":760},6,[762,767,772,777,782],{"type":32,"tag":626,"props":763,"children":764},{"style":665},[765],{"type":37,"value":766},"    products: storefront.",{"type":32,"tag":626,"props":768,"children":769},{"style":659},[770],{"type":37,"value":771},"query",{"type":32,"tag":626,"props":773,"children":774},{"style":665},[775],{"type":37,"value":776},"(",{"type":32,"tag":626,"props":778,"children":779},{"style":711},[780],{"type":37,"value":781},"PRODUCTS_QUERY",{"type":32,"tag":626,"props":783,"children":784},{"style":665},[785],{"type":37,"value":786},", {\n",{"type":32,"tag":626,"props":788,"children":790},{"class":628,"line":789},7,[791,796,801],{"type":32,"tag":626,"props":792,"children":793},{"style":665},[794],{"type":37,"value":795},"      cache: storefront.",{"type":32,"tag":626,"props":797,"children":798},{"style":659},[799],{"type":37,"value":800},"CacheCustom",{"type":32,"tag":626,"props":802,"children":803},{"style":665},[804],{"type":37,"value":757},{"type":32,"tag":626,"props":806,"children":808},{"class":628,"line":807},8,[809,814,820],{"type":32,"tag":626,"props":810,"children":811},{"style":665},[812],{"type":37,"value":813},"        mode: ",{"type":32,"tag":626,"props":815,"children":817},{"style":816},"--shiki-default:#9ECBFF",[818],{"type":37,"value":819},"'public'",{"type":32,"tag":626,"props":821,"children":822},{"style":665},[823],{"type":37,"value":824},",\n",{"type":32,"tag":626,"props":826,"children":827},{"class":628,"line":26},[828,833,838],{"type":32,"tag":626,"props":829,"children":830},{"style":665},[831],{"type":37,"value":832},"        maxAge: ",{"type":32,"tag":626,"props":834,"children":835},{"style":711},[836],{"type":37,"value":837},"3600",{"type":32,"tag":626,"props":839,"children":840},{"style":665},[841],{"type":37,"value":824},{"type":32,"tag":626,"props":843,"children":845},{"class":628,"line":844},10,[846,851,856,861],{"type":32,"tag":626,"props":847,"children":848},{"style":665},[849],{"type":37,"value":850},"        staleWhileRevalidate: ",{"type":32,"tag":626,"props":852,"children":853},{"style":711},[854],{"type":37,"value":855},"86400",{"type":32,"tag":626,"props":857,"children":858},{"style":665},[859],{"type":37,"value":860},", ",{"type":32,"tag":626,"props":862,"children":863},{"style":633},[864],{"type":37,"value":865},"\u002F\u002F 24 Stunden alte Inhalte akzeptieren\n",{"type":32,"tag":626,"props":867,"children":869},{"class":628,"line":868},11,[870],{"type":32,"tag":626,"props":871,"children":872},{"style":665},[873],{"type":37,"value":874},"      }),\n",{"type":32,"tag":626,"props":876,"children":878},{"class":628,"line":877},12,[879],{"type":32,"tag":626,"props":880,"children":881},{"style":665},[882],{"type":37,"value":883},"    }),\n",{"type":32,"tag":626,"props":885,"children":887},{"class":628,"line":886},13,[888],{"type":32,"tag":626,"props":889,"children":890},{"style":665},[891],{"type":37,"value":892},"  });\n",{"type":32,"tag":626,"props":894,"children":896},{"class":628,"line":895},14,[897],{"type":32,"tag":626,"props":898,"children":899},{"style":665},[900],{"type":37,"value":901},"}\n",{"type":32,"tag":33,"props":903,"children":904},{},[905],{"type":37,"value":906},"Mit diesem Pattern reduzierten wir die API-Request-Anzahl um 40 %. Es gibt aber auch ein Stale-Content-Risiko — Preis- oder Bestand­sänderungen können bis zu 1 Stunde verzögert angezeigt werden. Tradeoff: Kosten vs. Daten­aktualität.",{"type":32,"tag":40,"props":908,"children":910},{"id":909},"die-entscheidung-welche-faktoren-zählten",[911],{"type":37,"value":912},"Die Entscheidung: Welche Faktoren zählten",{"type":32,"tag":33,"props":914,"children":915},{},[916],{"type":37,"value":917},"Sechste Metrik: keine — das ist die Entscheidungs­matrix. Hydrogen kam zum Einsatz bei:",{"type":32,"tag":919,"props":920,"children":921},"ol",{},[922,932,942,952],{"type":32,"tag":65,"props":923,"children":924},{},[925,930],{"type":32,"tag":55,"props":926,"children":927},{},[928],{"type":37,"value":929},"50.000+ tägliche Sessions",{"type":37,"value":931}," — LCP-Verbesserung wirkt sich direkt auf Conversion aus",{"type":32,"tag":65,"props":933,"children":934},{},[935,940],{"type":32,"tag":55,"props":936,"children":937},{},[938],{"type":37,"value":939},"Hohe Personalization-Anforderungen",{"type":37,"value":941}," — Edge SSR mit dynamischem Content ist schnell",{"type":32,"tag":65,"props":943,"children":944},{},[945,950],{"type":32,"tag":55,"props":946,"children":947},{},[948],{"type":37,"value":949},"React-erfahrenes Team",{"type":37,"value":951}," — Migration läuft smooth, Velocity steigt",{"type":32,"tag":65,"props":953,"children":954},{},[955,960],{"type":32,"tag":55,"props":956,"children":957},{},[958],{"type":37,"value":959},"Shopify Plus",{"type":37,"value":961}," — Oxygen inklusive, keine zusätzlichen Runtime-Kosten",{"type":32,"tag":33,"props":963,"children":964},{},[965],{"type":37,"value":966},"Liquid blieb bei:",{"type":32,"tag":919,"props":968,"children":969},{},[970,980,990,1000],{"type":32,"tag":65,"props":971,"children":972},{},[973,978],{"type":32,"tag":55,"props":974,"children":975},{},[976],{"type":37,"value":977},"Unter 5.000 tägliche Sessions",{"type":37,"value":979}," — Migrations­kosten lassen sich nicht rechtfertigen",{"type":32,"tag":65,"props":981,"children":982},{},[983,988],{"type":32,"tag":55,"props":984,"children":985},{},[986],{"type":37,"value":987},"Statischer Katalog",{"type":37,"value":989}," — seltene Updates, Liquid-Templates reichen aus",{"type":32,"tag":65,"props":991,"children":992},{},[993,998],{"type":32,"tag":55,"props":994,"children":995},{},[996],{"type":37,"value":997},"Kleines Dev-Team",{"type":37,"value":999}," — React-Kenntnisse nicht vorhanden, Lernkosten zu hoch",{"type":32,"tag":65,"props":1001,"children":1002},{},[1003,1008],{"type":32,"tag":55,"props":1004,"children":1005},{},[1006],{"type":37,"value":1007},"Budget-Zwang",{"type":37,"value":1009}," — Migration + Hosting-Kosten nicht zu absorbieren",{"type":32,"tag":33,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Konkretes Beispiel: Eine Supermarkt-Kette (täglich 80.000 Sessions, 4.000 SKUs) migrierte zu Hydrogen. TTFB fiel von 480ms auf 190ms, LCP von 3,2s auf 1,6s. Die Conversion-Rate stieg von 1,8 % auf 2,3 % (+27 %). Migration dauerte 35 Developer-Tage und amortisierte sich in 6 Monaten. Im gleichen Zeitraum: ein Boutique-Hotel-Projekt (täglich 1.200 Sessions) blieb bei Liquid, weil Traffic niedrig war und LCP bereits akzeptabel bei 2,1s — Migration hätte sich nicht gelohnt.",{"type":32,"tag":40,"props":1016,"children":1018},{"id":1017},"nächster-schritt-hybrid-ansatz",[1019],{"type":37,"value":1020},"Nächster Schritt: Hybrid-Ansatz",{"type":32,"tag":33,"props":1022,"children":1023},{},[1024,1026,1035],{"type":37,"value":1025},"Die Hydrogen\u002FLiquid-Entscheidung ist nicht binär. Bei ",{"type":32,"tag":1027,"props":1028,"children":1032},"a",{"href":1029,"rel":1030},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[1031],"nofollow",[1033],{"type":37,"value":1034},"Headless Commerce",{"type":37,"value":1036}," Architektur können manche Routes mit Hydrogen und Edge SSR laufen, während weniger kritische Seiten auf Liquid bleiben. Zum Beispiel: PDP + PLP mit Hydrogen, Blog + Info-Seiten mit Liquid. Dieses Hybrid-Setup reduziert Migrations­risiko und Kosten.",{"type":32,"tag":33,"props":1038,"children":1039},{},[1040],{"type":37,"value":1041},"Unsere Entscheidungs­kriterien: Die Zahlen sprechen — TTFB, Conversion-Rate, Developer Velocity. Wenn Session-Volumen hoch ist und Core Web Vitals kritisch sind, ist Hydrogen ein klarer Gewinn. Bei niedrigem Traffic und ohne React-Expertise im Team ist Liquid die pragmatische Wahl. Der Ort für die Entscheidung: ein Dashboard mit deinen eigenen Metriken.",{"type":32,"tag":1043,"props":1044,"children":1045},"style",{},[1046],{"type":37,"value":1047},"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":697,"depth":697,"links":1049},[1050,1053,1054,1055,1058,1059,1060],{"id":42,"depth":639,"text":45,"children":1051},[1052],{"id":203,"depth":697,"text":206},{"id":214,"depth":639,"text":217},{"id":294,"depth":639,"text":297},{"id":419,"depth":639,"text":422,"children":1056},[1057],{"id":525,"depth":697,"text":528},{"id":541,"depth":639,"text":544},{"id":909,"depth":639,"text":912},{"id":1017,"depth":639,"text":1020},"markdown","content:de:tech:shopify-hydrogen-vs-liquid-zahlen.md","content","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen.md","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen","md",1782079489043]