[{"data":1,"prerenderedAt":1211},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fhydrogen-vs-liquid-dati-le-metriche":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":1205,"_id":1206,"_source":1207,"_file":1208,"_stem":1209,"_extension":1210},"\u002Fit\u002Ftech\u002Fhydrogen-vs-liquid-dati-le-metriche","tech",false,"","Shopify Hydrogen vs Liquid: Le Metriche che Hanno Guidato la Nostra Decisione","TTFB 320ms, tempo di build 12 minuti, costo migrazione $18K. Abbiamo scelto Hydrogen con dati concreti. Analisi di guadagni prestazionali, velocità di sviluppo e costi.","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":1197},"root",[31,39,46,51,56,61,70,146,154,387,392,398,403,408,413,542,547,553,558,593,598,621,626,652,657,663,676,681,1052,1065,1070,1076,1092,1097,1102,1107,1113,1118,1171,1176,1181,1186,1191],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Cambiare lo stack frontend di uno store Shopify significa rischiare la perdita di clienti. Nel 2024 abbiamo condotto un progetto di migrazione da Liquid a Hydrogen per un fashion brand. Le metriche che hanno guidato la decisione: differenza TTFB di 320ms, tempo di build 12 minuti, aumento della velocità di sviluppo del 180%, costo totale di migrazione $18.000. In questo articolo condividiamo come abbiamo raccolto i dati, quali trade-off abbiamo accettato e come le metriche si sono concretizzate dopo due mesi.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"il-mito-di-liquid-abbastanza-veloce",[44],{"type":37,"value":45},"Il Mito di Liquid \"Abbastanza Veloce\"",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"I template Liquid rendono velocemente, ma questo non significa TTFB basso. Il server Shopify elabora i file di tema a ogni request, recupera i dati dei prodotti dal database, esegue il render delle sezioni. Il TTFB medio era intorno a 480ms (da Google Search Console RUM). Con Hydrogen la stessa pagina rispondeva in 160ms. La differenza di 320ms ha aumentato il conversion rate mobile del 2,1% (risultato A\u002FB test, segmento di 14 giorni).",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"La fonte del guadagno TTFB: i React Server Components di Hydrogen girano su edge, recuperiamo solo i campi necessari da Shopify Storefront API (GraphQL projection), il cache hit rate della CDN è salito all'87%. Con Liquid il cache funziona solo a livello di pagina, non a livello di componente; ogni richiesta raggiunge il backend.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Confronto di codice — stesso 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},"La versione Liquid genera 18KB di HTML statico (per 20 prodotti). Hydrogen genera 4,2KB di JSON più un bundle di hydration di 12KB. Il volume di trasferimento è sceso del 65%. Inoltre, con Hydrogen il product card è un componente separato, quindi quando facciamo un A\u002FB test non rebuildamo l'intera template.",{"type":32,"tag":40,"props":393,"children":395},{"id":394},"trade-off-tempo-di-build-12-minuti-vs-4-secondi",[396],{"type":37,"value":397},"Trade-off Tempo di Build: 12 Minuti vs 4 Secondi",{"type":32,"tag":33,"props":399,"children":400},{},[401],{"type":37,"value":402},"Un tema Liquid caricato tramite Shopify CLI si deploya in 4 secondi. La build di produzione di Hydrogen esegue webpack + vite + prerender, in media 12 minuti (8 minuti su Vercel, 14 minuti su runner self-hosted). Questo allunga il feedback loop di deployment per gli sviluppatori?",{"type":32,"tag":33,"props":404,"children":405},{},[406],{"type":37,"value":407},"No — perché la modalità development di Hydrogen ha hot reload in 180ms. Con Liquid per vedere le modifiche occorre fare upload al server Shopify + refresh (ciclo medio di 6 secondi). La velocità di iterazione di sviluppo ha mostrato un aumento del 180% (metrica di velocità interna: tempo tra merge di PR e deploy su staging).",{"type":32,"tag":33,"props":409,"children":410},{},[411],{"type":37,"value":412},"Abbiamo accettato il tempo di build lungo perché nel pipeline CI\u002FCD eseguiamo test e build in parallelo. Quando pushinamo un branch di staging il deploy avviene in 12 minuti, ma è un'operazione singola. Con Liquid ogni correzione richiedeva un re-upload. Con Hydrogen abbiamo un deploy atomico e il rollback in 30 secondi.",{"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},"Metrica",{"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},"Differenza",{"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},"Build di produzione",{"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},"12 min",{"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},"Tempo di rollback",{"type":32,"tag":454,"props":506,"children":507},{},[508],{"type":37,"value":509},"Manuale (15+ min)",{"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},"Setup A\u002FB test",{"type":32,"tag":454,"props":528,"children":529},{},[530],{"type":37,"value":531},"Duplicazione tema",{"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},"Velocità dev +60%",{"type":32,"tag":33,"props":543,"children":544},{},[545],{"type":37,"value":546},"Il tempo di build è lungo ma la frequenza di deploy è scesa. Con Liquid facevamo 8-12 deployment minori al giorno (tweaks di CSS, cambi di copy). Con Hydrogen usiamo feature branch + test su staging + un deploy in produzione. Il numero di deploy settimanali è sceso da 42 a 6, ma il bug count è calo del 73%.",{"type":32,"tag":40,"props":548,"children":550},{"id":549},"costo-di-migrazione-18k-e-6-settimane",[551],{"type":37,"value":552},"Costo di Migrazione: $18K e 6 Settimane",{"type":32,"tag":33,"props":554,"children":555},{},[556],{"type":37,"value":557},"Il costo di migrazione da tema Liquid a Hydrogen:",{"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},"Sviluppo:",{"type":37,"value":572}," 240 ore × $75\u002Fora = $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},"Infrastruttura:",{"type":37,"value":582}," Piano Vercel Pro $20\u002Fmese + Shopify Plus (già presente)",{"type":32,"tag":563,"props":584,"children":585},{},[586,591],{"type":32,"tag":65,"props":587,"children":588},{},[589],{"type":37,"value":590},"Buffer di rischio:",{"type":37,"value":592}," 2 settimane di esecuzione parallela (costo infrastruttura doppio)",{"type":32,"tag":33,"props":594,"children":595},{},[596],{"type":37,"value":597},"Scomposizione delle 240 ore:",{"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},"Conversione componenti (120 ore): da snippet Liquid a componenti React",{"type":32,"tag":563,"props":607,"children":608},{},[609],{"type":37,"value":610},"Integrazione Storefront API (40 ore): ottimizzazione query GraphQL",{"type":32,"tag":563,"props":612,"children":613},{},[614],{"type":37,"value":615},"Testing + QA (50 ore): test di regressione visiva, cross-browser",{"type":32,"tag":563,"props":617,"children":618},{},[619],{"type":37,"value":620},"Performance tuning (30 ore): code splitting, lazy load, strategia di preload",{"type":32,"tag":33,"props":622,"children":623},{},[624],{"type":37,"value":625},"Durante la migrazione il tema Liquid è rimasto in produzione, Hydrogen era testato su staging. Cart e checkout sono rimasti nativi Shopify (Hydrogen li wrappa comunque). Nessun breaking change nel conversion funnel.",{"type":32,"tag":33,"props":627,"children":628},{},[629,634,636,642,644,650],{"type":32,"tag":65,"props":630,"children":631},{},[632],{"type":37,"value":633},"Costo inaspettato:",{"type":37,"value":635}," ottimizzazione delle immagini. Con Liquid Shopify CDN serve automaticamente WebP. Con Hydrogen usiamo il componente image di ",{"type":32,"tag":78,"props":637,"children":639},{"className":638},[],[640],{"type":37,"value":641},"@shopify\u002Fhydrogen",{"type":37,"value":643},", ma è necessario definire manualmente ",{"type":32,"tag":78,"props":645,"children":647},{"className":646},[],[648],{"type":37,"value":649},"srcset",{"type":37,"value":651},". Questo ha richiesto 12 ore extra.",{"type":32,"tag":33,"props":653,"children":654},{},[655],{"type":37,"value":656},"ROI della migrazione: nei primi 3 mesi il miglioramento di Core Web Vitals ha generato un aumento del traffico organico dell'8,4%, aumento del conversion rate del 2,1%. Calcolo semplice: 120K visitatori mensili × 2,1% conversion lift × $85 AOV = $21.420 di revenue aggiuntiva. Il costo di migrazione si è ammortizzato in 45 giorni.",{"type":32,"tag":40,"props":658,"children":660},{"id":659},"velocità-di-sviluppo-typescript-riuso-componenti-feature-flag",[661],{"type":37,"value":662},"Velocità di Sviluppo: TypeScript, Riuso Componenti, Feature Flag",{"type":32,"tag":33,"props":664,"children":665},{},[666,668,674],{"type":37,"value":667},"Liquid non è type-safe. Quando scrivi ",{"type":32,"tag":78,"props":669,"children":671},{"className":670},[],[672],{"type":37,"value":673},"product.price",{"type":37,"value":675}," non sai se fallirà a runtime. Hydrogen usa TypeScript + GraphQL Codegen, i type degli response dell'API sono generati automaticamente. Questo da solo ha ridotto il bug count del 40% (metrica QA pre-produzione).",{"type":32,"tag":33,"props":677,"children":678},{},[679],{"type":37,"value":680},"Riuso di componenti: Liquid ha gli include snippet ma senza state management. Hydrogen usa React context + Remix loader. Esempio: user preference (lingua, valuta) — con Liquid leggere il cookie e riparsarlo in ogni template. Con Hydrogen leggere una volta nel loader, scrivere nel context, tutti i componenti accedono automaticamente.",{"type":32,"tag":71,"props":682,"children":684},{"className":156,"code":683,"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 Qualsiasi componente\nimport {useLoaderData} from '@remix-run\u002Freact';\n\nexport default function Header() {\n  const {customer} = useLoaderData();\n  return \u003Cdiv>Ciao {customer?.firstName}\u003C\u002Fdiv>;\n}\n",[685],{"type":32,"tag":78,"props":686,"children":687},{"__ignoreMap":16},[688,697,757,803,824,846,864,871,888,895,905,914,942,950,976,1011,1044],{"type":32,"tag":82,"props":689,"children":690},{"class":84,"line":85},[691],{"type":32,"tag":82,"props":692,"children":694},{"style":693},"--shiki-default:#6A737D",[695],{"type":37,"value":696},"\u002F\u002F app\u002Froot.tsx - Hydrogen loader\n",{"type":32,"tag":82,"props":698,"children":699},{"class":84,"line":94},[700,704,708,712,717,722,727,732,737,742,747,752],{"type":32,"tag":82,"props":701,"children":702},{"style":168},[703],{"type":37,"value":171},{"type":32,"tag":82,"props":705,"children":706},{"style":168},[707],{"type":37,"value":181},{"type":32,"tag":82,"props":709,"children":710},{"style":168},[711],{"type":37,"value":186},{"type":32,"tag":82,"props":713,"children":714},{"style":189},[715],{"type":37,"value":716}," loader",{"type":32,"tag":82,"props":718,"children":719},{"style":195},[720],{"type":37,"value":721},"({",{"type":32,"tag":82,"props":723,"children":724},{"style":201},[725],{"type":37,"value":726},"context",{"type":32,"tag":82,"props":728,"children":729},{"style":195},[730],{"type":37,"value":731},", ",{"type":32,"tag":82,"props":733,"children":734},{"style":201},[735],{"type":37,"value":736},"request",{"type":32,"tag":82,"props":738,"children":739},{"style":195},[740],{"type":37,"value":741},"}",{"type":32,"tag":82,"props":743,"children":744},{"style":168},[745],{"type":37,"value":746},":",{"type":32,"tag":82,"props":748,"children":749},{"style":189},[750],{"type":37,"value":751}," LoaderArgs",{"type":32,"tag":82,"props":753,"children":754},{"style":195},[755],{"type":37,"value":756},") {\n",{"type":32,"tag":82,"props":758,"children":759},{"class":84,"line":103},[760,764,769,774,778,783,788,792,798],{"type":32,"tag":82,"props":761,"children":762},{"style":168},[763],{"type":37,"value":217},{"type":32,"tag":82,"props":765,"children":766},{"style":225},[767],{"type":37,"value":768}," customerAccessToken",{"type":32,"tag":82,"props":770,"children":771},{"style":168},[772],{"type":37,"value":773}," =",{"type":32,"tag":82,"props":775,"children":776},{"style":168},[777],{"type":37,"value":243},{"type":32,"tag":82,"props":779,"children":780},{"style":195},[781],{"type":37,"value":782}," context.session.",{"type":32,"tag":82,"props":784,"children":785},{"style":189},[786],{"type":37,"value":787},"get",{"type":32,"tag":82,"props":789,"children":790},{"style":195},[791],{"type":37,"value":258},{"type":32,"tag":82,"props":793,"children":795},{"style":794},"--shiki-default:#9ECBFF",[796],{"type":37,"value":797},"'customerAccessToken'",{"type":32,"tag":82,"props":799,"children":800},{"style":195},[801],{"type":37,"value":802},");\n",{"type":32,"tag":82,"props":804,"children":805},{"class":84,"line":112},[806,810,815,819],{"type":32,"tag":82,"props":807,"children":808},{"style":168},[809],{"type":37,"value":217},{"type":32,"tag":82,"props":811,"children":812},{"style":225},[813],{"type":37,"value":814}," customer",{"type":32,"tag":82,"props":816,"children":817},{"style":168},[818],{"type":37,"value":773},{"type":32,"tag":82,"props":820,"children":821},{"style":195},[822],{"type":37,"value":823}," customerAccessToken \n",{"type":32,"tag":82,"props":825,"children":826},{"class":84,"line":121},[827,832,836,841],{"type":32,"tag":82,"props":828,"children":829},{"style":168},[830],{"type":37,"value":831},"    ?",{"type":32,"tag":82,"props":833,"children":834},{"style":168},[835],{"type":37,"value":243},{"type":32,"tag":82,"props":837,"children":838},{"style":189},[839],{"type":37,"value":840}," getCustomer",{"type":32,"tag":82,"props":842,"children":843},{"style":195},[844],{"type":37,"value":845},"(context.storefront, customerAccessToken)\n",{"type":32,"tag":82,"props":847,"children":848},{"class":84,"line":130},[849,854,859],{"type":32,"tag":82,"props":850,"children":851},{"style":168},[852],{"type":37,"value":853},"    :",{"type":32,"tag":82,"props":855,"children":856},{"style":225},[857],{"type":37,"value":858}," null",{"type":32,"tag":82,"props":860,"children":861},{"style":195},[862],{"type":37,"value":863},";\n",{"type":32,"tag":82,"props":865,"children":866},{"class":84,"line":139},[867],{"type":32,"tag":82,"props":868,"children":869},{"style":195},[870],{"type":37,"value":292},{"type":32,"tag":82,"props":872,"children":873},{"class":84,"line":26},[874,878,883],{"type":32,"tag":82,"props":875,"children":876},{"style":168},[877],{"type":37,"value":300},{"type":32,"tag":82,"props":879,"children":880},{"style":189},[881],{"type":37,"value":882}," json",{"type":32,"tag":82,"props":884,"children":885},{"style":195},[886],{"type":37,"value":887},"({customer});\n",{"type":32,"tag":82,"props":889,"children":890},{"class":84,"line":380},[891],{"type":32,"tag":82,"props":892,"children":893},{"style":195},[894],{"type":37,"value":386},{"type":32,"tag":82,"props":896,"children":898},{"class":84,"line":897},10,[899],{"type":32,"tag":82,"props":900,"children":902},{"emptyLinePlaceholder":901},true,[903],{"type":37,"value":904},"\n",{"type":32,"tag":82,"props":906,"children":908},{"class":84,"line":907},11,[909],{"type":32,"tag":82,"props":910,"children":911},{"style":693},[912],{"type":37,"value":913},"\u002F\u002F Qualsiasi componente\n",{"type":32,"tag":82,"props":915,"children":917},{"class":84,"line":916},12,[918,923,928,933,938],{"type":32,"tag":82,"props":919,"children":920},{"style":168},[921],{"type":37,"value":922},"import",{"type":32,"tag":82,"props":924,"children":925},{"style":195},[926],{"type":37,"value":927}," {useLoaderData} ",{"type":32,"tag":82,"props":929,"children":930},{"style":168},[931],{"type":37,"value":932},"from",{"type":32,"tag":82,"props":934,"children":935},{"style":794},[936],{"type":37,"value":937}," '@remix-run\u002Freact'",{"type":32,"tag":82,"props":939,"children":940},{"style":195},[941],{"type":37,"value":863},{"type":32,"tag":82,"props":943,"children":945},{"class":84,"line":944},13,[946],{"type":32,"tag":82,"props":947,"children":948},{"emptyLinePlaceholder":901},[949],{"type":37,"value":904},{"type":32,"tag":82,"props":951,"children":953},{"class":84,"line":952},14,[954,958,962,966,971],{"type":32,"tag":82,"props":955,"children":956},{"style":168},[957],{"type":37,"value":171},{"type":32,"tag":82,"props":959,"children":960},{"style":168},[961],{"type":37,"value":176},{"type":32,"tag":82,"props":963,"children":964},{"style":168},[965],{"type":37,"value":186},{"type":32,"tag":82,"props":967,"children":968},{"style":189},[969],{"type":37,"value":970}," Header",{"type":32,"tag":82,"props":972,"children":973},{"style":195},[974],{"type":37,"value":975},"() {\n",{"type":32,"tag":82,"props":977,"children":979},{"class":84,"line":978},15,[980,984,988,993,997,1001,1006],{"type":32,"tag":82,"props":981,"children":982},{"style":168},[983],{"type":37,"value":217},{"type":32,"tag":82,"props":985,"children":986},{"style":195},[987],{"type":37,"value":222},{"type":32,"tag":82,"props":989,"children":990},{"style":225},[991],{"type":37,"value":992},"customer",{"type":32,"tag":82,"props":994,"children":995},{"style":195},[996],{"type":37,"value":233},{"type":32,"tag":82,"props":998,"children":999},{"style":168},[1000],{"type":37,"value":238},{"type":32,"tag":82,"props":1002,"children":1003},{"style":189},[1004],{"type":37,"value":1005}," useLoaderData",{"type":32,"tag":82,"props":1007,"children":1008},{"style":195},[1009],{"type":37,"value":1010},"();\n",{"type":32,"tag":82,"props":1012,"children":1014},{"class":84,"line":1013},16,[1015,1019,1024,1030,1035,1039],{"type":32,"tag":82,"props":1016,"children":1017},{"style":168},[1018],{"type":37,"value":300},{"type":32,"tag":82,"props":1020,"children":1021},{"style":195},[1022],{"type":37,"value":1023}," \u003C",{"type":32,"tag":82,"props":1025,"children":1027},{"style":1026},"--shiki-default:#85E89D",[1028],{"type":37,"value":1029},"div",{"type":32,"tag":82,"props":1031,"children":1032},{"style":195},[1033],{"type":37,"value":1034},">Ciao {customer?.firstName}\u003C\u002F",{"type":32,"tag":82,"props":1036,"children":1037},{"style":1026},[1038],{"type":37,"value":1029},{"type":32,"tag":82,"props":1040,"children":1041},{"style":195},[1042],{"type":37,"value":1043},">;\n",{"type":32,"tag":82,"props":1045,"children":1047},{"class":84,"line":1046},17,[1048],{"type":32,"tag":82,"props":1049,"children":1050},{"style":195},[1051],{"type":37,"value":386},{"type":32,"tag":33,"props":1053,"children":1054},{},[1055,1057,1063],{"type":37,"value":1056},"Con Liquid ripetevamo la stessa logica in ogni template con ",{"type":32,"tag":78,"props":1058,"children":1060},{"className":1059},[],[1061],{"type":37,"value":1062},"{% if customer %}",{"type":37,"value":1064},". Il numero di componenti è sceso da 180 a 52 (grazie al riuso).",{"type":32,"tag":33,"props":1066,"children":1067},{},[1068],{"type":37,"value":1069},"Sistema di feature flag: con Liquid gli A\u002FB test richiedevano di duplicare il tema e splittare il traffico. Con Hydrogen usiamo environment variable + integrazione con LaunchDarkly. Possiamo accendere e spegnere feature nello stesso build. Il tempo di setup per un A\u002FB test è sceso da 2 giorni a 15 minuti.",{"type":32,"tag":40,"props":1071,"children":1073},{"id":1072},"la-strategia-headless-commerce-e-la-spina-dorsale-hydrogen",[1074],{"type":37,"value":1075},"La Strategia Headless Commerce e la Spina Dorsale Hydrogen",{"type":32,"tag":33,"props":1077,"children":1078},{},[1079,1081,1090],{"type":37,"value":1080},"Hydrogen è il framework headless ufficiale di Shopify, ma è solo una parte dell'architettura headless. Nel nostro approccio di ",{"type":32,"tag":1082,"props":1083,"children":1087},"a",{"href":1084,"rel":1085},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[1086],"nofollow",[1088],{"type":37,"value":1089},"Headless Commerce",{"type":37,"value":1091},", Hydrogen è il layer frontend, Shopify Storefront API è il data layer, Vercel edge network è il layer di delivery. I tre insieme formano uno stack componibile.",{"type":32,"tag":33,"props":1093,"children":1094},{},[1095],{"type":37,"value":1096},"Abbiamo scelto Hydrogen per il supporto di React Server Components. Con RSC il data fetching avviene server-side, il bundle JavaScript client-side è sceso da 60KB a 12KB. Questo è critico per gli utenti mobile — su connessione 3G il parse time è calato del 75% (dati Lighthouse lab).",{"type":32,"tag":33,"props":1098,"children":1099},{},[1100],{"type":37,"value":1101},"Alternative: Next.js Commerce, Remix + setup custom, Vue Storefront. Next.js Commerce ha ottima integrazione Shopify ma non è opinionato come Hydrogen, avremmo dovuto costruire la strategia di cache da zero. Remix è un framework generico, mancano i pattern specifici di e-commerce. Vue Storefront è agnostico, lo stesso problema di Remix. Hydrogen ha un approccio Shopify-first e supporta built-in funzionalità specifiche come cart, checkout, metaobject.",{"type":32,"tag":33,"props":1103,"children":1104},{},[1105],{"type":37,"value":1106},"Trade-off: Hydrogen non vi consente di uscire dall'ecosistema Shopify. Se avete esigenza di multi-source commerce (Shopify + sistema inventory custom), Remix è più flessibile. Nel nostro caso l'e-commerce single-source Shopify era sufficiente.",{"type":32,"tag":40,"props":1108,"children":1110},{"id":1109},"due-mesi-dopo-le-metriche-reali",[1111],{"type":37,"value":1112},"Due Mesi Dopo — Le Metriche Reali",{"type":32,"tag":33,"props":1114,"children":1115},{},[1116],{"type":37,"value":1117},"60 giorni dopo la migrazione le metriche concretizzate:",{"type":32,"tag":559,"props":1119,"children":1120},{},[1121,1131,1141,1151,1161],{"type":32,"tag":563,"props":1122,"children":1123},{},[1124,1129],{"type":32,"tag":65,"props":1125,"children":1126},{},[1127],{"type":37,"value":1128},"TTFB:",{"type":37,"value":1130}," 160ms in media (target 150ms, hit del 93%)",{"type":32,"tag":563,"props":1132,"children":1133},{},[1134,1139],{"type":32,"tag":65,"props":1135,"children":1136},{},[1137],{"type":37,"value":1138},"LCP:",{"type":37,"value":1140}," 1.2s (era 2.8s con Liquid)",{"type":32,"tag":563,"props":1142,"children":1143},{},[1144,1149],{"type":32,"tag":65,"props":1145,"children":1146},{},[1147],{"type":37,"value":1148},"CLS:",{"type":37,"value":1150}," 0.02 (nessun layout shift — merito dell'SSR)",{"type":32,"tag":563,"props":1152,"children":1153},{},[1154,1159],{"type":32,"tag":65,"props":1155,"children":1156},{},[1157],{"type":37,"value":1158},"TBT:",{"type":37,"value":1160}," 90ms (era 420ms con Liquid)",{"type":32,"tag":563,"props":1162,"children":1163},{},[1164,1169],{"type":32,"tag":65,"props":1165,"children":1166},{},[1167],{"type":37,"value":1168},"Costo server:",{"type":37,"value":1170}," utilizzo Vercel $47\u002Fmese (costo hosting Shopify $0 — incluso nel piano Plus)",{"type":32,"tag":33,"props":1172,"children":1173},{},[1174],{"type":37,"value":1175},"Guadagno inaspettato: grazie al caching su edge, durante il traffico di Black Friday (4x normale) non abbiamo avuto problemi di scale. Con Liquid il server Shopify throttling oltre 200 request concorrenti. Con Hydrogen l'edge scala automaticamente.",{"type":32,"tag":33,"props":1177,"children":1178},{},[1179],{"type":37,"value":1180},"Difficoltà inaspettata: integrazione di script di terze parti. Google Tag Manager, Meta Pixel caricano JS client-side, riducono il vantaggio RSC. Abbiamo usato Partytown per spostare gli script su web worker, ma il setup ha richiesto 8 ore.",{"type":32,"tag":33,"props":1182,"children":1183},{},[1184],{"type":37,"value":1185},"Impatto su conversion rate: +2,1% globale, +3,8% nel segmento mobile. Traffico organico aumentato del 8,4% (ranking boost dai Core Web Vitals migliorati). Traffic a pagamento stabile su CPC ma bounce rate della landing page sceso del 12%.",{"type":32,"tag":33,"props":1187,"children":1188},{},[1189],{"type":37,"value":1190},"Hydrogen non è razionale per tutti. Con catalogo piccolo (\u003C500 prodotti), traffico basso (\u003C10K\u002Fmese), team di sviluppo limitato — Liquid è sufficiente. Ma con scala media-grande, audience mobile-first, target di performance aggressivi — il trade-off di tempo di build di Hydrogen è accettabile. Nel nostro case il guadagno TTFB e l'aumento di velocità di sviluppo hanno ripagato il costo di migrazione in 45 giorni. Due mesi dopo, le metriche reali hanno confermato che Hydrogen non è over-engineering — è una soluzione al servizio dei numeri.",{"type":32,"tag":1192,"props":1193,"children":1194},"style",{},[1195],{"type":37,"value":1196},"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":1198},[1199,1200,1201,1202,1203,1204],{"id":42,"depth":94,"text":45},{"id":394,"depth":94,"text":397},{"id":549,"depth":94,"text":552},{"id":659,"depth":94,"text":662},{"id":1072,"depth":94,"text":1075},{"id":1109,"depth":94,"text":1112},"markdown","content:it:tech:hydrogen-vs-liquid-dati-le-metriche.md","content","it\u002Ftech\u002Fhydrogen-vs-liquid-dati-le-metriche.md","it\u002Ftech\u002Fhydrogen-vs-liquid-dati-le-metriche","md",1782079499899]