[{"data":1,"prerenderedAt":1067},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision":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":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":1061,"_id":1062,"_source":1063,"_file":1064,"_stem":1065,"_extension":1066},"tech",false,"","Shopify Hydrogen vs Liquid: Making the Decision With Hard Numbers","TTFB, build time, dev velocity, migration cost — how we chose between Hydrogen and Liquid using concrete metrics. Tradeoff analysis and real benchmark data.","2026-06-18",[21,22,23,24,25],"shopify-hydrogen","liquid","headless-commerce","web-performance","ttfb",8,"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","After 2024, deciding on a Shopify project architecture isn't about \"modern vs legacy\" anymore. The real question: which numbers justify the choice. Between Hydrogen's React Server Components architecture and Liquid's monolithic approach, we're sharing numerical data collected across 6 projects. This piece has no theoretical framework comparisons—only evidence-driven analysis across TTFB, build time, developer velocity, and migration cost.",{"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},"The first metric: Time to First Byte. In Hydrogen projects, we tested Oxygen (Shopify's edge runtime) against Cloudflare Workers. Liquid themes use Shopify's default 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, average 120kb bundle",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Liquid: Dawn 15.0, default cache settings",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"Test: WebPageTest, Virginia location, 3G Fast connection, 9-run average",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"Results:",{"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},"Architecture",{"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},"When Hydrogen's edge SSR caching strategy is set up correctly, TTFB drops 58%. But this only holds for static routes—on personalized routes like cart and checkout, the difference shrinks to 30% because cache bypass happens.",{"type":32,"tag":201,"props":202,"children":204},"h3",{"id":203},"personalized-route-tradeoff",[205],{"type":37,"value":206},"Personalized Route Tradeoff",{"type":32,"tag":33,"props":208,"children":209},{},[210],{"type":37,"value":211},"In Hydrogen, personalization latency works like this: every user's cart query hits the Storefront API, and this roundtrip adds ~80-120ms even at the edge. In Liquid, this query resolves server-side within the template—no extra roundtrip. So if personalized page count is high (like PDPs showing many variants), the TTFB gain shrinks. On a cosmetics project with a 240-SKU PDP, Hydrogen TTFB was 290ms, Liquid 380ms—a 23% difference.",{"type":32,"tag":40,"props":213,"children":215},{"id":214},"build-time-dev-iteration-speed",[216],{"type":37,"value":217},"Build Time: Dev Iteration Speed",{"type":32,"tag":33,"props":219,"children":220},{},[221],{"type":37,"value":222},"Second metric: local dev and production build time. In Hydrogen projects we use Vite, in Liquid we use Theme Kit or 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 startup:",{"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 (no build, Shopify renders directly)",{"type":32,"tag":65,"props":261,"children":262},{},[263],{"type":37,"value":264},"Hydrogen: 12-18s (bundle + SSR output generation)",{"type":32,"tag":33,"props":266,"children":267},{},[268,270,277,279,285],{"type":37,"value":269},"In Liquid, no build step means simpler CI\u002FCD. In Hydrogen, ",{"type":32,"tag":271,"props":272,"children":274},"code",{"className":273},[],[275],{"type":37,"value":276},"npm run build",{"type":37,"value":278}," takes 12s even for tiny changes. But hot module replacement (HMR) is far faster in Hydrogen—when you change a ",{"type":32,"tag":271,"props":280,"children":282},{"className":281},[],[283],{"type":37,"value":284},".liquid",{"type":37,"value":286}," file, Theme Kit syncs (~2-3s), while Hydrogen's Vite HMR applies instantly (\u003C200ms).",{"type":32,"tag":33,"props":288,"children":289},{},[290],{"type":37,"value":291},"For teams making 50+ changes daily, this translates directly to dev velocity. On a fashion brand project, sprint velocity jumped 18% after switching to Hydrogen—the reason: developers stay in flow instead of waiting.",{"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},"Third metric: TypeScript coverage, linting, testing. Liquid is managed with JavaScript (inline ",{"type":32,"tag":271,"props":304,"children":306},{"className":305},[],[307],{"type":37,"value":308},"\u003Cscript>",{"type":37,"value":310}," tags), Hydrogen is full TypeScript.",{"type":32,"tag":33,"props":312,"children":313},{},[314],{"type":32,"tag":55,"props":315,"children":316},{},[317],{"type":37,"value":318},"Error detection rate:",{"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 errors",{"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 warnings",{"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 coverage",{"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},"In Hydrogen, Storefront API responses ship with TypeScript type definitions. If the API contract changes, the build fails—not a runtime error. In Liquid, you only see these changes in production.",{"type":32,"tag":33,"props":405,"children":406},{},[407,409,415],{"type":37,"value":408},"Real example: Storefront API changed ",{"type":32,"tag":271,"props":410,"children":412},{"className":411},[],[413],{"type":37,"value":414},"product.metafields",{"type":37,"value":416}," response structure (Q2 2025). Hydrogen projects threw TypeScript errors, deployment failed, fix applied. Liquid projects showed console errors in production, discovered 3 days later. This risk gap matters for high-traffic commerce sites.",{"type":32,"tag":40,"props":418,"children":420},{"id":419},"migration-cost-refactor-effort",[421],{"type":37,"value":422},"Migration Cost: Refactor Effort",{"type":32,"tag":33,"props":424,"children":425},{},[426],{"type":37,"value":427},"Fourth metric: cost to move an existing Liquid theme to Hydrogen. Effort data from three projects:",{"type":32,"tag":33,"props":429,"children":430},{},[431],{"type":32,"tag":55,"props":432,"children":433},{},[434],{"type":37,"value":435},"Project A (fashion, 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-days",{"type":32,"tag":65,"props":450,"children":451},{},[452],{"type":37,"value":453},"Component count: 32 React components",{"type":32,"tag":33,"props":455,"children":456},{},[457],{"type":32,"tag":55,"props":458,"children":459},{},[460],{"type":37,"value":461},"Project B (electronics, 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-days",{"type":32,"tag":65,"props":476,"children":477},{},[478],{"type":37,"value":479},"Component count: 78 React components",{"type":32,"tag":33,"props":481,"children":482},{},[483],{"type":32,"tag":55,"props":484,"children":485},{},[486],{"type":37,"value":487},"Project C (cosmetics, 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-days",{"type":32,"tag":65,"props":502,"children":503},{},[504],{"type":37,"value":505},"Component count: 51 React components",{"type":32,"tag":33,"props":507,"children":508},{},[509,511,516],{"type":37,"value":510},"Average migration cost: ",{"type":32,"tag":55,"props":512,"children":513},{},[514],{"type":37,"value":515},"1 Liquid LOC = 0.004 developer-days",{"type":37,"value":517},". So a 5,000-line Liquid theme takes ~20 developer-days to port to Hydrogen. Testing and QA not included—development only.",{"type":32,"tag":33,"props":519,"children":520},{},[521],{"type":37,"value":522},"The most time-consuming area: cart\u002Fcheckout flow (native in Shopify Liquid, custom implementation in Hydrogen). Project B spent 12 extra days on checkout customization because dynamic discount logic had to be rewritten and re-tested.",{"type":32,"tag":201,"props":524,"children":526},{"id":525},"tradeoff-analysis",[527],{"type":37,"value":528},"Tradeoff Analysis",{"type":32,"tag":33,"props":530,"children":531},{},[532],{"type":37,"value":533},"Migration cost makes sense when: high traffic + strong personalization needs. A travel e-commerce site (120k daily sessions) saw conversion climb from 2.1% to 2.6% after switching to Hydrogen. Reason: LCP dropped from 2.8s to 1.4s, bounce rate fell. 20-day migration cost paid for itself in 4 months.",{"type":32,"tag":33,"props":535,"children":536},{},[537],{"type":37,"value":538},"Migration cost doesn't make sense when: low traffic + static catalog. A B2B industrial parts site (800 daily sessions) never recovered the migration cost over 14 months—no traffic growth, just a dev stack change.",{"type":32,"tag":40,"props":540,"children":542},{"id":541},"runtime-cost-hosting-api-quota",[543],{"type":37,"value":544},"Runtime Cost: Hosting + API Quota",{"type":32,"tag":33,"props":546,"children":547},{},[548],{"type":37,"value":549},"Fifth metric: infrastructure and API usage cost. Hydrogen runs on Oxygen or self-hosted edge, Liquid on Shopify servers.",{"type":32,"tag":33,"props":551,"children":552},{},[553],{"type":32,"tag":55,"props":554,"children":555},{},[556],{"type":37,"value":557},"Oxygen pricing (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},"Included: 1M request\u002Fmonth",{"type":32,"tag":65,"props":567,"children":568},{},[569],{"type":37,"value":570},"Overage: $0.50 per 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: Everything flows through Storefront API (higher query cost)",{"type":32,"tag":65,"props":588,"children":589},{},[590],{"type":37,"value":591},"Liquid: Server-side render, fewer API queries",{"type":32,"tag":33,"props":593,"children":594},{},[595],{"type":37,"value":596},"On a fashion site (200k 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 extra hosting (included with Shopify)",{"type":32,"tag":65,"props":606,"children":607},{},[608],{"type":37,"value":609},"Hydrogen: $120\u002Fmonth (2.4M requests, 1.4M over quota)",{"type":32,"tag":33,"props":611,"children":612},{},[613],{"type":37,"value":614},"API query cost in Hydrogen demands attention. Every SSR route queries Storefront API. Without aggressive caching, quota overruns happen. We use stale-while-revalidate across projects:",{"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 example\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 Accept stale for 24 hours\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,824,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 example\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":807},{"class":628,"line":26},[808,813,819],{"type":32,"tag":626,"props":809,"children":810},{"style":665},[811],{"type":37,"value":812},"        mode: ",{"type":32,"tag":626,"props":814,"children":816},{"style":815},"--shiki-default:#9ECBFF",[817],{"type":37,"value":818},"'public'",{"type":32,"tag":626,"props":820,"children":821},{"style":665},[822],{"type":37,"value":823},",\n",{"type":32,"tag":626,"props":825,"children":827},{"class":628,"line":826},9,[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":823},{"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 Accept stale for 24 hours\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},"This cut API requests by 40%. But stale content risk exists—price\u002Fstock changes can display delayed by up to an hour. Tradeoff: cost vs freshness.",{"type":32,"tag":40,"props":908,"children":910},{"id":909},"the-decision-matrix-how-we-choose",[911],{"type":37,"value":912},"The Decision Matrix: How We Choose",{"type":32,"tag":33,"props":914,"children":915},{},[916],{"type":37,"value":917},"No sixth metric here—just the decision framework. We pick Hydrogen when:",{"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},"50k+ daily sessions",{"type":37,"value":931},"—LCP improvement directly impacts conversion",{"type":32,"tag":65,"props":933,"children":934},{},[935,940],{"type":32,"tag":55,"props":936,"children":937},{},[938],{"type":37,"value":939},"High personalization requirement",{"type":37,"value":941},"—edge SSR serves dynamic content fast",{"type":32,"tag":65,"props":943,"children":944},{},[945,950],{"type":32,"tag":55,"props":946,"children":947},{},[948],{"type":37,"value":949},"Team knows React",{"type":37,"value":951},"—migration runs smooth, velocity increases",{"type":32,"tag":65,"props":953,"children":954},{},[955,960],{"type":32,"tag":55,"props":956,"children":957},{},[958],{"type":37,"value":959},"Using Shopify Plus",{"type":37,"value":961},"—Oxygen included, no extra runtime cost",{"type":32,"tag":33,"props":963,"children":964},{},[965],{"type":37,"value":966},"We keep Liquid when:",{"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},"Sub-5k daily sessions",{"type":37,"value":979},"—migration cost never pays back",{"type":32,"tag":65,"props":981,"children":982},{},[983,988],{"type":32,"tag":55,"props":984,"children":985},{},[986],{"type":37,"value":987},"Static catalog",{"type":37,"value":989},"—infrequent updates, Liquid template is enough",{"type":32,"tag":65,"props":991,"children":992},{},[993,998],{"type":32,"tag":55,"props":994,"children":995},{},[996],{"type":37,"value":997},"Small dev team",{"type":37,"value":999},"—team doesn't know React, learning cost is high",{"type":32,"tag":65,"props":1001,"children":1002},{},[1003,1008],{"type":32,"tag":55,"props":1004,"children":1005},{},[1006],{"type":37,"value":1007},"Budget tight",{"type":37,"value":1009},"—migration + hosting cost can't be absorbed",{"type":32,"tag":33,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Real example: A supermarket chain (80k daily sessions, 4,000 SKUs) switched to Hydrogen. TTFB fell from 480ms to 190ms, LCP from 3.2s to 1.6s. Conversion jumped from 1.8% to 2.3% (+27%). Migration took 35 developer-days, paid back in 6 months. Meanwhile, a boutique hotel (1,200 daily sessions) stayed on Liquid—traffic too low, LCP already 2.1s (acceptable), migration unjustifiable.",{"type":32,"tag":40,"props":1016,"children":1018},{"id":1017},"whats-next-the-hybrid-approach",[1019],{"type":37,"value":1020},"What's Next: The Hybrid Approach",{"type":32,"tag":33,"props":1022,"children":1023},{},[1024,1026,1035],{"type":37,"value":1025},"Hydrogen vs Liquid isn't binary. In a ",{"type":32,"tag":1027,"props":1028,"children":1032},"a",{"href":1029,"rel":1030},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[1031],"nofollow",[1033],{"type":37,"value":1034},"headless commerce",{"type":37,"value":1036}," architecture, you can edge-SSR some routes with Hydrogen and leave non-critical pages on Liquid. For example: PDP + PLP on Hydrogen, blog + info pages on Liquid. This hybrid cuts migration risk, keeps costs controlled.",{"type":32,"tag":33,"props":1038,"children":1039},{},[1040],{"type":37,"value":1041},"Our decision criteria come down to this: numbers speak. TTFB, conversion rate, developer velocity. If your session volume is high and Core Web Vitals matter, Hydrogen nets you wins. If traffic is low and your team doesn't know React, Liquid is the pragmatic choice. The place to decide: a dashboard built on your own metrics.",{"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:en:tech:shopify-hydrogen-vs-liquid-metrics-driven-decision.md","content","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision.md","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision","md",1782079487589]