[{"data":1,"prerenderedAt":1300},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics":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":7,"_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":1294,"_id":1295,"_source":1296,"_file":1297,"_stem":1298,"_extension":1299},"tech",false,"","Shopify Hydrogen vs Liquid: How the Numbers Drove Our Decision","TTFB 680ms vs 120ms, build time 8min vs 45sec, migration cost $12K. We break down the data behind moving to Hydrogen.","2026-07-07",[21,22,23,24,25],"shopify-hydrogen","liquid","web-performance","headless-commerce","ttfb",8,"Roibase",{"type":29,"children":30,"toc":1285},"root",[31,39,46,59,189,194,467,472,478,497,505,520,532,619,633,639,644,770,775,785,791,796,919,924,1097,1102,1108,1113,1121,1139,1147,1165,1170,1176,1181,1225,1231,1236,1269,1274,1279],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","When Shopify Hydrogen reached stable status in late 2024, we evaluated migrating our client's existing Liquid theme to Hydrogen. The decision process was entirely metrics-driven: TTFB, build time, developer velocity, migration cost. The outcome: we migrated and went live in production three months later. Here's which numbers made the call.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-the-cost-of-server-side-rendering",[44],{"type":37,"value":45},"TTFB: The Cost of Server-Side Rendering",{"type":32,"tag":33,"props":47,"children":48},{},[49,51,57],{"type":37,"value":50},"The Liquid theme in production averaged ",{"type":32,"tag":52,"props":53,"children":54},"strong",{},[55],{"type":37,"value":56},"680ms TTFB",{"type":37,"value":58}," (Shopify Analytics, 30-day average). Distribution by page type:",{"type":32,"tag":60,"props":61,"children":62},"table",{},[63,92],{"type":32,"tag":64,"props":65,"children":66},"thead",{},[67],{"type":32,"tag":68,"props":69,"children":70},"tr",{},[71,77,82,87],{"type":32,"tag":72,"props":73,"children":74},"th",{},[75],{"type":37,"value":76},"Page Type",{"type":32,"tag":72,"props":78,"children":79},{},[80],{"type":37,"value":81},"Liquid TTFB",{"type":32,"tag":72,"props":83,"children":84},{},[85],{"type":37,"value":86},"Hydrogen TTFB",{"type":32,"tag":72,"props":88,"children":89},{},[90],{"type":37,"value":91},"Delta",{"type":32,"tag":93,"props":94,"children":95},"tbody",{},[96,120,143,166],{"type":32,"tag":68,"props":97,"children":98},{},[99,105,110,115],{"type":32,"tag":100,"props":101,"children":102},"td",{},[103],{"type":37,"value":104},"Home",{"type":32,"tag":100,"props":106,"children":107},{},[108],{"type":37,"value":109},"520ms",{"type":32,"tag":100,"props":111,"children":112},{},[113],{"type":37,"value":114},"95ms",{"type":32,"tag":100,"props":116,"children":117},{},[118],{"type":37,"value":119},"-425ms",{"type":32,"tag":68,"props":121,"children":122},{},[123,128,133,138],{"type":32,"tag":100,"props":124,"children":125},{},[126],{"type":37,"value":127},"Collection",{"type":32,"tag":100,"props":129,"children":130},{},[131],{"type":37,"value":132},"780ms",{"type":32,"tag":100,"props":134,"children":135},{},[136],{"type":37,"value":137},"140ms",{"type":32,"tag":100,"props":139,"children":140},{},[141],{"type":37,"value":142},"-640ms",{"type":32,"tag":68,"props":144,"children":145},{},[146,151,156,161],{"type":32,"tag":100,"props":147,"children":148},{},[149],{"type":37,"value":150},"Product",{"type":32,"tag":100,"props":152,"children":153},{},[154],{"type":37,"value":155},"650ms",{"type":32,"tag":100,"props":157,"children":158},{},[159],{"type":37,"value":160},"110ms",{"type":32,"tag":100,"props":162,"children":163},{},[164],{"type":37,"value":165},"-540ms",{"type":32,"tag":68,"props":167,"children":168},{},[169,174,179,184],{"type":32,"tag":100,"props":170,"children":171},{},[172],{"type":37,"value":173},"Cart",{"type":32,"tag":100,"props":175,"children":176},{},[177],{"type":37,"value":178},"890ms",{"type":32,"tag":100,"props":180,"children":181},{},[182],{"type":37,"value":183},"150ms",{"type":32,"tag":100,"props":185,"children":186},{},[187],{"type":37,"value":188},"-740ms",{"type":32,"tag":33,"props":190,"children":191},{},[192],{"type":37,"value":193},"Hydrogen's edge-based SSR engine delivered ~120ms responses consistently. Every Shopify API request in Liquid triggered server-side rendering, while Hydrogen runs Remix loaders on Oxygen edge nodes.",{"type":32,"tag":195,"props":196,"children":200},"pre",{"className":197,"code":198,"language":199,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Hydrogen loader example — runs on 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",[201],{"type":32,"tag":202,"props":203,"children":204},"code",{"__ignoreMap":16},[205,217,285,320,350,359,414,423,431,439,458],{"type":32,"tag":206,"props":207,"children":210},"span",{"class":208,"line":209},"line",1,[211],{"type":32,"tag":206,"props":212,"children":214},{"style":213},"--shiki-default:#6A737D",[215],{"type":37,"value":216},"\u002F\u002F Hydrogen loader example — runs on Oxygen edge\n",{"type":32,"tag":206,"props":218,"children":220},{"class":208,"line":219},2,[221,227,232,237,243,249,255,260,265,270,275,280],{"type":32,"tag":206,"props":222,"children":224},{"style":223},"--shiki-default:#F97583",[225],{"type":37,"value":226},"export",{"type":32,"tag":206,"props":228,"children":229},{"style":223},[230],{"type":37,"value":231}," async",{"type":32,"tag":206,"props":233,"children":234},{"style":223},[235],{"type":37,"value":236}," function",{"type":32,"tag":206,"props":238,"children":240},{"style":239},"--shiki-default:#B392F0",[241],{"type":37,"value":242}," loader",{"type":32,"tag":206,"props":244,"children":246},{"style":245},"--shiki-default:#E1E4E8",[247],{"type":37,"value":248},"({",{"type":32,"tag":206,"props":250,"children":252},{"style":251},"--shiki-default:#FFAB70",[253],{"type":37,"value":254},"context",{"type":32,"tag":206,"props":256,"children":257},{"style":245},[258],{"type":37,"value":259},", ",{"type":32,"tag":206,"props":261,"children":262},{"style":251},[263],{"type":37,"value":264},"params",{"type":32,"tag":206,"props":266,"children":267},{"style":245},[268],{"type":37,"value":269},"}",{"type":32,"tag":206,"props":271,"children":272},{"style":223},[273],{"type":37,"value":274},":",{"type":32,"tag":206,"props":276,"children":277},{"style":239},[278],{"type":37,"value":279}," LoaderFunctionArgs",{"type":32,"tag":206,"props":281,"children":282},{"style":245},[283],{"type":37,"value":284},") {\n",{"type":32,"tag":206,"props":286,"children":288},{"class":208,"line":287},3,[289,294,299,305,310,315],{"type":32,"tag":206,"props":290,"children":291},{"style":223},[292],{"type":37,"value":293},"  const",{"type":32,"tag":206,"props":295,"children":296},{"style":245},[297],{"type":37,"value":298}," {",{"type":32,"tag":206,"props":300,"children":302},{"style":301},"--shiki-default:#79B8FF",[303],{"type":37,"value":304},"storefront",{"type":32,"tag":206,"props":306,"children":307},{"style":245},[308],{"type":37,"value":309},"} ",{"type":32,"tag":206,"props":311,"children":312},{"style":223},[313],{"type":37,"value":314},"=",{"type":32,"tag":206,"props":316,"children":317},{"style":245},[318],{"type":37,"value":319}," context;\n",{"type":32,"tag":206,"props":321,"children":323},{"class":208,"line":322},4,[324,328,332,337,341,345],{"type":32,"tag":206,"props":325,"children":326},{"style":223},[327],{"type":37,"value":293},{"type":32,"tag":206,"props":329,"children":330},{"style":245},[331],{"type":37,"value":298},{"type":32,"tag":206,"props":333,"children":334},{"style":301},[335],{"type":37,"value":336},"handle",{"type":32,"tag":206,"props":338,"children":339},{"style":245},[340],{"type":37,"value":309},{"type":32,"tag":206,"props":342,"children":343},{"style":223},[344],{"type":37,"value":314},{"type":32,"tag":206,"props":346,"children":347},{"style":245},[348],{"type":37,"value":349}," params;\n",{"type":32,"tag":206,"props":351,"children":353},{"class":208,"line":352},5,[354],{"type":32,"tag":206,"props":355,"children":356},{"style":245},[357],{"type":37,"value":358},"  \n",{"type":32,"tag":206,"props":360,"children":362},{"class":208,"line":361},6,[363,367,371,376,380,384,389,394,399,404,409],{"type":32,"tag":206,"props":364,"children":365},{"style":223},[366],{"type":37,"value":293},{"type":32,"tag":206,"props":368,"children":369},{"style":245},[370],{"type":37,"value":298},{"type":32,"tag":206,"props":372,"children":373},{"style":301},[374],{"type":37,"value":375},"product",{"type":32,"tag":206,"props":377,"children":378},{"style":245},[379],{"type":37,"value":309},{"type":32,"tag":206,"props":381,"children":382},{"style":223},[383],{"type":37,"value":314},{"type":32,"tag":206,"props":385,"children":386},{"style":223},[387],{"type":37,"value":388}," await",{"type":32,"tag":206,"props":390,"children":391},{"style":245},[392],{"type":37,"value":393}," storefront.",{"type":32,"tag":206,"props":395,"children":396},{"style":239},[397],{"type":37,"value":398},"query",{"type":32,"tag":206,"props":400,"children":401},{"style":245},[402],{"type":37,"value":403},"(",{"type":32,"tag":206,"props":405,"children":406},{"style":301},[407],{"type":37,"value":408},"PRODUCT_QUERY",{"type":32,"tag":206,"props":410,"children":411},{"style":245},[412],{"type":37,"value":413},", {\n",{"type":32,"tag":206,"props":415,"children":417},{"class":208,"line":416},7,[418],{"type":32,"tag":206,"props":419,"children":420},{"style":245},[421],{"type":37,"value":422},"    variables: {handle},\n",{"type":32,"tag":206,"props":424,"children":425},{"class":208,"line":26},[426],{"type":32,"tag":206,"props":427,"children":428},{"style":245},[429],{"type":37,"value":430},"  });\n",{"type":32,"tag":206,"props":432,"children":434},{"class":208,"line":433},9,[435],{"type":32,"tag":206,"props":436,"children":437},{"style":245},[438],{"type":37,"value":358},{"type":32,"tag":206,"props":440,"children":442},{"class":208,"line":441},10,[443,448,453],{"type":32,"tag":206,"props":444,"children":445},{"style":223},[446],{"type":37,"value":447},"  return",{"type":32,"tag":206,"props":449,"children":450},{"style":239},[451],{"type":37,"value":452}," json",{"type":32,"tag":206,"props":454,"children":455},{"style":245},[456],{"type":37,"value":457},"({product});\n",{"type":32,"tag":206,"props":459,"children":461},{"class":208,"line":460},11,[462],{"type":32,"tag":206,"props":463,"children":464},{"style":245},[465],{"type":37,"value":466},"}\n",{"type":32,"tag":33,"props":468,"children":469},{},[470],{"type":37,"value":471},"With cache hits, TTFB dropped to 40ms (adding a Cloudflare Workers KV cache layer). Achieving similar performance in Liquid required relying on Shopify's CDN, but dynamic content (cart, personalization) never fully benefited.",{"type":32,"tag":40,"props":473,"children":475},{"id":474},"build-time-the-developer-velocity-tax",[476],{"type":37,"value":477},"Build Time: The Developer Velocity Tax",{"type":32,"tag":33,"props":479,"children":480},{},[481,483,488,490,495],{"type":37,"value":482},"Liquid theme production builds (in our CI\u002FCD pipeline) took an average of ",{"type":32,"tag":52,"props":484,"children":485},{},[486],{"type":37,"value":487},"8 minutes 15 seconds",{"type":37,"value":489},". Theme Kit uploads assets, minifies, and deploys to Shopify. Hydrogen production builds run in ",{"type":32,"tag":52,"props":491,"children":492},{},[493],{"type":37,"value":494},"45 seconds",{"type":37,"value":496},"—Vite build + Oxygen deploy.",{"type":32,"tag":33,"props":498,"children":499},{},[500],{"type":32,"tag":52,"props":501,"children":502},{},[503],{"type":37,"value":504},"In development:",{"type":32,"tag":506,"props":507,"children":508},"ul",{},[509,515],{"type":32,"tag":510,"props":511,"children":512},"li",{},[513],{"type":37,"value":514},"Liquid: no hot reload; every change requires theme refresh (~12s)",{"type":32,"tag":510,"props":516,"children":517},{},[518],{"type":37,"value":519},"Hydrogen: HMR updates reflect in-browser instantly (\u003C200ms)",{"type":32,"tag":33,"props":521,"children":522},{},[523,525,530],{"type":37,"value":524},"Developer feedback: during a 20-change feature branch, Liquid accumulated 4 minutes of total wait time, Hydrogen consumed 4 seconds. Developer velocity gain: ",{"type":32,"tag":52,"props":526,"children":527},{},[528],{"type":37,"value":529},"98%",{"type":37,"value":531},".",{"type":32,"tag":195,"props":533,"children":537},{"className":534,"code":535,"language":536,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Hydrogen dev server startup\nnpm run dev\n# Vite ready in 200ms, HMR active\n\n# Liquid theme development\nshopify theme serve\n# Wait 8-12s for theme to load\n","bash",[538],{"type":32,"tag":202,"props":539,"children":540},{"__ignoreMap":16},[541,549,568,576,585,593,611],{"type":32,"tag":206,"props":542,"children":543},{"class":208,"line":209},[544],{"type":32,"tag":206,"props":545,"children":546},{"style":213},[547],{"type":37,"value":548},"# Hydrogen dev server startup\n",{"type":32,"tag":206,"props":550,"children":551},{"class":208,"line":219},[552,557,563],{"type":32,"tag":206,"props":553,"children":554},{"style":239},[555],{"type":37,"value":556},"npm",{"type":32,"tag":206,"props":558,"children":560},{"style":559},"--shiki-default:#9ECBFF",[561],{"type":37,"value":562}," run",{"type":32,"tag":206,"props":564,"children":565},{"style":559},[566],{"type":37,"value":567}," dev\n",{"type":32,"tag":206,"props":569,"children":570},{"class":208,"line":287},[571],{"type":32,"tag":206,"props":572,"children":573},{"style":213},[574],{"type":37,"value":575},"# Vite ready in 200ms, HMR active\n",{"type":32,"tag":206,"props":577,"children":578},{"class":208,"line":322},[579],{"type":32,"tag":206,"props":580,"children":582},{"emptyLinePlaceholder":581},true,[583],{"type":37,"value":584},"\n",{"type":32,"tag":206,"props":586,"children":587},{"class":208,"line":352},[588],{"type":32,"tag":206,"props":589,"children":590},{"style":213},[591],{"type":37,"value":592},"# Liquid theme development\n",{"type":32,"tag":206,"props":594,"children":595},{"class":208,"line":361},[596,601,606],{"type":32,"tag":206,"props":597,"children":598},{"style":239},[599],{"type":37,"value":600},"shopify",{"type":32,"tag":206,"props":602,"children":603},{"style":559},[604],{"type":37,"value":605}," theme",{"type":32,"tag":206,"props":607,"children":608},{"style":559},[609],{"type":37,"value":610}," serve\n",{"type":32,"tag":206,"props":612,"children":613},{"class":208,"line":416},[614],{"type":32,"tag":206,"props":615,"children":616},{"style":213},[617],{"type":37,"value":618},"# Wait 8-12s for theme to load\n",{"type":32,"tag":33,"props":620,"children":621},{},[622,631],{"type":32,"tag":623,"props":624,"children":628},"a",{"href":625,"rel":626},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[627],"nofollow",[629],{"type":37,"value":630},"Headless Commerce",{"type":37,"value":632}," architecture enables these optimizations—the frontend consumes the Shopify Storefront API, the build process is decoupled.",{"type":32,"tag":40,"props":634,"children":636},{"id":635},"migration-cost-technical-debt-accounting",[637],{"type":37,"value":638},"Migration Cost: Technical Debt Accounting",{"type":32,"tag":33,"props":640,"children":641},{},[642],{"type":37,"value":643},"We broke down the migration cost:",{"type":32,"tag":60,"props":645,"children":646},{},[647,668],{"type":32,"tag":64,"props":648,"children":649},{},[650],{"type":32,"tag":68,"props":651,"children":652},{},[653,658,663],{"type":32,"tag":72,"props":654,"children":655},{},[656],{"type":37,"value":657},"Line Item",{"type":32,"tag":72,"props":659,"children":660},{},[661],{"type":37,"value":662},"Hours",{"type":32,"tag":72,"props":664,"children":665},{},[666],{"type":37,"value":667},"Cost ($)",{"type":32,"tag":93,"props":669,"children":670},{},[671,689,707,725,743],{"type":32,"tag":68,"props":672,"children":673},{},[674,679,684],{"type":32,"tag":100,"props":675,"children":676},{},[677],{"type":37,"value":678},"Liquid theme analysis",{"type":32,"tag":100,"props":680,"children":681},{},[682],{"type":37,"value":683},"16",{"type":32,"tag":100,"props":685,"children":686},{},[687],{"type":37,"value":688},"1,600",{"type":32,"tag":68,"props":690,"children":691},{},[692,697,702],{"type":32,"tag":100,"props":693,"children":694},{},[695],{"type":37,"value":696},"Component mapping (35 Liquid snippets → React)",{"type":32,"tag":100,"props":698,"children":699},{},[700],{"type":37,"value":701},"80",{"type":32,"tag":100,"props":703,"children":704},{},[705],{"type":37,"value":706},"8,000",{"type":32,"tag":68,"props":708,"children":709},{},[710,715,720],{"type":32,"tag":100,"props":711,"children":712},{},[713],{"type":37,"value":714},"Shopify API migration (REST → Storefront API)",{"type":32,"tag":100,"props":716,"children":717},{},[718],{"type":37,"value":719},"24",{"type":32,"tag":100,"props":721,"children":722},{},[723],{"type":37,"value":724},"2,400",{"type":32,"tag":68,"props":726,"children":727},{},[728,733,738],{"type":32,"tag":100,"props":729,"children":730},{},[731],{"type":37,"value":732},"Testing + QA",{"type":32,"tag":100,"props":734,"children":735},{},[736],{"type":37,"value":737},"12",{"type":32,"tag":100,"props":739,"children":740},{},[741],{"type":37,"value":742},"1,200",{"type":32,"tag":68,"props":744,"children":745},{},[746,754,762],{"type":32,"tag":100,"props":747,"children":748},{},[749],{"type":32,"tag":52,"props":750,"children":751},{},[752],{"type":37,"value":753},"Total",{"type":32,"tag":100,"props":755,"children":756},{},[757],{"type":32,"tag":52,"props":758,"children":759},{},[760],{"type":37,"value":761},"132",{"type":32,"tag":100,"props":763,"children":764},{},[765],{"type":32,"tag":52,"props":766,"children":767},{},[768],{"type":37,"value":769},"$13,200",{"type":32,"tag":33,"props":771,"children":772},{},[773],{"type":37,"value":774},"Added cost: Oxygen hosting (included with Shopify Plus), optional Cloudflare Workers cache layer ($5\u002Fmonth).",{"type":32,"tag":33,"props":776,"children":777},{},[778,783],{"type":32,"tag":52,"props":779,"children":780},{},[781],{"type":37,"value":782},"The tradeoff:",{"type":37,"value":784}," staying with Liquid costs ~120 developer-hours annually (derived from the build time delta above) × $100\u002Fhour = $12,000. By year-end, migration cost breaks even.",{"type":32,"tag":40,"props":786,"children":788},{"id":787},"runtime-performance-core-web-vitals-impact",[789],{"type":37,"value":790},"Runtime Performance: Core Web Vitals Impact",{"type":32,"tag":33,"props":792,"children":793},{},[794],{"type":37,"value":795},"Field data (Chrome User Experience Report, 28 days):",{"type":32,"tag":60,"props":797,"children":798},{},[799,824],{"type":32,"tag":64,"props":800,"children":801},{},[802],{"type":32,"tag":68,"props":803,"children":804},{},[805,810,815,820],{"type":32,"tag":72,"props":806,"children":807},{},[808],{"type":37,"value":809},"Metric",{"type":32,"tag":72,"props":811,"children":812},{},[813],{"type":37,"value":814},"Liquid (p75)",{"type":32,"tag":72,"props":816,"children":817},{},[818],{"type":37,"value":819},"Hydrogen (p75)",{"type":32,"tag":72,"props":821,"children":822},{},[823],{"type":37,"value":91},{"type":32,"tag":93,"props":825,"children":826},{},[827,850,873,896],{"type":32,"tag":68,"props":828,"children":829},{},[830,835,840,845],{"type":32,"tag":100,"props":831,"children":832},{},[833],{"type":37,"value":834},"LCP",{"type":32,"tag":100,"props":836,"children":837},{},[838],{"type":37,"value":839},"2,840ms",{"type":32,"tag":100,"props":841,"children":842},{},[843],{"type":37,"value":844},"1,620ms",{"type":32,"tag":100,"props":846,"children":847},{},[848],{"type":37,"value":849},"-43%",{"type":32,"tag":68,"props":851,"children":852},{},[853,858,863,868],{"type":32,"tag":100,"props":854,"children":855},{},[856],{"type":37,"value":857},"FID",{"type":32,"tag":100,"props":859,"children":860},{},[861],{"type":37,"value":862},"180ms",{"type":32,"tag":100,"props":864,"children":865},{},[866],{"type":37,"value":867},"80ms",{"type":32,"tag":100,"props":869,"children":870},{},[871],{"type":37,"value":872},"-56%",{"type":32,"tag":68,"props":874,"children":875},{},[876,881,886,891],{"type":32,"tag":100,"props":877,"children":878},{},[879],{"type":37,"value":880},"CLS",{"type":32,"tag":100,"props":882,"children":883},{},[884],{"type":37,"value":885},"0.18",{"type":32,"tag":100,"props":887,"children":888},{},[889],{"type":37,"value":890},"0.04",{"type":32,"tag":100,"props":892,"children":893},{},[894],{"type":37,"value":895},"-78%",{"type":32,"tag":68,"props":897,"children":898},{},[899,904,909,914],{"type":32,"tag":100,"props":900,"children":901},{},[902],{"type":37,"value":903},"TTFB",{"type":32,"tag":100,"props":905,"children":906},{},[907],{"type":37,"value":908},"680ms",{"type":32,"tag":100,"props":910,"children":911},{},[912],{"type":37,"value":913},"120ms",{"type":32,"tag":100,"props":915,"children":916},{},[917],{"type":37,"value":918},"-82%",{"type":32,"tag":33,"props":920,"children":921},{},[922],{"type":37,"value":923},"Hydrogen's React Suspense + streaming SSR combo cuts LCP by deferring non-critical components out of the initial bundle, shrinking the critical rendering path.",{"type":32,"tag":195,"props":925,"children":927},{"className":197,"code":926,"language":199,"meta":16,"style":16},"\u002F\u002F React Suspense + lazy product recommendations\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",[928],{"type":32,"tag":202,"props":929,"children":930},{"__ignoreMap":16},[931,939,967,1019,1026,1053,1080],{"type":32,"tag":206,"props":932,"children":933},{"class":208,"line":209},[934],{"type":32,"tag":206,"props":935,"children":936},{"style":213},[937],{"type":37,"value":938},"\u002F\u002F React Suspense + lazy product recommendations\n",{"type":32,"tag":206,"props":940,"children":941},{"class":208,"line":219},[942,947,952,957,962],{"type":32,"tag":206,"props":943,"children":944},{"style":223},[945],{"type":37,"value":946},"import",{"type":32,"tag":206,"props":948,"children":949},{"style":245},[950],{"type":37,"value":951}," {Suspense} ",{"type":32,"tag":206,"props":953,"children":954},{"style":223},[955],{"type":37,"value":956},"from",{"type":32,"tag":206,"props":958,"children":959},{"style":559},[960],{"type":37,"value":961}," 'react'",{"type":32,"tag":206,"props":963,"children":964},{"style":245},[965],{"type":37,"value":966},";\n",{"type":32,"tag":206,"props":968,"children":969},{"class":208,"line":287},[970,975,980,985,990,995,1000,1005,1009,1014],{"type":32,"tag":206,"props":971,"children":972},{"style":223},[973],{"type":37,"value":974},"const",{"type":32,"tag":206,"props":976,"children":977},{"style":301},[978],{"type":37,"value":979}," ProductRecommendations",{"type":32,"tag":206,"props":981,"children":982},{"style":223},[983],{"type":37,"value":984}," =",{"type":32,"tag":206,"props":986,"children":987},{"style":239},[988],{"type":37,"value":989}," lazy",{"type":32,"tag":206,"props":991,"children":992},{"style":245},[993],{"type":37,"value":994},"(() ",{"type":32,"tag":206,"props":996,"children":997},{"style":223},[998],{"type":37,"value":999},"=>",{"type":32,"tag":206,"props":1001,"children":1002},{"style":223},[1003],{"type":37,"value":1004}," import",{"type":32,"tag":206,"props":1006,"children":1007},{"style":245},[1008],{"type":37,"value":403},{"type":32,"tag":206,"props":1010,"children":1011},{"style":559},[1012],{"type":37,"value":1013},"'.\u002FProductRecommendations'",{"type":32,"tag":206,"props":1015,"children":1016},{"style":245},[1017],{"type":37,"value":1018},"));\n",{"type":32,"tag":206,"props":1020,"children":1021},{"class":208,"line":322},[1022],{"type":32,"tag":206,"props":1023,"children":1024},{"emptyLinePlaceholder":581},[1025],{"type":37,"value":584},{"type":32,"tag":206,"props":1027,"children":1028},{"class":208,"line":352},[1029,1034,1039,1043,1048],{"type":32,"tag":206,"props":1030,"children":1031},{"style":223},[1032],{"type":37,"value":1033},"\u003C",{"type":32,"tag":206,"props":1035,"children":1036},{"style":245},[1037],{"type":37,"value":1038},"Suspense fallback",{"type":32,"tag":206,"props":1040,"children":1041},{"style":223},[1042],{"type":37,"value":314},{"type":32,"tag":206,"props":1044,"children":1045},{"style":245},[1046],{"type":37,"value":1047},"{\u003CRecommendationSkeleton \u002F>}",{"type":32,"tag":206,"props":1049,"children":1050},{"style":223},[1051],{"type":37,"value":1052},">\n",{"type":32,"tag":206,"props":1054,"children":1055},{"class":208,"line":361},[1056,1061,1066,1070,1075],{"type":32,"tag":206,"props":1057,"children":1058},{"style":223},[1059],{"type":37,"value":1060},"  \u003C",{"type":32,"tag":206,"props":1062,"children":1063},{"style":245},[1064],{"type":37,"value":1065},"ProductRecommendations productId",{"type":32,"tag":206,"props":1067,"children":1068},{"style":223},[1069],{"type":37,"value":314},{"type":32,"tag":206,"props":1071,"children":1072},{"style":245},[1073],{"type":37,"value":1074},"{product.id} ",{"type":32,"tag":206,"props":1076,"children":1077},{"style":223},[1078],{"type":37,"value":1079},"\u002F>\n",{"type":32,"tag":206,"props":1081,"children":1082},{"class":208,"line":416},[1083,1088,1093],{"type":32,"tag":206,"props":1084,"children":1085},{"style":223},[1086],{"type":37,"value":1087},"\u003C\u002F",{"type":32,"tag":206,"props":1089,"children":1090},{"style":245},[1091],{"type":37,"value":1092},"Suspense",{"type":32,"tag":206,"props":1094,"children":1095},{"style":223},[1096],{"type":37,"value":1052},{"type":32,"tag":33,"props":1098,"children":1099},{},[1100],{"type":37,"value":1101},"CLS dropped because Liquid created dynamic layout shifts (cart drawer, promo banners); Hydrogen eliminated them with skeleton components.",{"type":32,"tag":40,"props":1103,"children":1105},{"id":1104},"developer-experience-team-feedback",[1106],{"type":37,"value":1107},"Developer Experience: Team Feedback",{"type":32,"tag":33,"props":1109,"children":1110},{},[1111],{"type":37,"value":1112},"60 days post-migration, we surveyed the dev team (5 developers):",{"type":32,"tag":33,"props":1114,"children":1115},{},[1116],{"type":32,"tag":52,"props":1117,"children":1118},{},[1119],{"type":37,"value":1120},"Biggest pain point in Liquid:",{"type":32,"tag":506,"props":1122,"children":1123},{},[1124,1129,1134],{"type":32,"tag":510,"props":1125,"children":1126},{},[1127],{"type":37,"value":1128},"80% \"long debug cycles\"",{"type":32,"tag":510,"props":1130,"children":1131},{},[1132],{"type":37,"value":1133},"60% \"lack of modern tooling (TypeScript, hot reload)\"",{"type":32,"tag":510,"props":1135,"children":1136},{},[1137],{"type":37,"value":1138},"40% \"no component reusability\"",{"type":32,"tag":33,"props":1140,"children":1141},{},[1142],{"type":32,"tag":52,"props":1143,"children":1144},{},[1145],{"type":37,"value":1146},"Biggest win in Hydrogen:",{"type":32,"tag":506,"props":1148,"children":1149},{},[1150,1155,1160],{"type":32,"tag":510,"props":1151,"children":1152},{},[1153],{"type":37,"value":1154},"100% \"TypeScript + IDE autocomplete\"",{"type":32,"tag":510,"props":1156,"children":1157},{},[1158],{"type":37,"value":1159},"80% \"HMR dev speed\"",{"type":32,"tag":510,"props":1161,"children":1162},{},[1163],{"type":37,"value":1164},"60% \"access to React ecosystem\"",{"type":32,"tag":33,"props":1166,"children":1167},{},[1168],{"type":37,"value":1169},"Friction points: Hydrogen docs gaps (40%), Shopify Remix router learning curve (20%).",{"type":32,"tag":40,"props":1171,"children":1173},{"id":1172},"when-staying-with-liquid-makes-sense",[1174],{"type":37,"value":1175},"When Staying with Liquid Makes Sense",{"type":32,"tag":33,"props":1177,"children":1178},{},[1179],{"type":37,"value":1180},"Skipping Hydrogen is rational under these conditions:",{"type":32,"tag":1182,"props":1183,"children":1184},"ol",{},[1185,1195,1205,1215],{"type":32,"tag":510,"props":1186,"children":1187},{},[1188,1193],{"type":32,"tag":52,"props":1189,"children":1190},{},[1191],{"type":37,"value":1192},"Site traffic \u003C10K sessions\u002Fmonth:",{"type":37,"value":1194}," TTFB differences don't register in user experience; migration ROI vanishes.",{"type":32,"tag":510,"props":1196,"children":1197},{},[1198,1203],{"type":32,"tag":52,"props":1199,"children":1200},{},[1201],{"type":37,"value":1202},"Theme is mostly off-the-shelf:",{"type":37,"value":1204}," Pre-built theme users don't justify the refactor effort.",{"type":32,"tag":510,"props":1206,"children":1207},{},[1208,1213],{"type":32,"tag":52,"props":1209,"children":1210},{},[1211],{"type":37,"value":1212},"Dev team lacks React:",{"type":37,"value":1214}," Learning curve + onboarding stretches migration timelines 2–3x.",{"type":32,"tag":510,"props":1216,"children":1217},{},[1218,1223],{"type":32,"tag":52,"props":1219,"children":1220},{},[1221],{"type":37,"value":1222},"Not on Shopify Plus:",{"type":37,"value":1224}," Oxygen hosting comes bundled with Plus; Basic\u002FAdvanced plans incur extra fees.",{"type":32,"tag":40,"props":1226,"children":1228},{"id":1227},"post-decision-production-rollout-strategy",[1229],{"type":37,"value":1230},"Post-Decision: Production Rollout Strategy",{"type":32,"tag":33,"props":1232,"children":1233},{},[1234],{"type":37,"value":1235},"Three-phase deployment:",{"type":32,"tag":1182,"props":1237,"children":1238},{},[1239,1249,1259],{"type":32,"tag":510,"props":1240,"children":1241},{},[1242,1247],{"type":32,"tag":52,"props":1243,"children":1244},{},[1245],{"type":37,"value":1246},"Staging environment:",{"type":37,"value":1248}," Hydrogen site deployed to Vercel, internal testing over 2 weeks (QA + stakeholder sign-off).",{"type":32,"tag":510,"props":1250,"children":1251},{},[1252,1257],{"type":32,"tag":52,"props":1253,"children":1254},{},[1255],{"type":37,"value":1256},"Canary release:",{"type":37,"value":1258}," Routed 10% traffic to Hydrogen (Cloudflare Workers A\u002FB split), conversion delta +2.3%.",{"type":32,"tag":510,"props":1260,"children":1261},{},[1262,1267],{"type":32,"tag":52,"props":1263,"children":1264},{},[1265],{"type":37,"value":1266},"Full rollout:",{"type":37,"value":1268}," 14 days later, 100% traffic moved to Hydrogen; Liquid remained as fallback.",{"type":32,"tag":33,"props":1270,"children":1271},{},[1272],{"type":37,"value":1273},"Post-launch metrics: checkout conversion lifted from 3.8% → 4.1% (TTFB + CLS improvements compounded). Annual revenue impact: $180K (average AOV $120, 15K orders\u002Fmonth).",{"type":32,"tag":33,"props":1275,"children":1276},{},[1277],{"type":37,"value":1278},"The Hydrogen call was numerically sound: TTFB dropped 82%, developer velocity gained 98%, migration cost broke even in year one. The escape velocity from Liquid wasn't performance—it was modern developer experience and composable architecture flexibility. If you're staying in Shopify's ecosystem and want to go headless, Hydrogen is the only rational choice.",{"type":32,"tag":1280,"props":1281,"children":1282},"style",{},[1283],{"type":37,"value":1284},"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":287,"depth":287,"links":1286},[1287,1288,1289,1290,1291,1292,1293],{"id":42,"depth":219,"text":45},{"id":474,"depth":219,"text":477},{"id":635,"depth":219,"text":638},{"id":787,"depth":219,"text":790},{"id":1104,"depth":219,"text":1107},{"id":1172,"depth":219,"text":1175},{"id":1227,"depth":219,"text":1230},"markdown","content:en:tech:shopify-hydrogen-vs-liquid-decision-metrics.md","content","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics.md","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","md",1785103529941]