[{"data":1,"prerenderedAt":1086},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione":13},{"i18nKey":4,"paths":5},"tech-002-2026-05",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\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-decision-numbers","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-resheniya-po-cifram","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":10,"_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":1080,"_id":1081,"_source":1082,"_file":1083,"_stem":1084,"_extension":1085},"tech",false,"","Shopify Hydrogen vs Liquid: I Numeri Dietro la Nostra Scelta","TTFB 840ms → 180ms, tempo build 12min → 90sec. I dati concreti della migrazione a Hydrogen, i trade-off e il calcolo del costo di migrazione.","2026-05-09",[21,22,23,24,25],"shopify-hydrogen","headless-commerce","web-performance","remix","ttfb",8,"Roibase",{"type":29,"children":30,"toc":1070},"root",[31,39,46,51,56,61,182,187,193,198,203,208,215,220,246,251,270,275,298,304,309,463,468,473,478,483,748,761,767,772,780,813,821,839,847,865,884,889,924,935,940,946,951,959,982,990,1024,1029,1034,1040,1045,1050,1064],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Abbiamo utilizzato i temi Liquid di Shopify per 7 anni. Quando i limiti della personalizzazione dei temi, i tempi di risposta del server fissi e i cicli di deploy monolitici hanno iniziato a vincolarci, l'espressione \"headless\" è arrivata al tavolo. Ma la domanda che ha bloccato la decisione era: come misuriamo il ROI della migrazione a Hydrogen? Questo articolo contiene i dettagli numerici della risposta che abbiamo trovato — TTFB, tempo di build, developer velocity, costo di migrazione. Abbiamo scelto Hydrogen perché non è solo un framework: è un guadagno di performance misurabile.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"il-limite-di-performance-di-liquid",[44],{"type":37,"value":45},"Il Limite di Performance di Liquid",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Il motore dei temi Liquid di Shopify restituisce HTML renderizzato lato server. La sintassi Liquid viene parsificata sul server, le chiamate all'API Storefront vengono eseguite, l'HTML viene assemblato e inviato al client. Questa architettura è semplice e stabile — ma ha un limite.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Nel nostro store di produzione, la mediana del TTFB era 840ms (dati RUM da Cloudflare Analytics). Il percentile 95 raggiungeva 1,4 secondi. Non possiamo controllare il tempo di risposta del server di Shopify — è infrastruttura condivisa. Anche se ottimizzassimo i file del tema Liquid (lazy load delle sezioni inutilizzate, riduzione del numero di snippet), la latenza lato server rimaneva fissa.",{"type":32,"tag":33,"props":57,"children":58},{},[59],{"type":37,"value":60},"Il tempo di build era un problema separato. Quando modificavi un file del tema, lo pushavi tramite Shopify CLI. Il tempo medio di deploy era 12 minuti. Nella pipeline CI\u002FCD, questo significava attendere tra stage e production. La velocità di iterazione dei test A\u002FB era bassa. La developer velocity era limitata.",{"type":32,"tag":62,"props":63,"children":67},"pre",{"className":64,"code":65,"language":66,"meta":16,"style":16},"language-bash shiki shiki-themes github-dark","# Deploy del tema Liquid (media)\nshopify theme push --store=production\n⏱ Upload: 4m 20s\n⏱ Processing: 7m 40s\n✅ Total: 12m 00s\n","bash",[68],{"type":32,"tag":69,"props":70,"children":71},"code",{"__ignoreMap":16},[72,84,111,135,158],{"type":32,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78],{"type":32,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#6A737D",[82],{"type":37,"value":83},"# Deploy del tema Liquid (media)\n",{"type":32,"tag":73,"props":85,"children":87},{"class":75,"line":86},2,[88,94,100,105],{"type":32,"tag":73,"props":89,"children":91},{"style":90},"--shiki-default:#B392F0",[92],{"type":37,"value":93},"shopify",{"type":32,"tag":73,"props":95,"children":97},{"style":96},"--shiki-default:#9ECBFF",[98],{"type":37,"value":99}," theme",{"type":32,"tag":73,"props":101,"children":102},{"style":96},[103],{"type":37,"value":104}," push",{"type":32,"tag":73,"props":106,"children":108},{"style":107},"--shiki-default:#79B8FF",[109],{"type":37,"value":110}," --store=production\n",{"type":32,"tag":73,"props":112,"children":114},{"class":75,"line":113},3,[115,120,125,130],{"type":32,"tag":73,"props":116,"children":117},{"style":90},[118],{"type":37,"value":119},"⏱",{"type":32,"tag":73,"props":121,"children":122},{"style":96},[123],{"type":37,"value":124}," Upload:",{"type":32,"tag":73,"props":126,"children":127},{"style":96},[128],{"type":37,"value":129}," 4m",{"type":32,"tag":73,"props":131,"children":132},{"style":96},[133],{"type":37,"value":134}," 20s\n",{"type":32,"tag":73,"props":136,"children":138},{"class":75,"line":137},4,[139,143,148,153],{"type":32,"tag":73,"props":140,"children":141},{"style":90},[142],{"type":37,"value":119},{"type":32,"tag":73,"props":144,"children":145},{"style":96},[146],{"type":37,"value":147}," Processing:",{"type":32,"tag":73,"props":149,"children":150},{"style":96},[151],{"type":37,"value":152}," 7m",{"type":32,"tag":73,"props":154,"children":155},{"style":96},[156],{"type":37,"value":157}," 40s\n",{"type":32,"tag":73,"props":159,"children":161},{"class":75,"line":160},5,[162,167,172,177],{"type":32,"tag":73,"props":163,"children":164},{"style":90},[165],{"type":37,"value":166},"✅",{"type":32,"tag":73,"props":168,"children":169},{"style":96},[170],{"type":37,"value":171}," Total:",{"type":32,"tag":73,"props":173,"children":174},{"style":96},[175],{"type":37,"value":176}," 12m",{"type":32,"tag":73,"props":178,"children":179},{"style":96},[180],{"type":37,"value":181}," 00s\n",{"type":32,"tag":33,"props":183,"children":184},{},[185],{"type":37,"value":186},"Il trade-off di Liquid è questo: configurazione semplice, zero gestione dell'infrastruttura — ma nessun controllo sulla performance, iterazione lenta.",{"type":32,"tag":40,"props":188,"children":190},{"id":189},"la-promessa-tecnica-di-hydrogen",[191],{"type":37,"value":192},"La Promessa Tecnica di Hydrogen",{"type":32,"tag":33,"props":194,"children":195},{},[196],{"type":37,"value":197},"Hydrogen è il framework headless di Shopify basato su Remix. React Server Components, SSR in streaming, deploy su edge. La differenza architettonica è questa: in Liquid, il server di Shopify renderizza l'HTML. In Hydrogen, tu deploy il tuo server edge (Oxygen, Cloudflare, Vercel). Chiami l'API Storefront direttamente e trasmetti in streaming la risposta nell'albero dei componenti.",{"type":32,"tag":33,"props":199,"children":200},{},[201],{"type":37,"value":202},"La promessa sul TTFB: poiché renderizzi da un nodo edge, la latenza del server Shopify scompare. Se fai il deploy su Cloudflare Workers, la mediana del TTFB scende tra 100-200ms (latenza del POP di Cloudflare + RTT di Storefront API). La promessa sul tempo di build: con Vite, deploy incrementale, sotto 2 minuti.",{"type":32,"tag":33,"props":204,"children":205},{},[206],{"type":37,"value":207},"Ma accanto alle promesse c'è il costo: sforzo di migrazione, curva di apprendimento degli sviluppatori, gestione dell'infrastruttura. Abbiamo proseguito modellando questi trade-off numericamente.",{"type":32,"tag":209,"props":210,"children":212},"h3",{"id":211},"metodologia-del-benchmark",[213],{"type":37,"value":214},"Metodologia del Benchmark",{"type":32,"tag":33,"props":216,"children":217},{},[218],{"type":37,"value":219},"Abbiamo configurato due ambienti:",{"type":32,"tag":221,"props":222,"children":223},"ol",{},[224,236],{"type":32,"tag":225,"props":226,"children":227},"li",{},[228,234],{"type":32,"tag":229,"props":230,"children":231},"strong",{},[232],{"type":37,"value":233},"Baseline Liquid:",{"type":37,"value":235}," Store di produzione, tema basato su Dawn, 80+ sezioni, proxy Cloudflare (bypass della cache)",{"type":32,"tag":225,"props":237,"children":238},{},[239,244],{"type":32,"tag":229,"props":240,"children":241},{},[242],{"type":37,"value":243},"Prototipo Hydrogen:",{"type":37,"value":245}," Stesso albero di componenti della homepage, deploy su Cloudflare Workers, API Storefront versione 2024-01",{"type":32,"tag":33,"props":247,"children":248},{},[249],{"type":37,"value":250},"Setup del test:",{"type":32,"tag":252,"props":253,"children":254},"ul",{},[255,260,265],{"type":32,"tag":225,"props":256,"children":257},{},[258],{"type":37,"value":259},"WebPageTest (località Dulles, Moto G4, 3G Fast)",{"type":32,"tag":225,"props":261,"children":262},{},[263],{"type":37,"value":264},"Valori mediani di 3 esecuzioni",{"type":32,"tag":225,"props":266,"children":267},{},[268],{"type":37,"value":269},"Stato di cache fredda (flush della cache prima di ogni test)",{"type":32,"tag":33,"props":271,"children":272},{},[273],{"type":37,"value":274},"Metriche:",{"type":32,"tag":252,"props":276,"children":277},{},[278,283,288,293],{"type":32,"tag":225,"props":279,"children":280},{},[281],{"type":37,"value":282},"TTFB (Time to First Byte)",{"type":32,"tag":225,"props":284,"children":285},{},[286],{"type":37,"value":287},"LCP (Largest Contentful Paint)",{"type":32,"tag":225,"props":289,"children":290},{},[291],{"type":37,"value":292},"TBT (Total Blocking Time)",{"type":32,"tag":225,"props":294,"children":295},{},[296],{"type":37,"value":297},"Tempo di build (misurato all'interno della CI\u002FCD)",{"type":32,"tag":40,"props":299,"children":301},{"id":300},"confronto-delle-performance",[302],{"type":37,"value":303},"Confronto delle Performance",{"type":32,"tag":33,"props":305,"children":306},{},[307],{"type":37,"value":308},"I risultati (mediana su 3 esecuzioni):",{"type":32,"tag":310,"props":311,"children":312},"table",{},[313,342],{"type":32,"tag":314,"props":315,"children":316},"thead",{},[317],{"type":32,"tag":318,"props":319,"children":320},"tr",{},[321,327,332,337],{"type":32,"tag":322,"props":323,"children":324},"th",{},[325],{"type":37,"value":326},"Metrica",{"type":32,"tag":322,"props":328,"children":329},{},[330],{"type":37,"value":331},"Liquid",{"type":32,"tag":322,"props":333,"children":334},{},[335],{"type":37,"value":336},"Hydrogen",{"type":32,"tag":322,"props":338,"children":339},{},[340],{"type":37,"value":341},"Differenza",{"type":32,"tag":343,"props":344,"children":345},"tbody",{},[346,376,405,434],{"type":32,"tag":318,"props":347,"children":348},{},[349,358,363,368],{"type":32,"tag":350,"props":351,"children":352},"td",{},[353],{"type":32,"tag":229,"props":354,"children":355},{},[356],{"type":37,"value":357},"TTFB",{"type":32,"tag":350,"props":359,"children":360},{},[361],{"type":37,"value":362},"840ms",{"type":32,"tag":350,"props":364,"children":365},{},[366],{"type":37,"value":367},"180ms",{"type":32,"tag":350,"props":369,"children":370},{},[371],{"type":32,"tag":229,"props":372,"children":373},{},[374],{"type":37,"value":375},"-79%",{"type":32,"tag":318,"props":377,"children":378},{},[379,387,392,397],{"type":32,"tag":350,"props":380,"children":381},{},[382],{"type":32,"tag":229,"props":383,"children":384},{},[385],{"type":37,"value":386},"LCP",{"type":32,"tag":350,"props":388,"children":389},{},[390],{"type":37,"value":391},"2.4s",{"type":32,"tag":350,"props":393,"children":394},{},[395],{"type":37,"value":396},"1.1s",{"type":32,"tag":350,"props":398,"children":399},{},[400],{"type":32,"tag":229,"props":401,"children":402},{},[403],{"type":37,"value":404},"-54%",{"type":32,"tag":318,"props":406,"children":407},{},[408,416,421,426],{"type":32,"tag":350,"props":409,"children":410},{},[411],{"type":32,"tag":229,"props":412,"children":413},{},[414],{"type":37,"value":415},"TBT",{"type":32,"tag":350,"props":417,"children":418},{},[419],{"type":37,"value":420},"680ms",{"type":32,"tag":350,"props":422,"children":423},{},[424],{"type":37,"value":425},"220ms",{"type":32,"tag":350,"props":427,"children":428},{},[429],{"type":32,"tag":229,"props":430,"children":431},{},[432],{"type":37,"value":433},"-68%",{"type":32,"tag":318,"props":435,"children":436},{},[437,445,450,455],{"type":32,"tag":350,"props":438,"children":439},{},[440],{"type":32,"tag":229,"props":441,"children":442},{},[443],{"type":37,"value":444},"Tempo Build",{"type":32,"tag":350,"props":446,"children":447},{},[448],{"type":37,"value":449},"12m 00s",{"type":32,"tag":350,"props":451,"children":452},{},[453],{"type":37,"value":454},"1m 30s",{"type":32,"tag":350,"props":456,"children":457},{},[458],{"type":32,"tag":229,"props":459,"children":460},{},[461],{"type":37,"value":462},"-88%",{"type":32,"tag":33,"props":464,"children":465},{},[466],{"type":37,"value":467},"La riduzione del TTFB ha rispettato le nostre aspettative. In Hydrogen, il nodo edge di Cloudflare Workers raggiunge l'API Storefront con un RTT di 40-60ms (la CDN di Shopify è già su Cloudflare). In Liquid, il server Shopify esegue il parsing di Liquid, chiama l'API, assembla l'HTML — minimo 600ms di overhead.",{"type":32,"tag":33,"props":469,"children":470},{},[471],{"type":37,"value":472},"Il guadagno di LCP viene dall'SSR in streaming. Hydrogen invia il primo byte presto e trasmette l'HTML in streaming. Il contenuto critico (hero image, griglia di prodotti ATF) viene renderizzato prima, il contenuto below-the-fold con lazy load. In Liquid, l'HTML blocca il rendering — la pagina intera deve essere pronta prima dell'invio.",{"type":32,"tag":33,"props":474,"children":475},{},[476],{"type":37,"value":477},"La riduzione del TBT viene dall'ottimizzazione della dimensione del bundle e dell'hydration. In Hydrogen, abbiamo utilizzato React Server Components — il bundle JavaScript lato client è 120KB (gzip). Nel tema Liquid, jQuery + script personalizzati erano 340KB. Il tempo di hydration è diminuito.",{"type":32,"tag":33,"props":479,"children":480},{},[481],{"type":37,"value":482},"La differenza nel tempo di build ha un impatto diretto sulla developer velocity. 12 minuti invece di 90 secondi — se fai 10 deploy al giorno, risparmi 115 minuti. La pipeline CI\u002FCD accelera, il ciclo di iterazione dei test A\u002FB si accorcia.",{"type":32,"tag":62,"props":484,"children":488},{"className":485,"code":486,"language":487,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Esempio di SSR in streaming di Hydrogen (Remix loader)\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  \n  const productsPromise = storefront.query(PRODUCTS_QUERY);\n  const collectionsPromise = storefront.query(COLLECTIONS_QUERY);\n  \n  \u002F\u002F Streaming: la risposta iniziale torna subito\n  return defer({\n    products: productsPromise,\n    collections: collectionsPromise,\n  });\n}\n","typescript",[489],{"type":32,"tag":69,"props":490,"children":491},{"__ignoreMap":16},[492,500,556,589,597,639,677,685,693,712,721,730,739],{"type":32,"tag":73,"props":493,"children":494},{"class":75,"line":76},[495],{"type":32,"tag":73,"props":496,"children":497},{"style":80},[498],{"type":37,"value":499},"\u002F\u002F Esempio di SSR in streaming di Hydrogen (Remix loader)\n",{"type":32,"tag":73,"props":501,"children":502},{"class":75,"line":86},[503,509,514,519,524,530,536,541,546,551],{"type":32,"tag":73,"props":504,"children":506},{"style":505},"--shiki-default:#F97583",[507],{"type":37,"value":508},"export",{"type":32,"tag":73,"props":510,"children":511},{"style":505},[512],{"type":37,"value":513}," async",{"type":32,"tag":73,"props":515,"children":516},{"style":505},[517],{"type":37,"value":518}," function",{"type":32,"tag":73,"props":520,"children":521},{"style":90},[522],{"type":37,"value":523}," loader",{"type":32,"tag":73,"props":525,"children":527},{"style":526},"--shiki-default:#E1E4E8",[528],{"type":37,"value":529},"({ ",{"type":32,"tag":73,"props":531,"children":533},{"style":532},"--shiki-default:#FFAB70",[534],{"type":37,"value":535},"context",{"type":32,"tag":73,"props":537,"children":538},{"style":526},[539],{"type":37,"value":540}," }",{"type":32,"tag":73,"props":542,"children":543},{"style":505},[544],{"type":37,"value":545},":",{"type":32,"tag":73,"props":547,"children":548},{"style":90},[549],{"type":37,"value":550}," LoaderFunctionArgs",{"type":32,"tag":73,"props":552,"children":553},{"style":526},[554],{"type":37,"value":555},") {\n",{"type":32,"tag":73,"props":557,"children":558},{"class":75,"line":113},[559,564,569,574,579,584],{"type":32,"tag":73,"props":560,"children":561},{"style":505},[562],{"type":37,"value":563},"  const",{"type":32,"tag":73,"props":565,"children":566},{"style":526},[567],{"type":37,"value":568}," { ",{"type":32,"tag":73,"props":570,"children":571},{"style":107},[572],{"type":37,"value":573},"storefront",{"type":32,"tag":73,"props":575,"children":576},{"style":526},[577],{"type":37,"value":578}," } ",{"type":32,"tag":73,"props":580,"children":581},{"style":505},[582],{"type":37,"value":583},"=",{"type":32,"tag":73,"props":585,"children":586},{"style":526},[587],{"type":37,"value":588}," context;\n",{"type":32,"tag":73,"props":590,"children":591},{"class":75,"line":137},[592],{"type":32,"tag":73,"props":593,"children":594},{"style":526},[595],{"type":37,"value":596},"  \n",{"type":32,"tag":73,"props":598,"children":599},{"class":75,"line":160},[600,604,609,614,619,624,629,634],{"type":32,"tag":73,"props":601,"children":602},{"style":505},[603],{"type":37,"value":563},{"type":32,"tag":73,"props":605,"children":606},{"style":107},[607],{"type":37,"value":608}," productsPromise",{"type":32,"tag":73,"props":610,"children":611},{"style":505},[612],{"type":37,"value":613}," =",{"type":32,"tag":73,"props":615,"children":616},{"style":526},[617],{"type":37,"value":618}," storefront.",{"type":32,"tag":73,"props":620,"children":621},{"style":90},[622],{"type":37,"value":623},"query",{"type":32,"tag":73,"props":625,"children":626},{"style":526},[627],{"type":37,"value":628},"(",{"type":32,"tag":73,"props":630,"children":631},{"style":107},[632],{"type":37,"value":633},"PRODUCTS_QUERY",{"type":32,"tag":73,"props":635,"children":636},{"style":526},[637],{"type":37,"value":638},");\n",{"type":32,"tag":73,"props":640,"children":642},{"class":75,"line":641},6,[643,647,652,656,660,664,668,673],{"type":32,"tag":73,"props":644,"children":645},{"style":505},[646],{"type":37,"value":563},{"type":32,"tag":73,"props":648,"children":649},{"style":107},[650],{"type":37,"value":651}," collectionsPromise",{"type":32,"tag":73,"props":653,"children":654},{"style":505},[655],{"type":37,"value":613},{"type":32,"tag":73,"props":657,"children":658},{"style":526},[659],{"type":37,"value":618},{"type":32,"tag":73,"props":661,"children":662},{"style":90},[663],{"type":37,"value":623},{"type":32,"tag":73,"props":665,"children":666},{"style":526},[667],{"type":37,"value":628},{"type":32,"tag":73,"props":669,"children":670},{"style":107},[671],{"type":37,"value":672},"COLLECTIONS_QUERY",{"type":32,"tag":73,"props":674,"children":675},{"style":526},[676],{"type":37,"value":638},{"type":32,"tag":73,"props":678,"children":680},{"class":75,"line":679},7,[681],{"type":32,"tag":73,"props":682,"children":683},{"style":526},[684],{"type":37,"value":596},{"type":32,"tag":73,"props":686,"children":687},{"class":75,"line":26},[688],{"type":32,"tag":73,"props":689,"children":690},{"style":80},[691],{"type":37,"value":692},"  \u002F\u002F Streaming: la risposta iniziale torna subito\n",{"type":32,"tag":73,"props":694,"children":696},{"class":75,"line":695},9,[697,702,707],{"type":32,"tag":73,"props":698,"children":699},{"style":505},[700],{"type":37,"value":701},"  return",{"type":32,"tag":73,"props":703,"children":704},{"style":90},[705],{"type":37,"value":706}," defer",{"type":32,"tag":73,"props":708,"children":709},{"style":526},[710],{"type":37,"value":711},"({\n",{"type":32,"tag":73,"props":713,"children":715},{"class":75,"line":714},10,[716],{"type":32,"tag":73,"props":717,"children":718},{"style":526},[719],{"type":37,"value":720},"    products: productsPromise,\n",{"type":32,"tag":73,"props":722,"children":724},{"class":75,"line":723},11,[725],{"type":32,"tag":73,"props":726,"children":727},{"style":526},[728],{"type":37,"value":729},"    collections: collectionsPromise,\n",{"type":32,"tag":73,"props":731,"children":733},{"class":75,"line":732},12,[734],{"type":32,"tag":73,"props":735,"children":736},{"style":526},[737],{"type":37,"value":738},"  });\n",{"type":32,"tag":73,"props":740,"children":742},{"class":75,"line":741},13,[743],{"type":32,"tag":73,"props":744,"children":745},{"style":526},[746],{"type":37,"value":747},"}\n",{"type":32,"tag":33,"props":749,"children":750},{},[751,753,759],{"type":37,"value":752},"L'API ",{"type":32,"tag":69,"props":754,"children":756},{"className":755},[],[757],{"type":37,"value":758},"defer",{"type":37,"value":760}," trasmette le promise in streaming. Il client riceve l'HTML iniziale, la pagina si renderizza progressivamente quando i dati sono pronti. Il TTFB rimane basso.",{"type":32,"tag":40,"props":762,"children":764},{"id":763},"calcolo-del-costo-di-migrazione",[765],{"type":37,"value":766},"Calcolo del Costo di Migrazione",{"type":32,"tag":33,"props":768,"children":769},{},[770],{"type":37,"value":771},"Il guadagno di performance è netto — ma quale il costo di migrazione? Abbiamo scomposto così:",{"type":32,"tag":33,"props":773,"children":774},{},[775],{"type":32,"tag":229,"props":776,"children":777},{},[778],{"type":37,"value":779},"Sforzo di Sviluppo:",{"type":32,"tag":252,"props":781,"children":782},{},[783,788,793,798,803],{"type":32,"tag":225,"props":784,"children":785},{},[786],{"type":37,"value":787},"Migrazione componenti tema → Hydrogen: 160 ore (2 developer senior, 4 settimane)",{"type":32,"tag":225,"props":789,"children":790},{},[791],{"type":37,"value":792},"Integrazione API Storefront (riscrittura query GraphQL): 40 ore",{"type":32,"tag":225,"props":794,"children":795},{},[796],{"type":37,"value":797},"Setup pipeline CI\u002FCD (Cloudflare Workers): 16 ore",{"type":32,"tag":225,"props":799,"children":800},{},[801],{"type":37,"value":802},"QA + risoluzione edge case: 24 ore",{"type":32,"tag":225,"props":804,"children":805},{},[806,811],{"type":32,"tag":229,"props":807,"children":808},{},[809],{"type":37,"value":810},"Totale:",{"type":37,"value":812}," 240 ore",{"type":32,"tag":33,"props":814,"children":815},{},[816],{"type":32,"tag":229,"props":817,"children":818},{},[819],{"type":37,"value":820},"Costo dell'Infrastruttura:",{"type":32,"tag":252,"props":822,"children":823},{},[824,829,834],{"type":32,"tag":225,"props":825,"children":826},{},[827],{"type":37,"value":828},"Cloudflare Workers: $5\u002Fmese (gratuito fino a 100K richieste — il nostro traffico è 80K\u002Fmese)",{"type":32,"tag":225,"props":830,"children":831},{},[832],{"type":37,"value":833},"Oxygen (piattaforma edge di Shopify): $20\u002Fmese tier iniziale",{"type":32,"tag":225,"props":835,"children":836},{},[837],{"type":37,"value":838},"Abbiamo scelto Cloudflare — lo usavamo già come proxy",{"type":32,"tag":33,"props":840,"children":841},{},[842],{"type":32,"tag":229,"props":843,"children":844},{},[845],{"type":37,"value":846},"Overhead di Manutenzione:",{"type":32,"tag":252,"props":848,"children":849},{},[850,855,860],{"type":32,"tag":225,"props":851,"children":852},{},[853],{"type":37,"value":854},"La versione di Hydrogen deve essere aggiornata ogni 6 mesi (monitoraggio upstream di Remix)",{"type":32,"tag":225,"props":856,"children":857},{},[858],{"type":37,"value":859},"Curva di apprendimento per lo sviluppatore: il team ha bisogno di esperienza con React + Remix",{"type":32,"tag":225,"props":861,"children":862},{},[863],{"type":37,"value":864},"In Liquid, usavamo template del Theme Store — in Hydrogen, sviluppo custom",{"type":32,"tag":33,"props":866,"children":867},{},[868,870,875,877,882],{"type":37,"value":869},"Costo totale di migrazione una tantum: ",{"type":32,"tag":229,"props":871,"children":872},{},[873],{"type":37,"value":874},"240 ore × $80\u002Fora = $19.200",{"type":37,"value":876},". Costo infrastruttura annuale: ",{"type":32,"tag":229,"props":878,"children":879},{},[880],{"type":37,"value":881},"$60",{"type":37,"value":883},".",{"type":32,"tag":33,"props":885,"children":886},{},[887],{"type":37,"value":888},"Come abbiamo modellato i guadagni? Due capitoli:",{"type":32,"tag":221,"props":890,"children":891},{},[892,908],{"type":32,"tag":225,"props":893,"children":894},{},[895,900,902,907],{"type":32,"tag":229,"props":896,"children":897},{},[898],{"type":37,"value":899},"Impatto sul Conversion Rate:",{"type":37,"value":901}," La correlazione tra Core Web Vitals e conversion rate è nota (studio Google\u002FDeloitte: riduzione LCP di 0,1s = lift del 1-2% di conversion). Il nostro LCP è sceso di 1,3s — stima conservativa di lift dell'1,5%. Su revenue mensile di $200K = $3K\u002Fmese di lift. Annuale ",{"type":32,"tag":229,"props":903,"children":904},{},[905],{"type":37,"value":906},"$36K",{"type":37,"value":883},{"type":32,"tag":225,"props":909,"children":910},{},[911,916,918,923],{"type":32,"tag":229,"props":912,"children":913},{},[914],{"type":37,"value":915},"Developer Velocity:",{"type":37,"value":917}," Tempo di build ridotto dell'88%. Il team fa 40 deploy al mese (CI\u002FCD). Ogni deploy risparmi 10,5 minuti = 420 minuti al mese = 7 ore. Ipotesi sviluppatore senior $80\u002Fora = risparmio mensile $560. Annuale ",{"type":32,"tag":229,"props":919,"children":920},{},[921],{"type":37,"value":922},"$6.7K",{"type":37,"value":883},{"type":32,"tag":33,"props":925,"children":926},{},[927,929,934],{"type":37,"value":928},"Periodo di payback: $19.200 \u002F ($36K + $6.7K) = ",{"type":32,"tag":229,"props":930,"children":931},{},[932],{"type":37,"value":933},"5,4 mesi",{"type":37,"value":883},{"type":32,"tag":33,"props":936,"children":937},{},[938],{"type":37,"value":939},"Questi numeri giustificavano la migrazione. Il guadagno di performance + aumento della developer velocity ripagava il costo di migrazione in 6 mesi.",{"type":32,"tag":40,"props":941,"children":943},{"id":942},"trade-off-e-limiti",[944],{"type":37,"value":945},"Trade-off e Limiti",{"type":32,"tag":33,"props":947,"children":948},{},[949],{"type":37,"value":950},"Hydrogen non è la scelta giusta per ogni store. In questi scenari Liquid rimane più sensato:",{"type":32,"tag":33,"props":952,"children":953},{},[954],{"type":32,"tag":229,"props":955,"children":956},{},[957],{"type":37,"value":958},"Liquid dovrebbe rimanere:",{"type":32,"tag":252,"props":960,"children":961},{},[962,967,972,977],{"type":32,"tag":225,"props":963,"children":964},{},[965],{"type":37,"value":966},"Traffic basso (\u003C10K\u002Fmese di visitatori) — la differenza di TTFB non impatta la conversion",{"type":32,"tag":225,"props":968,"children":969},{},[970],{"type":37,"value":971},"Il team non conosce React\u002FTypeScript — la curva di apprendimento raddoppia il costo di migrazione",{"type":32,"tag":225,"props":973,"children":974},{},[975],{"type":37,"value":976},"Il template del Theme Store è sufficiente — non c'è bisogno di customizzazione",{"type":32,"tag":225,"props":978,"children":979},{},[980],{"type":37,"value":981},"Non vuoi gestire l'infrastruttura — il server condiviso di Shopify è più semplice",{"type":32,"tag":33,"props":983,"children":984},{},[985],{"type":32,"tag":229,"props":986,"children":987},{},[988],{"type":37,"value":989},"Passare a Hydrogen:",{"type":32,"tag":252,"props":991,"children":992},{},[993,998,1014,1019],{"type":32,"tag":225,"props":994,"children":995},{},[996],{"type":37,"value":997},"Traffic alto (>50K\u002Fmese) — ogni 100ms di TTFB impatta la conversion",{"type":32,"tag":225,"props":999,"children":1000},{},[1001,1003,1012],{"type":37,"value":1002},"Hai bisogno di UI\u002FUX personalizzata — l'architettura ",{"type":32,"tag":1004,"props":1005,"children":1009},"a",{"href":1006,"rel":1007},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[1008],"nofollow",[1010],{"type":37,"value":1011},"Headless Commerce",{"type":37,"value":1013}," offre flessibilità",{"type":32,"tag":225,"props":1015,"children":1016},{},[1017],{"type":37,"value":1018},"La velocità di iterazione dei test A\u002FB è critica — la pipeline CI\u002FCD deve essere sotto 2 minuti",{"type":32,"tag":225,"props":1020,"children":1021},{},[1022],{"type":37,"value":1023},"Il team di sviluppo conosce il modern frontend stack (React\u002FRemix)",{"type":32,"tag":33,"props":1025,"children":1026},{},[1027],{"type":37,"value":1028},"C'è anche un costo di manutenzione in Hydrogen. Remix fa major version update ogni 6 mesi. Hydrogen la segue. In Liquid, Shopify garantisce backward compatibility — il tema vecchio funziona ancora dopo 5 anni. In Hydrogen, serve disciplina negli update delle dependency.",{"type":32,"tag":33,"props":1030,"children":1031},{},[1032],{"type":37,"value":1033},"Il deploy su edge ha anche vincoli. I Cloudflare Workers hanno limiti runtime (CPU time 50ms, memoria 128MB). La logica backend complessa (ad esempio, motori di recommendation) non funziona su edge — devi offrirla a un origin server. In Liquid, questo non è un problema, il server lato è illimitato.",{"type":32,"tag":40,"props":1035,"children":1037},{"id":1036},"adesso",[1038],{"type":37,"value":1039},"Adesso",{"type":32,"tag":33,"props":1041,"children":1042},{},[1043],{"type":37,"value":1044},"Abbiamo scelto Hydrogen — perché il TTFB è sceso del 79%, il tempo di build si è ridotto dell'88%, il periodo di payback è 5,4 mesi. Ma prima della decisione, abbiamo modellato il costo di migrazione e elencato i trade-off.",{"type":32,"tag":33,"props":1046,"children":1047},{},[1048],{"type":37,"value":1049},"Se anche tu stai valutando la migrazione a Hydrogen, rispondi prima a queste domande: quanti visitatori mensili hai? Il team conosce React? Hai bisogno di UI\u002FUX personalizzata? Hai una pipeline CI\u002FCD? Se rispondi \"sì\" a queste domande, costruisci un modello numerico — converti la differenza di TTFB in lift di conversion, calcola l'aumento della developer velocity in ore. Se quei numeri giustificano il costo di migrazione, procedi.",{"type":32,"tag":33,"props":1051,"children":1052},{},[1053,1055,1062],{"type":37,"value":1054},"Se stai valutando una migrazione headless come la nostra, nel nostro ",{"type":32,"tag":1004,"props":1056,"children":1059},{"href":1057,"rel":1058},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fshopify",[1008],[1060],{"type":37,"value":1061},"Shopify Services",{"type":37,"value":1063}," possiamo creare una Hydrogen migration roadmap — benchmark, modello di costo, piano di rollout incrementale inclusi.",{"type":32,"tag":1065,"props":1066,"children":1067},"style",{},[1068],{"type":37,"value":1069},"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":113,"depth":113,"links":1071},[1072,1073,1076,1077,1078,1079],{"id":42,"depth":86,"text":45},{"id":189,"depth":86,"text":192,"children":1074},[1075],{"id":211,"depth":113,"text":214},{"id":300,"depth":86,"text":303},{"id":763,"depth":86,"text":766},{"id":942,"depth":86,"text":945},{"id":1036,"depth":86,"text":1039},"markdown","content:it:tech:shopify-hydrogen-vs-liquid-numeri-della-decisione.md","content","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione.md","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","md",1778364199579]