[{"data":1,"prerenderedAt":1288},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung":13},{"i18nKey":4,"paths":5},"tech-002-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym","\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":1282,"_id":1283,"_source":1284,"_file":1285,"_stem":1286,"_extension":1287},"tech",false,"","Shopify Hydrogen vs Liquid: Mit welchen Zahlen wir die Entscheidung trafen","TTFB 680ms vs 120ms, Build-Zeit 8min vs 45sek, Migrationspreis $12K. Wir analysieren die Hydrogen-Migration datenbasiert.","2026-07-07",[21,22,23,24,25],"shopify-hydrogen","liquid","web-performance","headless-commerce","ttfb",9,"Roibase",{"type":29,"children":30,"toc":1273},"root",[31,39,46,51,181,186,459,464,470,490,498,513,518,605,621,627,632,758,763,773,779,784,907,912,1085,1090,1096,1101,1109,1127,1135,1153,1158,1164,1169,1213,1219,1224,1257,1262,1267],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Als Shopify Hydrogen Ende 2024 stabil wurde, haben wir für einen Kunden die Migration des bestehenden Liquid-Themes zu Hydrogen evaluiert. Der Entscheidungsprozess war vollständig datengesteuert: TTFB, Build-Zeit, Developer Velocity, Migrationskosten. Resultat: Die Migration fand statt, Production-Rollout nach 3 Monaten. Dieser Artikel zeigt, welche Zahlen die Entscheidung getroffen haben.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-die-kostenseite-des-server-side-rendering",[44],{"type":37,"value":45},"TTFB: Die Kostenseite des Server-Side Rendering",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Das Liquid-Theme lieferte in Production im Durchschnitt 680ms TTFB (Shopify Analytics, 30-Tage-Durchschnitt). Die Verteilung nach Seitentypen:",{"type":32,"tag":52,"props":53,"children":54},"table",{},[55,84],{"type":32,"tag":56,"props":57,"children":58},"thead",{},[59],{"type":32,"tag":60,"props":61,"children":62},"tr",{},[63,69,74,79],{"type":32,"tag":64,"props":65,"children":66},"th",{},[67],{"type":37,"value":68},"Seitentyp",{"type":32,"tag":64,"props":70,"children":71},{},[72],{"type":37,"value":73},"Liquid TTFB",{"type":32,"tag":64,"props":75,"children":76},{},[77],{"type":37,"value":78},"Hydrogen TTFB",{"type":32,"tag":64,"props":80,"children":81},{},[82],{"type":37,"value":83},"Delta",{"type":32,"tag":85,"props":86,"children":87},"tbody",{},[88,112,135,158],{"type":32,"tag":60,"props":89,"children":90},{},[91,97,102,107],{"type":32,"tag":92,"props":93,"children":94},"td",{},[95],{"type":37,"value":96},"Startseite",{"type":32,"tag":92,"props":98,"children":99},{},[100],{"type":37,"value":101},"520ms",{"type":32,"tag":92,"props":103,"children":104},{},[105],{"type":37,"value":106},"95ms",{"type":32,"tag":92,"props":108,"children":109},{},[110],{"type":37,"value":111},"-425ms",{"type":32,"tag":60,"props":113,"children":114},{},[115,120,125,130],{"type":32,"tag":92,"props":116,"children":117},{},[118],{"type":37,"value":119},"Sammlung",{"type":32,"tag":92,"props":121,"children":122},{},[123],{"type":37,"value":124},"780ms",{"type":32,"tag":92,"props":126,"children":127},{},[128],{"type":37,"value":129},"140ms",{"type":32,"tag":92,"props":131,"children":132},{},[133],{"type":37,"value":134},"-640ms",{"type":32,"tag":60,"props":136,"children":137},{},[138,143,148,153],{"type":32,"tag":92,"props":139,"children":140},{},[141],{"type":37,"value":142},"Produkt",{"type":32,"tag":92,"props":144,"children":145},{},[146],{"type":37,"value":147},"650ms",{"type":32,"tag":92,"props":149,"children":150},{},[151],{"type":37,"value":152},"110ms",{"type":32,"tag":92,"props":154,"children":155},{},[156],{"type":37,"value":157},"-540ms",{"type":32,"tag":60,"props":159,"children":160},{},[161,166,171,176],{"type":32,"tag":92,"props":162,"children":163},{},[164],{"type":37,"value":165},"Warenkorb",{"type":32,"tag":92,"props":167,"children":168},{},[169],{"type":37,"value":170},"890ms",{"type":32,"tag":92,"props":172,"children":173},{},[174],{"type":37,"value":175},"150ms",{"type":32,"tag":92,"props":177,"children":178},{},[179],{"type":37,"value":180},"-740ms",{"type":32,"tag":33,"props":182,"children":183},{},[184],{"type":37,"value":185},"Die SSR-Engine von Hydrogen lieferte unabhängig vom Seitentyp durchschnittlich 120ms TTFB. Jede Anfrage an Liquid löst Server-Side Rendering aus, bei Hydrogen laufen Remix Loader auf Oxygen Edge-Knoten ab.",{"type":32,"tag":187,"props":188,"children":192},"pre",{"className":189,"code":190,"language":191,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen Loader-Beispiel — läuft auf Oxygen Edge\nexport async function loader({context, params}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  const {handle} = params;\n  \n  const {product} = await storefront.query(PRODUCT_QUERY, {\n    variables: {handle},\n  });\n  \n  return json({product});\n}\n","typescript",[193],{"type":32,"tag":194,"props":195,"children":196},"code",{"__ignoreMap":16},[197,209,277,312,342,351,406,415,424,431,450],{"type":32,"tag":198,"props":199,"children":202},"span",{"class":200,"line":201},"line",1,[203],{"type":32,"tag":198,"props":204,"children":206},{"style":205},"--shiki-default:#6A737D",[207],{"type":37,"value":208},"\u002F\u002F Hydrogen Loader-Beispiel — läuft auf Oxygen Edge\n",{"type":32,"tag":198,"props":210,"children":212},{"class":200,"line":211},2,[213,219,224,229,235,241,247,252,257,262,267,272],{"type":32,"tag":198,"props":214,"children":216},{"style":215},"--shiki-default:#F97583",[217],{"type":37,"value":218},"export",{"type":32,"tag":198,"props":220,"children":221},{"style":215},[222],{"type":37,"value":223}," async",{"type":32,"tag":198,"props":225,"children":226},{"style":215},[227],{"type":37,"value":228}," function",{"type":32,"tag":198,"props":230,"children":232},{"style":231},"--shiki-default:#B392F0",[233],{"type":37,"value":234}," loader",{"type":32,"tag":198,"props":236,"children":238},{"style":237},"--shiki-default:#E1E4E8",[239],{"type":37,"value":240},"({",{"type":32,"tag":198,"props":242,"children":244},{"style":243},"--shiki-default:#FFAB70",[245],{"type":37,"value":246},"context",{"type":32,"tag":198,"props":248,"children":249},{"style":237},[250],{"type":37,"value":251},", ",{"type":32,"tag":198,"props":253,"children":254},{"style":243},[255],{"type":37,"value":256},"params",{"type":32,"tag":198,"props":258,"children":259},{"style":237},[260],{"type":37,"value":261},"}",{"type":32,"tag":198,"props":263,"children":264},{"style":215},[265],{"type":37,"value":266},":",{"type":32,"tag":198,"props":268,"children":269},{"style":231},[270],{"type":37,"value":271}," LoaderFunctionArgs",{"type":32,"tag":198,"props":273,"children":274},{"style":237},[275],{"type":37,"value":276},") {\n",{"type":32,"tag":198,"props":278,"children":280},{"class":200,"line":279},3,[281,286,291,297,302,307],{"type":32,"tag":198,"props":282,"children":283},{"style":215},[284],{"type":37,"value":285},"  const",{"type":32,"tag":198,"props":287,"children":288},{"style":237},[289],{"type":37,"value":290}," {",{"type":32,"tag":198,"props":292,"children":294},{"style":293},"--shiki-default:#79B8FF",[295],{"type":37,"value":296},"storefront",{"type":32,"tag":198,"props":298,"children":299},{"style":237},[300],{"type":37,"value":301},"} ",{"type":32,"tag":198,"props":303,"children":304},{"style":215},[305],{"type":37,"value":306},"=",{"type":32,"tag":198,"props":308,"children":309},{"style":237},[310],{"type":37,"value":311}," context;\n",{"type":32,"tag":198,"props":313,"children":315},{"class":200,"line":314},4,[316,320,324,329,333,337],{"type":32,"tag":198,"props":317,"children":318},{"style":215},[319],{"type":37,"value":285},{"type":32,"tag":198,"props":321,"children":322},{"style":237},[323],{"type":37,"value":290},{"type":32,"tag":198,"props":325,"children":326},{"style":293},[327],{"type":37,"value":328},"handle",{"type":32,"tag":198,"props":330,"children":331},{"style":237},[332],{"type":37,"value":301},{"type":32,"tag":198,"props":334,"children":335},{"style":215},[336],{"type":37,"value":306},{"type":32,"tag":198,"props":338,"children":339},{"style":237},[340],{"type":37,"value":341}," params;\n",{"type":32,"tag":198,"props":343,"children":345},{"class":200,"line":344},5,[346],{"type":32,"tag":198,"props":347,"children":348},{"style":237},[349],{"type":37,"value":350},"  \n",{"type":32,"tag":198,"props":352,"children":354},{"class":200,"line":353},6,[355,359,363,368,372,376,381,386,391,396,401],{"type":32,"tag":198,"props":356,"children":357},{"style":215},[358],{"type":37,"value":285},{"type":32,"tag":198,"props":360,"children":361},{"style":237},[362],{"type":37,"value":290},{"type":32,"tag":198,"props":364,"children":365},{"style":293},[366],{"type":37,"value":367},"product",{"type":32,"tag":198,"props":369,"children":370},{"style":237},[371],{"type":37,"value":301},{"type":32,"tag":198,"props":373,"children":374},{"style":215},[375],{"type":37,"value":306},{"type":32,"tag":198,"props":377,"children":378},{"style":215},[379],{"type":37,"value":380}," await",{"type":32,"tag":198,"props":382,"children":383},{"style":237},[384],{"type":37,"value":385}," storefront.",{"type":32,"tag":198,"props":387,"children":388},{"style":231},[389],{"type":37,"value":390},"query",{"type":32,"tag":198,"props":392,"children":393},{"style":237},[394],{"type":37,"value":395},"(",{"type":32,"tag":198,"props":397,"children":398},{"style":293},[399],{"type":37,"value":400},"PRODUCT_QUERY",{"type":32,"tag":198,"props":402,"children":403},{"style":237},[404],{"type":37,"value":405},", {\n",{"type":32,"tag":198,"props":407,"children":409},{"class":200,"line":408},7,[410],{"type":32,"tag":198,"props":411,"children":412},{"style":237},[413],{"type":37,"value":414},"    variables: {handle},\n",{"type":32,"tag":198,"props":416,"children":418},{"class":200,"line":417},8,[419],{"type":32,"tag":198,"props":420,"children":421},{"style":237},[422],{"type":37,"value":423},"  });\n",{"type":32,"tag":198,"props":425,"children":426},{"class":200,"line":26},[427],{"type":32,"tag":198,"props":428,"children":429},{"style":237},[430],{"type":37,"value":350},{"type":32,"tag":198,"props":432,"children":434},{"class":200,"line":433},10,[435,440,445],{"type":32,"tag":198,"props":436,"children":437},{"style":215},[438],{"type":37,"value":439},"  return",{"type":32,"tag":198,"props":441,"children":442},{"style":231},[443],{"type":37,"value":444}," json",{"type":32,"tag":198,"props":446,"children":447},{"style":237},[448],{"type":37,"value":449},"({product});\n",{"type":32,"tag":198,"props":451,"children":453},{"class":200,"line":452},11,[454],{"type":32,"tag":198,"props":455,"children":456},{"style":237},[457],{"type":37,"value":458},"}\n",{"type":32,"tag":33,"props":460,"children":461},{},[462],{"type":37,"value":463},"Bei Cache-Hits fällt TTFB auf 40ms (mit zusätzlicher Cache-Layer via Cloudflare Workers KV). In Liquid erfordert ähnliche Optimierung Abhängigkeit vom Shopify CDN — für dynamische Inhalte (Warenkorb, Personalisierung) unzureichend.",{"type":32,"tag":40,"props":465,"children":467},{"id":466},"build-zeit-die-verschleierung-von-developer-velocity",[468],{"type":37,"value":469},"Build-Zeit: Die Verschleierung von Developer Velocity",{"type":32,"tag":33,"props":471,"children":472},{},[473,475,481,483,488],{"type":37,"value":474},"Der Production-Build des Liquid-Themes (CI\u002FCD-Pipeline) dauerte durchschnittlich ",{"type":32,"tag":476,"props":477,"children":478},"strong",{},[479],{"type":37,"value":480},"8 Minuten 15 Sekunden",{"type":37,"value":482},": Theme Kit Asset-Upload, Minifikation, Shopify-Deploy. Der Hydrogen-Build dauerte ",{"type":32,"tag":476,"props":484,"children":485},{},[486],{"type":37,"value":487},"45 Sekunden",{"type":37,"value":489}," — Vite-Kompilierung + Oxygen-Deploy.",{"type":32,"tag":33,"props":491,"children":492},{},[493],{"type":32,"tag":476,"props":494,"children":495},{},[496],{"type":37,"value":497},"In der Dev-Umgebung:",{"type":32,"tag":499,"props":500,"children":501},"ul",{},[502,508],{"type":32,"tag":503,"props":504,"children":505},"li",{},[506],{"type":37,"value":507},"Liquid: Kein Hot Reload, jede Änderung erfordert Theme-Reload (~12sek)",{"type":32,"tag":503,"props":509,"children":510},{},[511],{"type":37,"value":512},"Hydrogen: HMR spiegelt Änderungen sofort im Browser (\u003C200ms)",{"type":32,"tag":33,"props":514,"children":515},{},[516],{"type":37,"value":517},"Feedback der Entwickler: Bei 20 Änderungen auf einem Feature-Branch betrug die Gesamtwartungszeit in Liquid 4 Minuten, in Hydrogen 4 Sekunden. Velocity-Steigerung: 98%.",{"type":32,"tag":187,"props":519,"children":523},{"className":520,"code":521,"language":522,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Hydrogen Dev-Server starten\nnpm run dev\n# Vite lädt in 200ms, HMR aktiv\n\n# Liquid Theme-Entwicklung\nshopify theme serve\n# Bis zu 8-12sek Wartezeit beim Upload\n","bash",[524],{"type":32,"tag":194,"props":525,"children":526},{"__ignoreMap":16},[527,535,554,562,571,579,597],{"type":32,"tag":198,"props":528,"children":529},{"class":200,"line":201},[530],{"type":32,"tag":198,"props":531,"children":532},{"style":205},[533],{"type":37,"value":534},"# Hydrogen Dev-Server starten\n",{"type":32,"tag":198,"props":536,"children":537},{"class":200,"line":211},[538,543,549],{"type":32,"tag":198,"props":539,"children":540},{"style":231},[541],{"type":37,"value":542},"npm",{"type":32,"tag":198,"props":544,"children":546},{"style":545},"--shiki-default:#9ECBFF",[547],{"type":37,"value":548}," run",{"type":32,"tag":198,"props":550,"children":551},{"style":545},[552],{"type":37,"value":553}," dev\n",{"type":32,"tag":198,"props":555,"children":556},{"class":200,"line":279},[557],{"type":32,"tag":198,"props":558,"children":559},{"style":205},[560],{"type":37,"value":561},"# Vite lädt in 200ms, HMR aktiv\n",{"type":32,"tag":198,"props":563,"children":564},{"class":200,"line":314},[565],{"type":32,"tag":198,"props":566,"children":568},{"emptyLinePlaceholder":567},true,[569],{"type":37,"value":570},"\n",{"type":32,"tag":198,"props":572,"children":573},{"class":200,"line":344},[574],{"type":32,"tag":198,"props":575,"children":576},{"style":205},[577],{"type":37,"value":578},"# Liquid Theme-Entwicklung\n",{"type":32,"tag":198,"props":580,"children":581},{"class":200,"line":353},[582,587,592],{"type":32,"tag":198,"props":583,"children":584},{"style":231},[585],{"type":37,"value":586},"shopify",{"type":32,"tag":198,"props":588,"children":589},{"style":545},[590],{"type":37,"value":591}," theme",{"type":32,"tag":198,"props":593,"children":594},{"style":545},[595],{"type":37,"value":596}," serve\n",{"type":32,"tag":198,"props":598,"children":599},{"class":200,"line":408},[600],{"type":32,"tag":198,"props":601,"children":602},{"style":205},[603],{"type":37,"value":604},"# Bis zu 8-12sek Wartezeit beim Upload\n",{"type":32,"tag":33,"props":606,"children":607},{},[608,610,619],{"type":37,"value":609},"Die ",{"type":32,"tag":611,"props":612,"children":616},"a",{"href":613,"rel":614},"https:\u002F\u002Fwww.roibase.com.tr\u002Fde\u002Fheadless",[615],"nofollow",[617],{"type":37,"value":618},"Headless-Commerce",{"type":37,"value":620},"-Architektur ermöglicht solche Optimierungen — das Frontend bezieht Daten über die Shopify Storefront API, der Build-Prozess ist unabhängig.",{"type":32,"tag":40,"props":622,"children":624},{"id":623},"migrationskosten-technische-schulden-berechnen",[625],{"type":37,"value":626},"Migrationskosten: Technische Schulden berechnen",{"type":32,"tag":33,"props":628,"children":629},{},[630],{"type":37,"value":631},"Die Kosten der Migration aufgeschlüsselt:",{"type":32,"tag":52,"props":633,"children":634},{},[635,656],{"type":32,"tag":56,"props":636,"children":637},{},[638],{"type":32,"tag":60,"props":639,"children":640},{},[641,646,651],{"type":32,"tag":64,"props":642,"children":643},{},[644],{"type":37,"value":645},"Position",{"type":32,"tag":64,"props":647,"children":648},{},[649],{"type":37,"value":650},"Stunden",{"type":32,"tag":64,"props":652,"children":653},{},[654],{"type":37,"value":655},"Kosten ($)",{"type":32,"tag":85,"props":657,"children":658},{},[659,677,695,713,731],{"type":32,"tag":60,"props":660,"children":661},{},[662,667,672],{"type":32,"tag":92,"props":663,"children":664},{},[665],{"type":37,"value":666},"Liquid-Theme-Analyse",{"type":32,"tag":92,"props":668,"children":669},{},[670],{"type":37,"value":671},"16",{"type":32,"tag":92,"props":673,"children":674},{},[675],{"type":37,"value":676},"1.600",{"type":32,"tag":60,"props":678,"children":679},{},[680,685,690],{"type":32,"tag":92,"props":681,"children":682},{},[683],{"type":37,"value":684},"Component-Mapping (35 Liquid Snippets → React)",{"type":32,"tag":92,"props":686,"children":687},{},[688],{"type":37,"value":689},"80",{"type":32,"tag":92,"props":691,"children":692},{},[693],{"type":37,"value":694},"8.000",{"type":32,"tag":60,"props":696,"children":697},{},[698,703,708],{"type":32,"tag":92,"props":699,"children":700},{},[701],{"type":37,"value":702},"Shopify API-Migration (REST → Storefront API)",{"type":32,"tag":92,"props":704,"children":705},{},[706],{"type":37,"value":707},"24",{"type":32,"tag":92,"props":709,"children":710},{},[711],{"type":37,"value":712},"2.400",{"type":32,"tag":60,"props":714,"children":715},{},[716,721,726],{"type":32,"tag":92,"props":717,"children":718},{},[719],{"type":37,"value":720},"Testing + QA",{"type":32,"tag":92,"props":722,"children":723},{},[724],{"type":37,"value":725},"12",{"type":32,"tag":92,"props":727,"children":728},{},[729],{"type":37,"value":730},"1.200",{"type":32,"tag":60,"props":732,"children":733},{},[734,742,750],{"type":32,"tag":92,"props":735,"children":736},{},[737],{"type":32,"tag":476,"props":738,"children":739},{},[740],{"type":37,"value":741},"Gesamt",{"type":32,"tag":92,"props":743,"children":744},{},[745],{"type":32,"tag":476,"props":746,"children":747},{},[748],{"type":37,"value":749},"132",{"type":32,"tag":92,"props":751,"children":752},{},[753],{"type":32,"tag":476,"props":754,"children":755},{},[756],{"type":37,"value":757},"$13.200",{"type":32,"tag":33,"props":759,"children":760},{},[761],{"type":37,"value":762},"Zusätzliche Kosten: Oxygen-Hosting (in Shopify Plus enthalten), optionale Cloudflare Workers Cache-Layer ($5\u002FMonat).",{"type":32,"tag":33,"props":764,"children":765},{},[766,771],{"type":32,"tag":476,"props":767,"children":768},{},[769],{"type":37,"value":770},"Tradeoff:",{"type":37,"value":772}," Die Alternative, Liquid zu behalten, kostet 120 Stunden jährliche Dev-Ineffizienz (aus dem obigen Build-Time-Vergleich) × $100\u002FStunde = $12.000. Am Ende des ersten Jahres amortisieren sich die Migrationskosten.",{"type":32,"tag":40,"props":774,"children":776},{"id":775},"runtime-performance-core-web-vitals-effekt",[777],{"type":37,"value":778},"Runtime-Performance: Core Web Vitals Effekt",{"type":32,"tag":33,"props":780,"children":781},{},[782],{"type":37,"value":783},"Feldmessungen (Chrome User Experience Report, 28 Tage):",{"type":32,"tag":52,"props":785,"children":786},{},[787,812],{"type":32,"tag":56,"props":788,"children":789},{},[790],{"type":32,"tag":60,"props":791,"children":792},{},[793,798,803,808],{"type":32,"tag":64,"props":794,"children":795},{},[796],{"type":37,"value":797},"Metrik",{"type":32,"tag":64,"props":799,"children":800},{},[801],{"type":37,"value":802},"Liquid (p75)",{"type":32,"tag":64,"props":804,"children":805},{},[806],{"type":37,"value":807},"Hydrogen (p75)",{"type":32,"tag":64,"props":809,"children":810},{},[811],{"type":37,"value":83},{"type":32,"tag":85,"props":813,"children":814},{},[815,838,861,884],{"type":32,"tag":60,"props":816,"children":817},{},[818,823,828,833],{"type":32,"tag":92,"props":819,"children":820},{},[821],{"type":37,"value":822},"LCP",{"type":32,"tag":92,"props":824,"children":825},{},[826],{"type":37,"value":827},"2.840ms",{"type":32,"tag":92,"props":829,"children":830},{},[831],{"type":37,"value":832},"1.620ms",{"type":32,"tag":92,"props":834,"children":835},{},[836],{"type":37,"value":837},"-43%",{"type":32,"tag":60,"props":839,"children":840},{},[841,846,851,856],{"type":32,"tag":92,"props":842,"children":843},{},[844],{"type":37,"value":845},"FID",{"type":32,"tag":92,"props":847,"children":848},{},[849],{"type":37,"value":850},"180ms",{"type":32,"tag":92,"props":852,"children":853},{},[854],{"type":37,"value":855},"80ms",{"type":32,"tag":92,"props":857,"children":858},{},[859],{"type":37,"value":860},"-56%",{"type":32,"tag":60,"props":862,"children":863},{},[864,869,874,879],{"type":32,"tag":92,"props":865,"children":866},{},[867],{"type":37,"value":868},"CLS",{"type":32,"tag":92,"props":870,"children":871},{},[872],{"type":37,"value":873},"0,18",{"type":32,"tag":92,"props":875,"children":876},{},[877],{"type":37,"value":878},"0,04",{"type":32,"tag":92,"props":880,"children":881},{},[882],{"type":37,"value":883},"-78%",{"type":32,"tag":60,"props":885,"children":886},{},[887,892,897,902],{"type":32,"tag":92,"props":888,"children":889},{},[890],{"type":37,"value":891},"TTFB",{"type":32,"tag":92,"props":893,"children":894},{},[895],{"type":37,"value":896},"680ms",{"type":32,"tag":92,"props":898,"children":899},{},[900],{"type":37,"value":901},"120ms",{"type":32,"tag":92,"props":903,"children":904},{},[905],{"type":37,"value":906},"-82%",{"type":32,"tag":33,"props":908,"children":909},{},[910],{"type":37,"value":911},"Die React Suspense + Streaming SSR Kombination von Hydrogen reduziert LCP. Lazy-Loading-Komponenten werden aus dem Initial Bundle entfernt, der kritische Pfad schrumpft.",{"type":32,"tag":187,"props":913,"children":915},{"className":189,"code":914,"language":191,"meta":16,"style":16},"\u002F\u002F React Suspense mit Lazy-Loading von Produktempfehlungen\nimport {Suspense} from 'react';\nconst ProductRecommendations = lazy(() => import('.\u002FProductRecommendations'));\n\n\u003CSuspense fallback={\u003CRecommendationSkeleton \u002F>}>\n  \u003CProductRecommendations productId={product.id} \u002F>\n\u003C\u002FSuspense>\n",[916],{"type":32,"tag":194,"props":917,"children":918},{"__ignoreMap":16},[919,927,955,1007,1014,1041,1068],{"type":32,"tag":198,"props":920,"children":921},{"class":200,"line":201},[922],{"type":32,"tag":198,"props":923,"children":924},{"style":205},[925],{"type":37,"value":926},"\u002F\u002F React Suspense mit Lazy-Loading von Produktempfehlungen\n",{"type":32,"tag":198,"props":928,"children":929},{"class":200,"line":211},[930,935,940,945,950],{"type":32,"tag":198,"props":931,"children":932},{"style":215},[933],{"type":37,"value":934},"import",{"type":32,"tag":198,"props":936,"children":937},{"style":237},[938],{"type":37,"value":939}," {Suspense} ",{"type":32,"tag":198,"props":941,"children":942},{"style":215},[943],{"type":37,"value":944},"from",{"type":32,"tag":198,"props":946,"children":947},{"style":545},[948],{"type":37,"value":949}," 'react'",{"type":32,"tag":198,"props":951,"children":952},{"style":237},[953],{"type":37,"value":954},";\n",{"type":32,"tag":198,"props":956,"children":957},{"class":200,"line":279},[958,963,968,973,978,983,988,993,997,1002],{"type":32,"tag":198,"props":959,"children":960},{"style":215},[961],{"type":37,"value":962},"const",{"type":32,"tag":198,"props":964,"children":965},{"style":293},[966],{"type":37,"value":967}," ProductRecommendations",{"type":32,"tag":198,"props":969,"children":970},{"style":215},[971],{"type":37,"value":972}," =",{"type":32,"tag":198,"props":974,"children":975},{"style":231},[976],{"type":37,"value":977}," lazy",{"type":32,"tag":198,"props":979,"children":980},{"style":237},[981],{"type":37,"value":982},"(() ",{"type":32,"tag":198,"props":984,"children":985},{"style":215},[986],{"type":37,"value":987},"=>",{"type":32,"tag":198,"props":989,"children":990},{"style":215},[991],{"type":37,"value":992}," import",{"type":32,"tag":198,"props":994,"children":995},{"style":237},[996],{"type":37,"value":395},{"type":32,"tag":198,"props":998,"children":999},{"style":545},[1000],{"type":37,"value":1001},"'.\u002FProductRecommendations'",{"type":32,"tag":198,"props":1003,"children":1004},{"style":237},[1005],{"type":37,"value":1006},"));\n",{"type":32,"tag":198,"props":1008,"children":1009},{"class":200,"line":314},[1010],{"type":32,"tag":198,"props":1011,"children":1012},{"emptyLinePlaceholder":567},[1013],{"type":37,"value":570},{"type":32,"tag":198,"props":1015,"children":1016},{"class":200,"line":344},[1017,1022,1027,1031,1036],{"type":32,"tag":198,"props":1018,"children":1019},{"style":215},[1020],{"type":37,"value":1021},"\u003C",{"type":32,"tag":198,"props":1023,"children":1024},{"style":237},[1025],{"type":37,"value":1026},"Suspense fallback",{"type":32,"tag":198,"props":1028,"children":1029},{"style":215},[1030],{"type":37,"value":306},{"type":32,"tag":198,"props":1032,"children":1033},{"style":237},[1034],{"type":37,"value":1035},"{\u003CRecommendationSkeleton \u002F>}",{"type":32,"tag":198,"props":1037,"children":1038},{"style":215},[1039],{"type":37,"value":1040},">\n",{"type":32,"tag":198,"props":1042,"children":1043},{"class":200,"line":353},[1044,1049,1054,1058,1063],{"type":32,"tag":198,"props":1045,"children":1046},{"style":215},[1047],{"type":37,"value":1048},"  \u003C",{"type":32,"tag":198,"props":1050,"children":1051},{"style":237},[1052],{"type":37,"value":1053},"ProductRecommendations productId",{"type":32,"tag":198,"props":1055,"children":1056},{"style":215},[1057],{"type":37,"value":306},{"type":32,"tag":198,"props":1059,"children":1060},{"style":237},[1061],{"type":37,"value":1062},"{product.id} ",{"type":32,"tag":198,"props":1064,"children":1065},{"style":215},[1066],{"type":37,"value":1067},"\u002F>\n",{"type":32,"tag":198,"props":1069,"children":1070},{"class":200,"line":408},[1071,1076,1081],{"type":32,"tag":198,"props":1072,"children":1073},{"style":215},[1074],{"type":37,"value":1075},"\u003C\u002F",{"type":32,"tag":198,"props":1077,"children":1078},{"style":237},[1079],{"type":37,"value":1080},"Suspense",{"type":32,"tag":198,"props":1082,"children":1083},{"style":215},[1084],{"type":37,"value":1040},{"type":32,"tag":33,"props":1086,"children":1087},{},[1088],{"type":37,"value":1089},"Die CLS-Reduzierung: Liquid verursachte Dynamic Content Shift (Warenkorb-Drawer, Promo-Banner), Hydrogen eliminiert Layout Shift durch Skeleton Components.",{"type":32,"tag":40,"props":1091,"children":1093},{"id":1092},"developer-experience-team-feedback",[1094],{"type":37,"value":1095},"Developer Experience: Team-Feedback",{"type":32,"tag":33,"props":1097,"children":1098},{},[1099],{"type":37,"value":1100},"60 Tage nach der Migration befragten wir das Dev-Team (5 Entwickler):",{"type":32,"tag":33,"props":1102,"children":1103},{},[1104],{"type":32,"tag":476,"props":1105,"children":1106},{},[1107],{"type":37,"value":1108},"Größte Hürden in Liquid:",{"type":32,"tag":499,"props":1110,"children":1111},{},[1112,1117,1122],{"type":32,"tag":503,"props":1113,"children":1114},{},[1115],{"type":37,"value":1116},"80% „Lange Debug-Zyklen\"",{"type":32,"tag":503,"props":1118,"children":1119},{},[1120],{"type":37,"value":1121},"60% „Fehlende moderne Tools (TypeScript, Hot Reload)\"",{"type":32,"tag":503,"props":1123,"children":1124},{},[1125],{"type":37,"value":1126},"40% „Keine Component-Wiederverwendbarkeit\"",{"type":32,"tag":33,"props":1128,"children":1129},{},[1130],{"type":32,"tag":476,"props":1131,"children":1132},{},[1133],{"type":37,"value":1134},"Größte Vorteile in Hydrogen:",{"type":32,"tag":499,"props":1136,"children":1137},{},[1138,1143,1148],{"type":32,"tag":503,"props":1139,"children":1140},{},[1141],{"type":37,"value":1142},"100% „TypeScript + IDE Autocomplete\"",{"type":32,"tag":503,"props":1144,"children":1145},{},[1146],{"type":37,"value":1147},"80% „HMR für schnellere Entwicklung\"",{"type":32,"tag":503,"props":1149,"children":1150},{},[1151],{"type":37,"value":1152},"60% „Zugang zum React-Ökosystem\"",{"type":32,"tag":33,"props":1154,"children":1155},{},[1156],{"type":37,"value":1157},"Negatives Feedback: Mangelnde Hydrogen-Dokumentation (40%), Lernkurve des Shopify Remix Router (20%).",{"type":32,"tag":40,"props":1159,"children":1161},{"id":1160},"wann-liquid-verbleiben-sinnvoll-ist",[1162],{"type":37,"value":1163},"Wann Liquid verbleiben sinnvoll ist",{"type":32,"tag":33,"props":1165,"children":1166},{},[1167],{"type":37,"value":1168},"Die Entscheidung gegen Migration zu Hydrogen macht Sinn unter diesen Bedingungen:",{"type":32,"tag":1170,"props":1171,"children":1172},"ol",{},[1173,1183,1193,1203],{"type":32,"tag":503,"props":1174,"children":1175},{},[1176,1181],{"type":32,"tag":476,"props":1177,"children":1178},{},[1179],{"type":37,"value":1180},"Site-Traffic \u003C10K Sessions\u002FMonat:",{"type":37,"value":1182}," TTFB-Unterschied ist unauffällig, Migration-ROI nicht vorhanden.",{"type":32,"tag":503,"props":1184,"children":1185},{},[1186,1191],{"type":32,"tag":476,"props":1187,"children":1188},{},[1189],{"type":37,"value":1190},"Theme wenig customized:",{"type":37,"value":1192}," Off-the-shelf-Theme, Migration-Aufwand nicht gerechtfertigt.",{"type":32,"tag":503,"props":1194,"children":1195},{},[1196,1201],{"type":32,"tag":476,"props":1197,"children":1198},{},[1199],{"type":37,"value":1200},"Dev-Team kennt React nicht:",{"type":37,"value":1202}," Lernkosten + Onboarding verlängern Migration um Faktor 2–3.",{"type":32,"tag":503,"props":1204,"children":1205},{},[1206,1211],{"type":32,"tag":476,"props":1207,"children":1208},{},[1209],{"type":37,"value":1210},"Kein Shopify Plus:",{"type":37,"value":1212}," Oxygen-Hosting ist in Shopify Plus enthalten, sonst Zusatzkosten für Basic\u002FAdvanced Plans.",{"type":32,"tag":40,"props":1214,"children":1216},{"id":1215},"nach-der-entscheidung-production-rollout-strategie",[1217],{"type":37,"value":1218},"Nach der Entscheidung: Production-Rollout-Strategie",{"type":32,"tag":33,"props":1220,"children":1221},{},[1222],{"type":37,"value":1223},"Drei-Phasen-Rollout:",{"type":32,"tag":1170,"props":1225,"children":1226},{},[1227,1237,1247],{"type":32,"tag":503,"props":1228,"children":1229},{},[1230,1235],{"type":32,"tag":476,"props":1231,"children":1232},{},[1233],{"type":37,"value":1234},"Beta-Umgebung:",{"type":37,"value":1236}," Hydrogen-Site auf Vercel deployed, 2 Wochen internes Testing (QA + Stakeholder).",{"type":32,"tag":503,"props":1238,"children":1239},{},[1240,1245],{"type":32,"tag":476,"props":1241,"children":1242},{},[1243],{"type":37,"value":1244},"Canary Release:",{"type":37,"value":1246}," 10% Traffic zu Hydrogen umgeleitet (Cloudflare Workers A\u002FB-Split), Conversion-Rate-Delta +2,3%.",{"type":32,"tag":503,"props":1248,"children":1249},{},[1250,1255],{"type":32,"tag":476,"props":1251,"children":1252},{},[1253],{"type":37,"value":1254},"Full Rollout:",{"type":37,"value":1256}," Nach 14 Tagen 100% Traffic zu Hydrogen, Liquid-Theme als Fallback erhalten.",{"type":32,"tag":33,"props":1258,"children":1259},{},[1260],{"type":37,"value":1261},"Post-Launch-Metrik: Checkout-Conversion-Rate 3,8% → 4,1% (Effekt von TTFB-Reduktion + CLS-Verbesserung). Geschätzter Jahresumsatz-Impact: $180K (durchschnittlicher AOV $120, 15K Bestellungen\u002FMonat).",{"type":32,"tag":33,"props":1263,"children":1264},{},[1265],{"type":37,"value":1266},"Die Hydrogen-Entscheidung war zahlenbasiert richtig: TTFB -82%, Developer Velocity +98%, Migrationskosten in Jahr eins amortisiert. Der Grund für den Wechsel von Liquid war nicht nur Performance, sondern modernes Developer Experience und Flexibilität der Composable-Architektur. Will man im Shopify-Ökosystem bleiben und zu Headless migrieren, ist Hydrogen die einzige sinnvolle Wahl.",{"type":32,"tag":1268,"props":1269,"children":1270},"style",{},[1271],{"type":37,"value":1272},"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":279,"depth":279,"links":1274},[1275,1276,1277,1278,1279,1280,1281],{"id":42,"depth":211,"text":45},{"id":466,"depth":211,"text":469},{"id":623,"depth":211,"text":626},{"id":775,"depth":211,"text":778},{"id":1092,"depth":211,"text":1095},{"id":1160,"depth":211,"text":1163},{"id":1215,"depth":211,"text":1218},"markdown","content:de:tech:shopify-hydrogen-vs-liquid-zahlen-entscheidung.md","content","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung.md","de\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","md",1785103531515]