[{"data":1,"prerenderedAt":1203},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-data-driven-decision":12},{"i18nKey":4,"paths":5},"tech-002-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-kennzahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-the-numbers-behind-our-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-detras-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decisions-by-numbers","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram",{"_path":13,"_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":1197,"_id":1198,"_source":1199,"_file":1200,"_stem":1201,"_extension":1202},"\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-data-driven-decision","tech",false,"","Shopify Hydrogen vs Liquid: Making the Decision with Numbers","TTFB 320ms improvement, 12-minute build time, $18K migration cost. We quantified the shift to Hydrogen with performance gains, developer velocity, and cost analysis.","2026-05-31",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","liquid-templating","react-server-components",8,"Roibase",{"type":29,"children":30,"toc":1189},"root",[31,39,46,51,56,61,70,146,154,387,392,398,403,408,413,542,547,553,558,593,598,621,626,644,649,655,668,673,1044,1057,1062,1068,1084,1089,1094,1099,1105,1110,1163,1168,1173,1178,1183],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Migrating a Shopify store's frontend stack is a bet against customer loss. In 2024, we executed a Liquid-to-Hydrogen transition for a fashion brand. The metrics driving the decision: 320ms TTFB gap, 12-minute build time, 180% developer velocity gain, $18,000 total migration cost. This post walks through how we collected the numbers, which trade-offs we accepted, and what the metrics actually looked like two months post-launch.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"the-lie-that-liquid-is-fast-enough",[44],{"type":37,"value":45},"The Lie That Liquid Is \"Fast Enough\"",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Liquid template rendering is low-latency, but that's not TTFB. Shopify's servers process theme files on every request, fetch product data from the database, and render sections. Average TTFB sat at 480ms (Search Console RUM). Hydrogen served the same page in 160ms. The 320ms gap translated to a 2.1% mobile conversion rate lift (A\u002FB test, 14-day segment).",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"The TTFB gap's source: Hydrogen server components run at the edge, pulling only required fields from the Shopify Storefront API via GraphQL projection, hitting 87% CDN cache rate. Liquid caches only at page level—no component-level caching—so every hit goes to the backend.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Code comparison—same product grid render:",{"type":32,"tag":33,"props":62,"children":63},{},[64],{"type":32,"tag":65,"props":66,"children":67},"strong",{},[68],{"type":37,"value":69},"Liquid (snippet):",{"type":32,"tag":71,"props":72,"children":76},"pre",{"className":73,"code":74,"language":75,"meta":16,"style":16},"language-liquid shiki shiki-themes github-dark","{% for product in collection.products %}\n  \u003Cdiv class=\"product-card\">\n    \u003Cimg src=\"{{ product.featured_image | img_url: '400x' }}\" alt=\"{{ product.title }}\">\n    \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n    \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n{% endfor %}\n","liquid",[77],{"type":32,"tag":78,"props":79,"children":80},"code",{"__ignoreMap":16},[81,92,101,110,119,128,137],{"type":32,"tag":82,"props":83,"children":86},"span",{"class":84,"line":85},"line",1,[87],{"type":32,"tag":82,"props":88,"children":89},{},[90],{"type":37,"value":91},"{% for product in collection.products %}\n",{"type":32,"tag":82,"props":93,"children":95},{"class":84,"line":94},2,[96],{"type":32,"tag":82,"props":97,"children":98},{},[99],{"type":37,"value":100},"  \u003Cdiv class=\"product-card\">\n",{"type":32,"tag":82,"props":102,"children":104},{"class":84,"line":103},3,[105],{"type":32,"tag":82,"props":106,"children":107},{},[108],{"type":37,"value":109},"    \u003Cimg src=\"{{ product.featured_image | img_url: '400x' }}\" alt=\"{{ product.title }}\">\n",{"type":32,"tag":82,"props":111,"children":113},{"class":84,"line":112},4,[114],{"type":32,"tag":82,"props":115,"children":116},{},[117],{"type":37,"value":118},"    \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n",{"type":32,"tag":82,"props":120,"children":122},{"class":84,"line":121},5,[123],{"type":32,"tag":82,"props":124,"children":125},{},[126],{"type":37,"value":127},"    \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n",{"type":32,"tag":82,"props":129,"children":131},{"class":84,"line":130},6,[132],{"type":32,"tag":82,"props":133,"children":134},{},[135],{"type":37,"value":136},"  \u003C\u002Fdiv>\n",{"type":32,"tag":82,"props":138,"children":140},{"class":84,"line":139},7,[141],{"type":32,"tag":82,"props":142,"children":143},{},[144],{"type":37,"value":145},"{% endfor %}\n",{"type":32,"tag":33,"props":147,"children":148},{},[149],{"type":32,"tag":65,"props":150,"children":151},{},[152],{"type":37,"value":153},"Hydrogen (RSC):",{"type":32,"tag":71,"props":155,"children":159},{"className":156,"code":157,"language":158,"meta":16,"style":16},"language-tsx shiki shiki-themes github-dark","export default async function ProductGrid({ collection }) {\n  const {products} = await storefront.query(PRODUCTS_QUERY, {\n    variables: {handle: collection}\n  });\n  \n  return products.nodes.map(p => (\n    \u003CProductCard key={p.id} product={p} \u002F>\n  ));\n}\n","tsx",[160],{"type":32,"tag":78,"props":161,"children":162},{"__ignoreMap":16},[163,210,269,277,285,293,329,370,378],{"type":32,"tag":82,"props":164,"children":165},{"class":84,"line":85},[166,172,177,182,187,193,199,205],{"type":32,"tag":82,"props":167,"children":169},{"style":168},"--shiki-default:#F97583",[170],{"type":37,"value":171},"export",{"type":32,"tag":82,"props":173,"children":174},{"style":168},[175],{"type":37,"value":176}," default",{"type":32,"tag":82,"props":178,"children":179},{"style":168},[180],{"type":37,"value":181}," async",{"type":32,"tag":82,"props":183,"children":184},{"style":168},[185],{"type":37,"value":186}," function",{"type":32,"tag":82,"props":188,"children":190},{"style":189},"--shiki-default:#B392F0",[191],{"type":37,"value":192}," ProductGrid",{"type":32,"tag":82,"props":194,"children":196},{"style":195},"--shiki-default:#E1E4E8",[197],{"type":37,"value":198},"({ ",{"type":32,"tag":82,"props":200,"children":202},{"style":201},"--shiki-default:#FFAB70",[203],{"type":37,"value":204},"collection",{"type":32,"tag":82,"props":206,"children":207},{"style":195},[208],{"type":37,"value":209}," }) {\n",{"type":32,"tag":82,"props":211,"children":212},{"class":84,"line":94},[213,218,223,229,234,239,244,249,254,259,264],{"type":32,"tag":82,"props":214,"children":215},{"style":168},[216],{"type":37,"value":217},"  const",{"type":32,"tag":82,"props":219,"children":220},{"style":195},[221],{"type":37,"value":222}," {",{"type":32,"tag":82,"props":224,"children":226},{"style":225},"--shiki-default:#79B8FF",[227],{"type":37,"value":228},"products",{"type":32,"tag":82,"props":230,"children":231},{"style":195},[232],{"type":37,"value":233},"} ",{"type":32,"tag":82,"props":235,"children":236},{"style":168},[237],{"type":37,"value":238},"=",{"type":32,"tag":82,"props":240,"children":241},{"style":168},[242],{"type":37,"value":243}," await",{"type":32,"tag":82,"props":245,"children":246},{"style":195},[247],{"type":37,"value":248}," storefront.",{"type":32,"tag":82,"props":250,"children":251},{"style":189},[252],{"type":37,"value":253},"query",{"type":32,"tag":82,"props":255,"children":256},{"style":195},[257],{"type":37,"value":258},"(",{"type":32,"tag":82,"props":260,"children":261},{"style":225},[262],{"type":37,"value":263},"PRODUCTS_QUERY",{"type":32,"tag":82,"props":265,"children":266},{"style":195},[267],{"type":37,"value":268},", {\n",{"type":32,"tag":82,"props":270,"children":271},{"class":84,"line":103},[272],{"type":32,"tag":82,"props":273,"children":274},{"style":195},[275],{"type":37,"value":276},"    variables: {handle: collection}\n",{"type":32,"tag":82,"props":278,"children":279},{"class":84,"line":112},[280],{"type":32,"tag":82,"props":281,"children":282},{"style":195},[283],{"type":37,"value":284},"  });\n",{"type":32,"tag":82,"props":286,"children":287},{"class":84,"line":121},[288],{"type":32,"tag":82,"props":289,"children":290},{"style":195},[291],{"type":37,"value":292},"  \n",{"type":32,"tag":82,"props":294,"children":295},{"class":84,"line":130},[296,301,306,311,315,319,324],{"type":32,"tag":82,"props":297,"children":298},{"style":168},[299],{"type":37,"value":300},"  return",{"type":32,"tag":82,"props":302,"children":303},{"style":195},[304],{"type":37,"value":305}," products.nodes.",{"type":32,"tag":82,"props":307,"children":308},{"style":189},[309],{"type":37,"value":310},"map",{"type":32,"tag":82,"props":312,"children":313},{"style":195},[314],{"type":37,"value":258},{"type":32,"tag":82,"props":316,"children":317},{"style":201},[318],{"type":37,"value":33},{"type":32,"tag":82,"props":320,"children":321},{"style":168},[322],{"type":37,"value":323}," =>",{"type":32,"tag":82,"props":325,"children":326},{"style":195},[327],{"type":37,"value":328}," (\n",{"type":32,"tag":82,"props":330,"children":331},{"class":84,"line":139},[332,337,342,347,351,356,361,365],{"type":32,"tag":82,"props":333,"children":334},{"style":195},[335],{"type":37,"value":336},"    \u003C",{"type":32,"tag":82,"props":338,"children":339},{"style":225},[340],{"type":37,"value":341},"ProductCard",{"type":32,"tag":82,"props":343,"children":344},{"style":189},[345],{"type":37,"value":346}," key",{"type":32,"tag":82,"props":348,"children":349},{"style":168},[350],{"type":37,"value":238},{"type":32,"tag":82,"props":352,"children":353},{"style":195},[354],{"type":37,"value":355},"{p.id} ",{"type":32,"tag":82,"props":357,"children":358},{"style":189},[359],{"type":37,"value":360},"product",{"type":32,"tag":82,"props":362,"children":363},{"style":168},[364],{"type":37,"value":238},{"type":32,"tag":82,"props":366,"children":367},{"style":195},[368],{"type":37,"value":369},"{p} \u002F>\n",{"type":32,"tag":82,"props":371,"children":372},{"class":84,"line":26},[373],{"type":32,"tag":82,"props":374,"children":375},{"style":195},[376],{"type":37,"value":377},"  ));\n",{"type":32,"tag":82,"props":379,"children":381},{"class":84,"line":380},9,[382],{"type":32,"tag":82,"props":383,"children":384},{"style":195},[385],{"type":37,"value":386},"}\n",{"type":32,"tag":33,"props":388,"children":389},{},[390],{"type":37,"value":391},"The Liquid version renders 18KB of static HTML for 20 products. Hydrogen outputs 4.2KB JSON plus a 12KB hydration bundle. Transfer volume dropped 65%. Plus, because the product card is a separate component, A\u002FB testing doesn't require rebuilding the entire template.",{"type":32,"tag":40,"props":393,"children":395},{"id":394},"build-time-trade-off-12-minutes-vs-4-seconds",[396],{"type":37,"value":397},"Build Time Trade-off: 12 Minutes vs. 4 Seconds",{"type":32,"tag":33,"props":399,"children":400},{},[401],{"type":37,"value":402},"Uploading a Liquid theme via Shopify CLI deploys in 4 seconds. Hydrogen's production build runs webpack + vite + prerendering, averaging 12 minutes (8 minutes on Vercel, 14 on self-hosted runners). Does this stretch the developer feedback loop?",{"type":32,"tag":33,"props":404,"children":405},{},[406],{"type":37,"value":407},"No—because Hydrogen's development mode hot-reloads changes in 180ms. A Liquid theme change requires upload-to-Shopify-and-refresh (6-second cycle average). Development iteration velocity improved 180% with Hydrogen (internal metric: time from PR merge to staging deploy).",{"type":32,"tag":33,"props":409,"children":410},{},[411],{"type":37,"value":412},"We accepted the production build time because the CI\u002FCD pipeline runs parallel tests and builds. Pushing to staging deploys in 12 minutes, but that's a one-time cost. Liquid required re-uploads per fix. Hydrogen offers atomic deployments; rollback takes 30 seconds.",{"type":32,"tag":414,"props":415,"children":416},"table",{},[417,446],{"type":32,"tag":418,"props":419,"children":420},"thead",{},[421],{"type":32,"tag":422,"props":423,"children":424},"tr",{},[425,431,436,441],{"type":32,"tag":426,"props":427,"children":428},"th",{},[429],{"type":37,"value":430},"Metric",{"type":32,"tag":426,"props":432,"children":433},{},[434],{"type":37,"value":435},"Liquid",{"type":32,"tag":426,"props":437,"children":438},{},[439],{"type":37,"value":440},"Hydrogen",{"type":32,"tag":426,"props":442,"children":443},{},[444],{"type":37,"value":445},"Difference",{"type":32,"tag":447,"props":448,"children":449},"tbody",{},[450,474,497,519],{"type":32,"tag":422,"props":451,"children":452},{},[453,459,464,469],{"type":32,"tag":454,"props":455,"children":456},"td",{},[457],{"type":37,"value":458},"Dev cycle (hot reload)",{"type":32,"tag":454,"props":460,"children":461},{},[462],{"type":37,"value":463},"6s",{"type":32,"tag":454,"props":465,"children":466},{},[467],{"type":37,"value":468},"180ms",{"type":32,"tag":454,"props":470,"children":471},{},[472],{"type":37,"value":473},"–97%",{"type":32,"tag":422,"props":475,"children":476},{},[477,482,487,492],{"type":32,"tag":454,"props":478,"children":479},{},[480],{"type":37,"value":481},"Production build",{"type":32,"tag":454,"props":483,"children":484},{},[485],{"type":37,"value":486},"4s",{"type":32,"tag":454,"props":488,"children":489},{},[490],{"type":37,"value":491},"12m",{"type":32,"tag":454,"props":493,"children":494},{},[495],{"type":37,"value":496},"+18000%",{"type":32,"tag":422,"props":498,"children":499},{},[500,505,510,515],{"type":32,"tag":454,"props":501,"children":502},{},[503],{"type":37,"value":504},"Rollback time",{"type":32,"tag":454,"props":506,"children":507},{},[508],{"type":37,"value":509},"Manual (15m+)",{"type":32,"tag":454,"props":511,"children":512},{},[513],{"type":37,"value":514},"30s",{"type":32,"tag":454,"props":516,"children":517},{},[518],{"type":37,"value":473},{"type":32,"tag":422,"props":520,"children":521},{},[522,527,532,537],{"type":32,"tag":454,"props":523,"children":524},{},[525],{"type":37,"value":526},"A\u002FB test setup",{"type":32,"tag":454,"props":528,"children":529},{},[530],{"type":37,"value":531},"Theme duplication",{"type":32,"tag":454,"props":533,"children":534},{},[535],{"type":37,"value":536},"Feature flag",{"type":32,"tag":454,"props":538,"children":539},{},[540],{"type":37,"value":541},"+60% dev velocity",{"type":32,"tag":33,"props":543,"children":544},{},[545],{"type":37,"value":546},"Build time is longer, but deployment frequency dropped. Liquid saw 8–12 minor deploys per day (CSS tweaks, copy changes). Hydrogen uses feature branches, staging tests, and one production deploy. Weekly deploys fell from 42 to 6, and bug count dropped 73%.",{"type":32,"tag":40,"props":548,"children":550},{"id":549},"migration-cost-18k-and-6-weeks",[551],{"type":37,"value":552},"Migration Cost: $18K and 6 Weeks",{"type":32,"tag":33,"props":554,"children":555},{},[556],{"type":37,"value":557},"Liquid-to-Hydrogen migration expenses:",{"type":32,"tag":559,"props":560,"children":561},"ul",{},[562,573,583],{"type":32,"tag":563,"props":564,"children":565},"li",{},[566,571],{"type":32,"tag":65,"props":567,"children":568},{},[569],{"type":37,"value":570},"Development:",{"type":37,"value":572}," 240 hours × $75\u002Fhour = $18,000",{"type":32,"tag":563,"props":574,"children":575},{},[576,581],{"type":32,"tag":65,"props":577,"children":578},{},[579],{"type":37,"value":580},"Infrastructure:",{"type":37,"value":582}," Vercel Pro $20\u002Fmonth + Shopify Plus (pre-existing)",{"type":32,"tag":563,"props":584,"children":585},{},[586,591],{"type":32,"tag":65,"props":587,"children":588},{},[589],{"type":37,"value":590},"Risk buffer:",{"type":37,"value":592}," 2-week parallel run (double infrastructure cost)",{"type":32,"tag":33,"props":594,"children":595},{},[596],{"type":37,"value":597},"Breakdown of 240 hours:",{"type":32,"tag":559,"props":599,"children":600},{},[601,606,611,616],{"type":32,"tag":563,"props":602,"children":603},{},[604],{"type":37,"value":605},"Component conversion (120 hours): Liquid snippets to React components",{"type":32,"tag":563,"props":607,"children":608},{},[609],{"type":37,"value":610},"Storefront API integration (40 hours): GraphQL query optimization",{"type":32,"tag":563,"props":612,"children":613},{},[614],{"type":37,"value":615},"Testing + QA (50 hours): Visual regression, cross-browser",{"type":32,"tag":563,"props":617,"children":618},{},[619],{"type":37,"value":620},"Performance tuning (30 hours): Code splitting, lazy load, preload strategy",{"type":32,"tag":33,"props":622,"children":623},{},[624],{"type":37,"value":625},"During migration, Liquid stayed in production while Hydrogen ran in staging. Cart and checkout remained Shopify-native (Hydrogen wraps them anyway). The conversion funnel had zero breaking changes.",{"type":32,"tag":33,"props":627,"children":628},{},[629,634,636,642],{"type":32,"tag":65,"props":630,"children":631},{},[632],{"type":37,"value":633},"Hidden cost:",{"type":37,"value":635}," Image optimization. Liquid auto-serves WebP via Shopify CDN. Hydrogen requires manual ",{"type":32,"tag":78,"props":637,"children":639},{"className":638},[],[640],{"type":37,"value":641},"srcset",{"type":37,"value":643}," definitions in the image component. This added 12 hours of work.",{"type":32,"tag":33,"props":645,"children":646},{},[647],{"type":37,"value":648},"Migration ROI: Within three months, Core Web Vitals improvements drove 8.4% organic traffic growth and 2.1% conversion lift. Simple math: 120K monthly visitors × 2.1% conversion lift × $85 AOV = $21,420 incremental revenue. Migration cost paid for itself in 45 days.",{"type":32,"tag":40,"props":650,"children":652},{"id":651},"development-velocity-typescript-component-reuse-feature-flags",[653],{"type":37,"value":654},"Development Velocity: TypeScript, Component Reuse, Feature Flags",{"type":32,"tag":33,"props":656,"children":657},{},[658,660,666],{"type":37,"value":659},"Liquid templates aren't type-safe. Write ",{"type":32,"tag":78,"props":661,"children":663},{"className":662},[],[664],{"type":37,"value":665},"product.price",{"type":37,"value":667}," and you won't know until runtime if it breaks. Hydrogen uses TypeScript + GraphQL Codegen; API response types auto-generate. This alone reduced bug count 40% (pre-production QA metric).",{"type":32,"tag":33,"props":669,"children":670},{},[671],{"type":37,"value":672},"Component reuse: Liquid has snippet includes, but no state management. Hydrogen uses React context + Remix loaders. Example—user preference (language, currency): Liquid reads cookies and re-parses in every template. Hydrogen loads once in the loader, writes to context, all components access automatically.",{"type":32,"tag":71,"props":674,"children":676},{"className":156,"code":675,"language":158,"meta":16,"style":16},"\u002F\u002F app\u002Froot.tsx - Hydrogen loader\nexport async function loader({context, request}: LoaderArgs) {\n  const customerAccessToken = await context.session.get('customerAccessToken');\n  const customer = customerAccessToken \n    ? await getCustomer(context.storefront, customerAccessToken)\n    : null;\n  \n  return json({customer});\n}\n\n\u002F\u002F Any component\nimport {useLoaderData} from '@remix-run\u002Freact';\n\nexport default function Header() {\n  const {customer} = useLoaderData();\n  return \u003Cdiv>Welcome back, {customer?.firstName}\u003C\u002Fdiv>;\n}\n",[677],{"type":32,"tag":78,"props":678,"children":679},{"__ignoreMap":16},[680,689,749,795,816,838,856,863,880,887,897,906,934,942,968,1003,1036],{"type":32,"tag":82,"props":681,"children":682},{"class":84,"line":85},[683],{"type":32,"tag":82,"props":684,"children":686},{"style":685},"--shiki-default:#6A737D",[687],{"type":37,"value":688},"\u002F\u002F app\u002Froot.tsx - Hydrogen loader\n",{"type":32,"tag":82,"props":690,"children":691},{"class":84,"line":94},[692,696,700,704,709,714,719,724,729,734,739,744],{"type":32,"tag":82,"props":693,"children":694},{"style":168},[695],{"type":37,"value":171},{"type":32,"tag":82,"props":697,"children":698},{"style":168},[699],{"type":37,"value":181},{"type":32,"tag":82,"props":701,"children":702},{"style":168},[703],{"type":37,"value":186},{"type":32,"tag":82,"props":705,"children":706},{"style":189},[707],{"type":37,"value":708}," loader",{"type":32,"tag":82,"props":710,"children":711},{"style":195},[712],{"type":37,"value":713},"({",{"type":32,"tag":82,"props":715,"children":716},{"style":201},[717],{"type":37,"value":718},"context",{"type":32,"tag":82,"props":720,"children":721},{"style":195},[722],{"type":37,"value":723},", ",{"type":32,"tag":82,"props":725,"children":726},{"style":201},[727],{"type":37,"value":728},"request",{"type":32,"tag":82,"props":730,"children":731},{"style":195},[732],{"type":37,"value":733},"}",{"type":32,"tag":82,"props":735,"children":736},{"style":168},[737],{"type":37,"value":738},":",{"type":32,"tag":82,"props":740,"children":741},{"style":189},[742],{"type":37,"value":743}," LoaderArgs",{"type":32,"tag":82,"props":745,"children":746},{"style":195},[747],{"type":37,"value":748},") {\n",{"type":32,"tag":82,"props":750,"children":751},{"class":84,"line":103},[752,756,761,766,770,775,780,784,790],{"type":32,"tag":82,"props":753,"children":754},{"style":168},[755],{"type":37,"value":217},{"type":32,"tag":82,"props":757,"children":758},{"style":225},[759],{"type":37,"value":760}," customerAccessToken",{"type":32,"tag":82,"props":762,"children":763},{"style":168},[764],{"type":37,"value":765}," =",{"type":32,"tag":82,"props":767,"children":768},{"style":168},[769],{"type":37,"value":243},{"type":32,"tag":82,"props":771,"children":772},{"style":195},[773],{"type":37,"value":774}," context.session.",{"type":32,"tag":82,"props":776,"children":777},{"style":189},[778],{"type":37,"value":779},"get",{"type":32,"tag":82,"props":781,"children":782},{"style":195},[783],{"type":37,"value":258},{"type":32,"tag":82,"props":785,"children":787},{"style":786},"--shiki-default:#9ECBFF",[788],{"type":37,"value":789},"'customerAccessToken'",{"type":32,"tag":82,"props":791,"children":792},{"style":195},[793],{"type":37,"value":794},");\n",{"type":32,"tag":82,"props":796,"children":797},{"class":84,"line":112},[798,802,807,811],{"type":32,"tag":82,"props":799,"children":800},{"style":168},[801],{"type":37,"value":217},{"type":32,"tag":82,"props":803,"children":804},{"style":225},[805],{"type":37,"value":806}," customer",{"type":32,"tag":82,"props":808,"children":809},{"style":168},[810],{"type":37,"value":765},{"type":32,"tag":82,"props":812,"children":813},{"style":195},[814],{"type":37,"value":815}," customerAccessToken \n",{"type":32,"tag":82,"props":817,"children":818},{"class":84,"line":121},[819,824,828,833],{"type":32,"tag":82,"props":820,"children":821},{"style":168},[822],{"type":37,"value":823},"    ?",{"type":32,"tag":82,"props":825,"children":826},{"style":168},[827],{"type":37,"value":243},{"type":32,"tag":82,"props":829,"children":830},{"style":189},[831],{"type":37,"value":832}," getCustomer",{"type":32,"tag":82,"props":834,"children":835},{"style":195},[836],{"type":37,"value":837},"(context.storefront, customerAccessToken)\n",{"type":32,"tag":82,"props":839,"children":840},{"class":84,"line":130},[841,846,851],{"type":32,"tag":82,"props":842,"children":843},{"style":168},[844],{"type":37,"value":845},"    :",{"type":32,"tag":82,"props":847,"children":848},{"style":225},[849],{"type":37,"value":850}," null",{"type":32,"tag":82,"props":852,"children":853},{"style":195},[854],{"type":37,"value":855},";\n",{"type":32,"tag":82,"props":857,"children":858},{"class":84,"line":139},[859],{"type":32,"tag":82,"props":860,"children":861},{"style":195},[862],{"type":37,"value":292},{"type":32,"tag":82,"props":864,"children":865},{"class":84,"line":26},[866,870,875],{"type":32,"tag":82,"props":867,"children":868},{"style":168},[869],{"type":37,"value":300},{"type":32,"tag":82,"props":871,"children":872},{"style":189},[873],{"type":37,"value":874}," json",{"type":32,"tag":82,"props":876,"children":877},{"style":195},[878],{"type":37,"value":879},"({customer});\n",{"type":32,"tag":82,"props":881,"children":882},{"class":84,"line":380},[883],{"type":32,"tag":82,"props":884,"children":885},{"style":195},[886],{"type":37,"value":386},{"type":32,"tag":82,"props":888,"children":890},{"class":84,"line":889},10,[891],{"type":32,"tag":82,"props":892,"children":894},{"emptyLinePlaceholder":893},true,[895],{"type":37,"value":896},"\n",{"type":32,"tag":82,"props":898,"children":900},{"class":84,"line":899},11,[901],{"type":32,"tag":82,"props":902,"children":903},{"style":685},[904],{"type":37,"value":905},"\u002F\u002F Any component\n",{"type":32,"tag":82,"props":907,"children":909},{"class":84,"line":908},12,[910,915,920,925,930],{"type":32,"tag":82,"props":911,"children":912},{"style":168},[913],{"type":37,"value":914},"import",{"type":32,"tag":82,"props":916,"children":917},{"style":195},[918],{"type":37,"value":919}," {useLoaderData} ",{"type":32,"tag":82,"props":921,"children":922},{"style":168},[923],{"type":37,"value":924},"from",{"type":32,"tag":82,"props":926,"children":927},{"style":786},[928],{"type":37,"value":929}," '@remix-run\u002Freact'",{"type":32,"tag":82,"props":931,"children":932},{"style":195},[933],{"type":37,"value":855},{"type":32,"tag":82,"props":935,"children":937},{"class":84,"line":936},13,[938],{"type":32,"tag":82,"props":939,"children":940},{"emptyLinePlaceholder":893},[941],{"type":37,"value":896},{"type":32,"tag":82,"props":943,"children":945},{"class":84,"line":944},14,[946,950,954,958,963],{"type":32,"tag":82,"props":947,"children":948},{"style":168},[949],{"type":37,"value":171},{"type":32,"tag":82,"props":951,"children":952},{"style":168},[953],{"type":37,"value":176},{"type":32,"tag":82,"props":955,"children":956},{"style":168},[957],{"type":37,"value":186},{"type":32,"tag":82,"props":959,"children":960},{"style":189},[961],{"type":37,"value":962}," Header",{"type":32,"tag":82,"props":964,"children":965},{"style":195},[966],{"type":37,"value":967},"() {\n",{"type":32,"tag":82,"props":969,"children":971},{"class":84,"line":970},15,[972,976,980,985,989,993,998],{"type":32,"tag":82,"props":973,"children":974},{"style":168},[975],{"type":37,"value":217},{"type":32,"tag":82,"props":977,"children":978},{"style":195},[979],{"type":37,"value":222},{"type":32,"tag":82,"props":981,"children":982},{"style":225},[983],{"type":37,"value":984},"customer",{"type":32,"tag":82,"props":986,"children":987},{"style":195},[988],{"type":37,"value":233},{"type":32,"tag":82,"props":990,"children":991},{"style":168},[992],{"type":37,"value":238},{"type":32,"tag":82,"props":994,"children":995},{"style":189},[996],{"type":37,"value":997}," useLoaderData",{"type":32,"tag":82,"props":999,"children":1000},{"style":195},[1001],{"type":37,"value":1002},"();\n",{"type":32,"tag":82,"props":1004,"children":1006},{"class":84,"line":1005},16,[1007,1011,1016,1022,1027,1031],{"type":32,"tag":82,"props":1008,"children":1009},{"style":168},[1010],{"type":37,"value":300},{"type":32,"tag":82,"props":1012,"children":1013},{"style":195},[1014],{"type":37,"value":1015}," \u003C",{"type":32,"tag":82,"props":1017,"children":1019},{"style":1018},"--shiki-default:#85E89D",[1020],{"type":37,"value":1021},"div",{"type":32,"tag":82,"props":1023,"children":1024},{"style":195},[1025],{"type":37,"value":1026},">Welcome back, {customer?.firstName}\u003C\u002F",{"type":32,"tag":82,"props":1028,"children":1029},{"style":1018},[1030],{"type":37,"value":1021},{"type":32,"tag":82,"props":1032,"children":1033},{"style":195},[1034],{"type":37,"value":1035},">;\n",{"type":32,"tag":82,"props":1037,"children":1039},{"class":84,"line":1038},17,[1040],{"type":32,"tag":82,"props":1041,"children":1042},{"style":195},[1043],{"type":37,"value":386},{"type":32,"tag":33,"props":1045,"children":1046},{},[1047,1049,1055],{"type":37,"value":1048},"Liquid duplicated this logic in every template with ",{"type":32,"tag":78,"props":1050,"children":1052},{"className":1051},[],[1053],{"type":37,"value":1054},"{% if customer %}",{"type":37,"value":1056},". Component count dropped from 180 to 52 via reuse.",{"type":32,"tag":33,"props":1058,"children":1059},{},[1060],{"type":37,"value":1061},"Feature flag system: Liquid A\u002FB testing required theme duplication and traffic splitting. Hydrogen integrates LaunchDarkly—toggle features in the same build via environment variables. A\u002FB test setup fell from 2 days to 15 minutes.",{"type":32,"tag":40,"props":1063,"children":1065},{"id":1064},"headless-commerce-strategy-and-hydrogens-role",[1066],{"type":37,"value":1067},"Headless Commerce Strategy and Hydrogen's Role",{"type":32,"tag":33,"props":1069,"children":1070},{},[1071,1073,1082],{"type":37,"value":1072},"Hydrogen is Shopify's official headless framework, but it's one piece of headless architecture. In our ",{"type":32,"tag":1074,"props":1075,"children":1079},"a",{"href":1076,"rel":1077},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\u002Fheadless",[1078],"nofollow",[1080],{"type":37,"value":1081},"Headless Commerce",{"type":37,"value":1083}," approach, Hydrogen is the frontend layer, Shopify Storefront API is the data layer, and Vercel's edge network is the delivery layer. Together they form a composable stack.",{"type":32,"tag":33,"props":1085,"children":1086},{},[1087],{"type":37,"value":1088},"We chose Hydrogen for React Server Components support. RSCs move data fetching server-side; the client-side JavaScript bundle shrank from 60KB to 12KB. Critical for mobile users—on 3G, parse time dropped 75% (Lighthouse lab data).",{"type":32,"tag":33,"props":1090,"children":1091},{},[1092],{"type":37,"value":1093},"Alternatives: Next.js Commerce, Remix + custom setup, Vue Storefront. Next.js Commerce has strong Shopify integration but isn't as opinionated; we'd build cache strategy ourselves. Remix is generic—no e-commerce patterns. Hydrogen's Shopify-first approach natively supports cart, checkout, metaobjects.",{"type":32,"tag":33,"props":1095,"children":1096},{},[1097],{"type":37,"value":1098},"Trade-off: Hydrogen locks you into the Shopify ecosystem. Multi-source commerce (Shopify + custom inventory) needs Remix's flexibility. Single-source Shopify was sufficient for our use case.",{"type":32,"tag":40,"props":1100,"children":1102},{"id":1101},"two-months-later-real-performance",[1103],{"type":37,"value":1104},"Two Months Later: Real Performance",{"type":32,"tag":33,"props":1106,"children":1107},{},[1108],{"type":37,"value":1109},"Sixty days post-migration, metrics showed:",{"type":32,"tag":559,"props":1111,"children":1112},{},[1113,1123,1133,1143,1153],{"type":32,"tag":563,"props":1114,"children":1115},{},[1116,1121],{"type":32,"tag":65,"props":1117,"children":1118},{},[1119],{"type":37,"value":1120},"TTFB:",{"type":37,"value":1122}," 160ms average (150ms target, 93% hit rate)",{"type":32,"tag":563,"props":1124,"children":1125},{},[1126,1131],{"type":32,"tag":65,"props":1127,"children":1128},{},[1129],{"type":37,"value":1130},"LCP:",{"type":37,"value":1132}," 1.2s (was 2.8s on Liquid)",{"type":32,"tag":563,"props":1134,"children":1135},{},[1136,1141],{"type":32,"tag":65,"props":1137,"children":1138},{},[1139],{"type":37,"value":1140},"CLS:",{"type":37,"value":1142}," 0.02 (negligible shift—SSR advantage)",{"type":32,"tag":563,"props":1144,"children":1145},{},[1146,1151],{"type":32,"tag":65,"props":1147,"children":1148},{},[1149],{"type":37,"value":1150},"TBT:",{"type":37,"value":1152}," 90ms (was 420ms on Liquid)",{"type":32,"tag":563,"props":1154,"children":1155},{},[1156,1161],{"type":32,"tag":65,"props":1157,"children":1158},{},[1159],{"type":37,"value":1160},"Server cost:",{"type":37,"value":1162}," $47\u002Fmonth Vercel (Shopify hosting $0—included in Plus plan)",{"type":32,"tag":33,"props":1164,"children":1165},{},[1166],{"type":37,"value":1167},"Unexpected win: Edge caching handled Black Friday traffic (4x baseline) without scaling issues. Liquid throttled at 200+ concurrent requests. Hydrogen scaled automatically at the edge.",{"type":32,"tag":33,"props":1169,"children":1170},{},[1171],{"type":37,"value":1172},"Unexpected challenge: Third-party scripts. Google Tag Manager and Meta Pixel load client-side JS, reducing RSC benefits. We moved them to a web worker with Partytown—8 hours of setup.",{"type":32,"tag":33,"props":1174,"children":1175},{},[1176],{"type":37,"value":1177},"Conversion impact: +2.1% overall, +3.8% mobile. Organic traffic +8.4% (Core Web Vitals ranking boost). Paid CPC was constant, but landing page bounce fell 12%.",{"type":32,"tag":33,"props":1179,"children":1180},{},[1181],{"type":37,"value":1182},"Hydrogen isn't right for every e-commerce store. Small catalog (\u003C500 SKUs), low traffic (\u003C10K\u002Fmonth), lean dev team? Liquid suffices. Mid-to-large scale, mobile-first audience, aggressive performance targets? Hydrogen's build-time trade-off is worthwhile. In our case, TTFB gains and velocity increases paid back migration costs in 45 days. Two months later, real metrics matched the promise—Hydrogen wasn't overengineered for the problem.",{"type":32,"tag":1184,"props":1185,"children":1186},"style",{},[1187],{"type":37,"value":1188},"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":103,"depth":103,"links":1190},[1191,1192,1193,1194,1195,1196],{"id":42,"depth":94,"text":45},{"id":394,"depth":94,"text":397},{"id":549,"depth":94,"text":552},{"id":651,"depth":94,"text":654},{"id":1064,"depth":94,"text":1067},{"id":1101,"depth":94,"text":1104},"markdown","content:en:tech:shopify-hydrogen-vs-liquid-data-driven-decision.md","content","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-data-driven-decision.md","en\u002Ftech\u002Fshopify-hydrogen-vs-liquid-data-driven-decision","md",1782079496094]