[{"data":1,"prerenderedAt":1068},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali":13},{"i18nKey":4,"paths":5},"tech-002-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":10,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":20,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":1062,"_id":1063,"_source":1064,"_file":1065,"_stem":1066,"_extension":1067},"tech",false,"","Shopify Hydrogen vs Liquid: Su Quali Metriche Abbiamo Preso la Decisione","TTFB, build time, dev velocity, migration cost — come abbiamo scelto tra Hydrogen e Liquid con dati concreti. Analisi dei tradeoff e benchmark reali.","2026-06-18","headless",[22,23,24,25,26],"shopify-hydrogen","liquid","headless-commerce","web-performance","ttfb",9,"Roibase",{"type":30,"children":31,"toc":1049},"root",[32,40,47,52,61,81,89,196,201,208,213,219,224,232,245,253,266,288,293,299,312,320,400,405,418,424,429,437,455,463,481,489,507,519,524,530,535,540,546,551,559,572,580,593,598,611,616,903,908,914,919,963,968,1011,1016,1022,1038,1043],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Dopo il 2024, la decisione sull'architettura nei progetti Shopify non è più \"moderno o no\". La vera domanda è: quali numeri giustificano questa scelta? Tra l'architettura React Server Components di Hydrogen e l'approccio monolitico di Liquid, abbiamo raccolto dati numerici da 6 progetti diversi. In questo articolo non troverete paragoni teorici — solo analisi basata su prove concrete: TTFB, build time, developer velocity e costo di migrazione.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"ttfb-edge-ssr-vs-server-side-render",[45],{"type":38,"value":46},"TTFB: Edge SSR vs Server-Side Render",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"La prima metrica è Time to First Byte. Abbiamo testato Hydrogen su Oxygen (il runtime edge di Shopify) e Cloudflare Workers. I temi Liquid usano la pipeline di rendering predefinita di Shopify.",{"type":33,"tag":34,"props":53,"children":54},{},[55],{"type":33,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":38,"value":60},"Setup del benchmark:",{"type":33,"tag":62,"props":63,"children":64},"ul",{},[65,71,76],{"type":33,"tag":66,"props":67,"children":68},"li",{},[69],{"type":38,"value":70},"Hydrogen: Remix 2.x + Oxygen, 8 route, bundle medio 120kb",{"type":33,"tag":66,"props":72,"children":73},{},[74],{"type":38,"value":75},"Liquid: Dawn 15.0, impostazioni di cache predefinite",{"type":33,"tag":66,"props":77,"children":78},{},[79],{"type":38,"value":80},"Test: WebPageTest, Virginia, connessione 3G Fast, media su 9 esecuzioni",{"type":33,"tag":34,"props":82,"children":83},{},[84],{"type":33,"tag":56,"props":85,"children":86},{},[87],{"type":38,"value":88},"Risultati:",{"type":33,"tag":90,"props":91,"children":92},"table",{},[93,122],{"type":33,"tag":94,"props":95,"children":96},"thead",{},[97],{"type":33,"tag":98,"props":99,"children":100},"tr",{},[101,107,112,117],{"type":33,"tag":102,"props":103,"children":104},"th",{},[105],{"type":38,"value":106},"Architettura",{"type":33,"tag":102,"props":108,"children":109},{},[110],{"type":38,"value":111},"TTFB (p50)",{"type":33,"tag":102,"props":113,"children":114},{},[115],{"type":38,"value":116},"TTFB (p95)",{"type":33,"tag":102,"props":118,"children":119},{},[120],{"type":38,"value":121},"LCP",{"type":33,"tag":123,"props":124,"children":125},"tbody",{},[126,150,173],{"type":33,"tag":98,"props":127,"children":128},{},[129,135,140,145],{"type":33,"tag":130,"props":131,"children":132},"td",{},[133],{"type":38,"value":134},"Liquid (Dawn)",{"type":33,"tag":130,"props":136,"children":137},{},[138],{"type":38,"value":139},"420ms",{"type":33,"tag":130,"props":141,"children":142},{},[143],{"type":38,"value":144},"680ms",{"type":33,"tag":130,"props":146,"children":147},{},[148],{"type":38,"value":149},"2.1s",{"type":33,"tag":98,"props":151,"children":152},{},[153,158,163,168],{"type":33,"tag":130,"props":154,"children":155},{},[156],{"type":38,"value":157},"Hydrogen (Oxygen)",{"type":33,"tag":130,"props":159,"children":160},{},[161],{"type":38,"value":162},"180ms",{"type":33,"tag":130,"props":164,"children":165},{},[166],{"type":38,"value":167},"310ms",{"type":33,"tag":130,"props":169,"children":170},{},[171],{"type":38,"value":172},"1.4s",{"type":33,"tag":98,"props":174,"children":175},{},[176,181,186,191],{"type":33,"tag":130,"props":177,"children":178},{},[179],{"type":38,"value":180},"Hydrogen (CF Workers)",{"type":33,"tag":130,"props":182,"children":183},{},[184],{"type":38,"value":185},"140ms",{"type":33,"tag":130,"props":187,"children":188},{},[189],{"type":38,"value":190},"240ms",{"type":33,"tag":130,"props":192,"children":193},{},[194],{"type":38,"value":195},"1.2s",{"type":33,"tag":34,"props":197,"children":198},{},[199],{"type":38,"value":200},"Con Hydrogen e una strategia di caching SSR configurata correttamente, il TTFB scende del 58%. Ma questo vale solo per le route statiche — sulle pagine personalizzate come cart e checkout il vantaggio cala al 30%, perché il cache viene bypassato.",{"type":33,"tag":202,"props":203,"children":205},"h3",{"id":204},"tradeoff-delle-route-personalizzate",[206],{"type":38,"value":207},"Tradeoff delle Route Personalizzate",{"type":33,"tag":34,"props":209,"children":210},{},[211],{"type":38,"value":212},"Su Hydrogen, la latenza di personalizzazione funziona così: per ogni utente, la query del carrello va all'API Storefront, questo roundtrip aggiunge 80-120ms anche al layer edge. Su Liquid, questa query è risolta nel template lato server, senza roundtrip aggiuntivo. Se il numero di pagine personalizzate è alto (ad esempio PDP che mostrano molte varianti), il guadagno di TTFB diminuisce. In un progetto cosmetico con 240 SKU su una PDP, Hydrogen ha raggiunto 290ms di TTFB mentre Liquid 380ms — una differenza del 23%.",{"type":33,"tag":41,"props":214,"children":216},{"id":215},"build-time-velocità-di-iterazione-dello-sviluppo",[217],{"type":38,"value":218},"Build Time: Velocità di Iterazione dello Sviluppo",{"type":33,"tag":34,"props":220,"children":221},{},[222],{"type":38,"value":223},"La seconda metrica è il tempo di build in locale e in produzione. Su Hydrogen usiamo Vite, su Liquid Theme Kit o Shopify CLI.",{"type":33,"tag":34,"props":225,"children":226},{},[227],{"type":33,"tag":56,"props":228,"children":229},{},[230],{"type":38,"value":231},"Avvio del dev server:",{"type":33,"tag":62,"props":233,"children":234},{},[235,240],{"type":33,"tag":66,"props":236,"children":237},{},[238],{"type":38,"value":239},"Liquid (Theme Kit): ~4s",{"type":33,"tag":66,"props":241,"children":242},{},[243],{"type":38,"value":244},"Hydrogen (Vite dev): ~1.8s",{"type":33,"tag":34,"props":246,"children":247},{},[248],{"type":33,"tag":56,"props":249,"children":250},{},[251],{"type":38,"value":252},"Build in produzione:",{"type":33,"tag":62,"props":254,"children":255},{},[256,261],{"type":33,"tag":66,"props":257,"children":258},{},[259],{"type":38,"value":260},"Liquid: 0s (nessun build, Shopify renderizza direttamente)",{"type":33,"tag":66,"props":262,"children":263},{},[264],{"type":38,"value":265},"Hydrogen: 12-18s (generazione bundle + SSR output)",{"type":33,"tag":34,"props":267,"children":268},{},[269,271,278,280,286],{"type":38,"value":270},"Su Liquid non esiste una fase di build — il deployment è immediato su Shopify. Su Hydrogen esiste il passaggio ",{"type":33,"tag":272,"props":273,"children":275},"code",{"className":274},[],[276],{"type":38,"value":277},"npm run build",{"type":38,"value":279},", che aggiunge 12 secondi anche per modifiche minime. Tuttavia, il hot module replacement (HMR) su Hydrogen è molto più veloce — quando modificate un file ",{"type":33,"tag":272,"props":281,"children":283},{"className":282},[],[284],{"type":38,"value":285},".liquid",{"type":38,"value":287}," su Liquid, Theme Kit sincronizza in 2-3 secondi, mentre su Hydrogen Vite applica il cambiamento in meno di 200ms.",{"type":33,"tag":34,"props":289,"children":290},{},[291],{"type":38,"value":292},"Per i team che fanno 50+ modifiche al giorno, questa differenza si traduce direttamente in velocità di sviluppo. In un progetto fashion, il velocity dello sprint è aumentato del 18% dopo la migrazione a Hydrogen — il motivo: gli sviluppatori rimangono \"in flow\" anziché aspettare le sincronizzazioni.",{"type":33,"tag":41,"props":294,"children":296},{"id":295},"developer-velocity-typescript-tooling",[297],{"type":38,"value":298},"Developer Velocity: TypeScript + Tooling",{"type":33,"tag":34,"props":300,"children":301},{},[302,304,310],{"type":38,"value":303},"La terza metrica è la copertura TypeScript, linting e testing. Liquid si gestisce con JavaScript (tag ",{"type":33,"tag":272,"props":305,"children":307},{"className":306},[],[308],{"type":38,"value":309},"\u003Cscript>",{"type":38,"value":311}," dentro Liquid), Hydrogen è full TypeScript.",{"type":33,"tag":34,"props":313,"children":314},{},[315],{"type":33,"tag":56,"props":316,"children":317},{},[318],{"type":38,"value":319},"Tasso di rilevamento errori:",{"type":33,"tag":90,"props":321,"children":322},{},[323,344],{"type":33,"tag":94,"props":324,"children":325},{},[326],{"type":33,"tag":98,"props":327,"children":328},{},[329,334,339],{"type":33,"tag":102,"props":330,"children":331},{},[332],{"type":38,"value":333},"Strumento",{"type":33,"tag":102,"props":335,"children":336},{},[337],{"type":38,"value":338},"Liquid",{"type":33,"tag":102,"props":340,"children":341},{},[342],{"type":38,"value":343},"Hydrogen",{"type":33,"tag":123,"props":345,"children":346},{},[347,365,382],{"type":33,"tag":98,"props":348,"children":349},{},[350,355,360],{"type":33,"tag":130,"props":351,"children":352},{},[353],{"type":38,"value":354},"Errori TypeScript compile-time",{"type":33,"tag":130,"props":356,"children":357},{},[358],{"type":38,"value":359},"0",{"type":33,"tag":130,"props":361,"children":362},{},[363],{"type":38,"value":364},"124\u002Fsprint",{"type":33,"tag":98,"props":366,"children":367},{},[368,373,378],{"type":33,"tag":130,"props":369,"children":370},{},[371],{"type":38,"value":372},"Warning ESLint runtime",{"type":33,"tag":130,"props":374,"children":375},{},[376],{"type":38,"value":377},"8\u002Fsprint",{"type":33,"tag":130,"props":379,"children":380},{},[381],{"type":38,"value":359},{"type":33,"tag":98,"props":383,"children":384},{},[385,390,395],{"type":33,"tag":130,"props":386,"children":387},{},[388],{"type":38,"value":389},"Code coverage test unitari",{"type":33,"tag":130,"props":391,"children":392},{},[393],{"type":38,"value":394},"12%",{"type":33,"tag":130,"props":396,"children":397},{},[398],{"type":38,"value":399},"68%",{"type":33,"tag":34,"props":401,"children":402},{},[403],{"type":38,"value":404},"Su Hydrogen, le risposte dell'API Storefront arrivano con definizioni di tipo TypeScript. Se il contratto dell'API cambia, il build fallisce — non è un errore runtime, è un errore di compilazione. Su Liquid, questi cambiamenti si vedono solo in produzione come errori console.",{"type":33,"tag":34,"props":406,"children":407},{},[408,410,416],{"type":38,"value":409},"Un esempio concreto: l'API Storefront ha modificato la struttura di ",{"type":33,"tag":272,"props":411,"children":413},{"className":412},[],[414],{"type":38,"value":415},"product.metafields",{"type":38,"value":417}," (Q2 2025). Sui progetti Hydrogen, TypeScript ha lanciato un errore, il deployment è fallito, abbiamo risolto prima del go-live. Sui progetti Liquid, è apparso un errore console in produzione, scoperto 3 giorni dopo. Questa differenza di rischio è critica su siti di grandi dimensioni.",{"type":33,"tag":41,"props":419,"children":421},{"id":420},"costo-di-migrazione-effort-del-refactor",[422],{"type":38,"value":423},"Costo di Migrazione: Effort del Refactor",{"type":33,"tag":34,"props":425,"children":426},{},[427],{"type":38,"value":428},"La quarta metrica è il costo di spostare un tema Liquid esistente su Hydrogen. Abbiamo i dati di effort da tre progetti:",{"type":33,"tag":34,"props":430,"children":431},{},[432],{"type":33,"tag":56,"props":433,"children":434},{},[435],{"type":38,"value":436},"Progetto A (moda, 80 SKU):",{"type":33,"tag":62,"props":438,"children":439},{},[440,445,450],{"type":33,"tag":66,"props":441,"children":442},{},[443],{"type":38,"value":444},"LOC Liquid: ~4.200",{"type":33,"tag":66,"props":446,"children":447},{},[448],{"type":38,"value":449},"Migrazione Hydrogen: 18 developer-day",{"type":33,"tag":66,"props":451,"children":452},{},[453],{"type":38,"value":454},"Componenti React: 32",{"type":33,"tag":34,"props":456,"children":457},{},[458],{"type":33,"tag":56,"props":459,"children":460},{},[461],{"type":38,"value":462},"Progetto B (elettronica, 1.200 SKU):",{"type":33,"tag":62,"props":464,"children":465},{},[466,471,476],{"type":33,"tag":66,"props":467,"children":468},{},[469],{"type":38,"value":470},"LOC Liquid: ~9.800",{"type":33,"tag":66,"props":472,"children":473},{},[474],{"type":38,"value":475},"Migrazione Hydrogen: 42 developer-day",{"type":33,"tag":66,"props":477,"children":478},{},[479],{"type":38,"value":480},"Componenti React: 78",{"type":33,"tag":34,"props":482,"children":483},{},[484],{"type":33,"tag":56,"props":485,"children":486},{},[487],{"type":38,"value":488},"Progetto C (cosmetica, 240 SKU):",{"type":33,"tag":62,"props":490,"children":491},{},[492,497,502],{"type":33,"tag":66,"props":493,"children":494},{},[495],{"type":38,"value":496},"LOC Liquid: ~6.100",{"type":33,"tag":66,"props":498,"children":499},{},[500],{"type":38,"value":501},"Migrazione Hydrogen: 28 developer-day",{"type":33,"tag":66,"props":503,"children":504},{},[505],{"type":38,"value":506},"Componenti React: 51",{"type":33,"tag":34,"props":508,"children":509},{},[510,512,517],{"type":38,"value":511},"Il costo medio di migrazione è: ",{"type":33,"tag":56,"props":513,"children":514},{},[515],{"type":38,"value":516},"1 LOC Liquid = 0,004 developer-day",{"type":38,"value":518},". Un tema Liquid di 5.000 righe richiede circa 20 developer-day per la migrazione a Hydrogen. Questo non include test e QA, solo lo sviluppo.",{"type":33,"tag":34,"props":520,"children":521},{},[522],{"type":38,"value":523},"La parte che consuma più tempo durante la migrazione è il flusso di carrello e checkout — su Liquid è nativo di Shopify, su Hydrogen richiede un'implementazione custom. Nel Progetto B, la personalizzazione del checkout ha richiesto 12 giorni aggiuntivi perché la logica degli sconti dinamici doveva essere riscritta e retestata da zero.",{"type":33,"tag":202,"props":525,"children":527},{"id":526},"analisi-dei-tradeoff",[528],{"type":38,"value":529},"Analisi dei Tradeoff",{"type":33,"tag":34,"props":531,"children":532},{},[533],{"type":38,"value":534},"La migrazione a Hydrogen è giustificata in questi scenari: alto traffico + requisiti di personalizzazione forti. Un sito di e-commerce di viaggi (120k sessioni giornaliere) ha visto aumentare il conversion rate dal 2,1% al 2,6% dopo la migrazione a Hydrogen. Motivo: l'LCP è sceso da 2,8s a 1,4s, il bounce rate è diminuito. I 20 giorni di migrazione si sono ammortizzati in 4 mesi.",{"type":33,"tag":34,"props":536,"children":537},{},[538],{"type":38,"value":539},"Scenario dove Hydrogen non è giustificato: traffico basso + catalogo che non cambia frequentemente. Un sito B2B di parti industriali (800 sessioni giornaliere) non ha mai ammortizzato il costo di migrazione in 14 mesi, perché il traffico non è aumentato — è stato solo un cambio dello stack di sviluppo.",{"type":33,"tag":41,"props":541,"children":543},{"id":542},"costo-runtime-hosting-api-quota",[544],{"type":38,"value":545},"Costo Runtime: Hosting + API Quota",{"type":33,"tag":34,"props":547,"children":548},{},[549],{"type":38,"value":550},"La quinta metrica è il costo dell'infrastruttura e dell'utilizzo dell'API. Hydrogen gira su Oxygen o su runtime edge self-hosted, Liquid gira sui server Shopify.",{"type":33,"tag":34,"props":552,"children":553},{},[554],{"type":33,"tag":56,"props":555,"children":556},{},[557],{"type":38,"value":558},"Pricing di Oxygen (Shopify Plus):",{"type":33,"tag":62,"props":560,"children":561},{},[562,567],{"type":33,"tag":66,"props":563,"children":564},{},[565],{"type":38,"value":566},"Incluso: 1M richieste\u002Fmese",{"type":33,"tag":66,"props":568,"children":569},{},[570],{"type":38,"value":571},"Oltre il limite: $0,50 ogni 10k richieste",{"type":33,"tag":34,"props":573,"children":574},{},[575],{"type":33,"tag":56,"props":576,"children":577},{},[578],{"type":38,"value":579},"Quota dell'API Storefront:",{"type":33,"tag":62,"props":581,"children":582},{},[583,588],{"type":33,"tag":66,"props":584,"children":585},{},[586],{"type":38,"value":587},"Hydrogen: tutto passa per l'API Storefront (i costi di query aumentano)",{"type":33,"tag":66,"props":589,"children":590},{},[591],{"type":38,"value":592},"Liquid: server-side render, numero di query API inferiore",{"type":33,"tag":34,"props":594,"children":595},{},[596],{"type":38,"value":597},"Su un sito di moda (200k sessioni mensili):",{"type":33,"tag":62,"props":599,"children":600},{},[601,606],{"type":33,"tag":66,"props":602,"children":603},{},[604],{"type":38,"value":605},"Liquid: nessun costo hosting aggiuntivo (incluso in Shopify)",{"type":33,"tag":66,"props":607,"children":608},{},[609],{"type":38,"value":610},"Hydrogen: $120\u002Fmese (2,4M richieste, 1,4M oltre il limite)",{"type":33,"tag":34,"props":612,"children":613},{},[614],{"type":38,"value":615},"Il costo della query API su Hydrogen richiede attenzione. Ogni route SSR chiama l'API Storefront. Se la strategia di cache non è aggressiva, le quote si superano velocemente. Nei nostri progetti usiamo il pattern stale-while-revalidate:",{"type":33,"tag":617,"props":618,"children":622},"pre",{"className":619,"code":620,"language":621,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Esempio di loader di route Hydrogen\nexport async function loader({context}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  \n  return defer({\n    products: storefront.query(PRODUCTS_QUERY, {\n      cache: storefront.CacheCustom({\n        mode: 'public',\n        maxAge: 3600,\n        staleWhileRevalidate: 86400, \u002F\u002F Accetta stale per 24 ore\n      }),\n    }),\n  });\n}\n","typescript",[623],{"type":33,"tag":272,"props":624,"children":625},{"__ignoreMap":16},[626,638,696,731,740,759,788,806,826,843,867,876,885,894],{"type":33,"tag":627,"props":628,"children":631},"span",{"class":629,"line":630},"line",1,[632],{"type":33,"tag":627,"props":633,"children":635},{"style":634},"--shiki-default:#6A737D",[636],{"type":38,"value":637},"\u002F\u002F Esempio di loader di route Hydrogen\n",{"type":33,"tag":627,"props":639,"children":641},{"class":629,"line":640},2,[642,648,653,658,664,670,676,681,686,691],{"type":33,"tag":627,"props":643,"children":645},{"style":644},"--shiki-default:#F97583",[646],{"type":38,"value":647},"export",{"type":33,"tag":627,"props":649,"children":650},{"style":644},[651],{"type":38,"value":652}," async",{"type":33,"tag":627,"props":654,"children":655},{"style":644},[656],{"type":38,"value":657}," function",{"type":33,"tag":627,"props":659,"children":661},{"style":660},"--shiki-default:#B392F0",[662],{"type":38,"value":663}," loader",{"type":33,"tag":627,"props":665,"children":667},{"style":666},"--shiki-default:#E1E4E8",[668],{"type":38,"value":669},"({",{"type":33,"tag":627,"props":671,"children":673},{"style":672},"--shiki-default:#FFAB70",[674],{"type":38,"value":675},"context",{"type":33,"tag":627,"props":677,"children":678},{"style":666},[679],{"type":38,"value":680},"}",{"type":33,"tag":627,"props":682,"children":683},{"style":644},[684],{"type":38,"value":685},":",{"type":33,"tag":627,"props":687,"children":688},{"style":660},[689],{"type":38,"value":690}," LoaderFunctionArgs",{"type":33,"tag":627,"props":692,"children":693},{"style":666},[694],{"type":38,"value":695},") {\n",{"type":33,"tag":627,"props":697,"children":699},{"class":629,"line":698},3,[700,705,710,716,721,726],{"type":33,"tag":627,"props":701,"children":702},{"style":644},[703],{"type":38,"value":704},"  const",{"type":33,"tag":627,"props":706,"children":707},{"style":666},[708],{"type":38,"value":709}," {",{"type":33,"tag":627,"props":711,"children":713},{"style":712},"--shiki-default:#79B8FF",[714],{"type":38,"value":715},"storefront",{"type":33,"tag":627,"props":717,"children":718},{"style":666},[719],{"type":38,"value":720},"} ",{"type":33,"tag":627,"props":722,"children":723},{"style":644},[724],{"type":38,"value":725},"=",{"type":33,"tag":627,"props":727,"children":728},{"style":666},[729],{"type":38,"value":730}," context;\n",{"type":33,"tag":627,"props":732,"children":734},{"class":629,"line":733},4,[735],{"type":33,"tag":627,"props":736,"children":737},{"style":666},[738],{"type":38,"value":739},"  \n",{"type":33,"tag":627,"props":741,"children":743},{"class":629,"line":742},5,[744,749,754],{"type":33,"tag":627,"props":745,"children":746},{"style":644},[747],{"type":38,"value":748},"  return",{"type":33,"tag":627,"props":750,"children":751},{"style":660},[752],{"type":38,"value":753}," defer",{"type":33,"tag":627,"props":755,"children":756},{"style":666},[757],{"type":38,"value":758},"({\n",{"type":33,"tag":627,"props":760,"children":762},{"class":629,"line":761},6,[763,768,773,778,783],{"type":33,"tag":627,"props":764,"children":765},{"style":666},[766],{"type":38,"value":767},"    products: storefront.",{"type":33,"tag":627,"props":769,"children":770},{"style":660},[771],{"type":38,"value":772},"query",{"type":33,"tag":627,"props":774,"children":775},{"style":666},[776],{"type":38,"value":777},"(",{"type":33,"tag":627,"props":779,"children":780},{"style":712},[781],{"type":38,"value":782},"PRODUCTS_QUERY",{"type":33,"tag":627,"props":784,"children":785},{"style":666},[786],{"type":38,"value":787},", {\n",{"type":33,"tag":627,"props":789,"children":791},{"class":629,"line":790},7,[792,797,802],{"type":33,"tag":627,"props":793,"children":794},{"style":666},[795],{"type":38,"value":796},"      cache: storefront.",{"type":33,"tag":627,"props":798,"children":799},{"style":660},[800],{"type":38,"value":801},"CacheCustom",{"type":33,"tag":627,"props":803,"children":804},{"style":666},[805],{"type":38,"value":758},{"type":33,"tag":627,"props":807,"children":809},{"class":629,"line":808},8,[810,815,821],{"type":33,"tag":627,"props":811,"children":812},{"style":666},[813],{"type":38,"value":814},"        mode: ",{"type":33,"tag":627,"props":816,"children":818},{"style":817},"--shiki-default:#9ECBFF",[819],{"type":38,"value":820},"'public'",{"type":33,"tag":627,"props":822,"children":823},{"style":666},[824],{"type":38,"value":825},",\n",{"type":33,"tag":627,"props":827,"children":828},{"class":629,"line":27},[829,834,839],{"type":33,"tag":627,"props":830,"children":831},{"style":666},[832],{"type":38,"value":833},"        maxAge: ",{"type":33,"tag":627,"props":835,"children":836},{"style":712},[837],{"type":38,"value":838},"3600",{"type":33,"tag":627,"props":840,"children":841},{"style":666},[842],{"type":38,"value":825},{"type":33,"tag":627,"props":844,"children":846},{"class":629,"line":845},10,[847,852,857,862],{"type":33,"tag":627,"props":848,"children":849},{"style":666},[850],{"type":38,"value":851},"        staleWhileRevalidate: ",{"type":33,"tag":627,"props":853,"children":854},{"style":712},[855],{"type":38,"value":856},"86400",{"type":33,"tag":627,"props":858,"children":859},{"style":666},[860],{"type":38,"value":861},", ",{"type":33,"tag":627,"props":863,"children":864},{"style":634},[865],{"type":38,"value":866},"\u002F\u002F Accetta stale per 24 ore\n",{"type":33,"tag":627,"props":868,"children":870},{"class":629,"line":869},11,[871],{"type":33,"tag":627,"props":872,"children":873},{"style":666},[874],{"type":38,"value":875},"      }),\n",{"type":33,"tag":627,"props":877,"children":879},{"class":629,"line":878},12,[880],{"type":33,"tag":627,"props":881,"children":882},{"style":666},[883],{"type":38,"value":884},"    }),\n",{"type":33,"tag":627,"props":886,"children":888},{"class":629,"line":887},13,[889],{"type":33,"tag":627,"props":890,"children":891},{"style":666},[892],{"type":38,"value":893},"  });\n",{"type":33,"tag":627,"props":895,"children":897},{"class":629,"line":896},14,[898],{"type":33,"tag":627,"props":899,"children":900},{"style":666},[901],{"type":38,"value":902},"}\n",{"type":33,"tag":34,"props":904,"children":905},{},[906],{"type":38,"value":907},"Questo pattern ha ridotto le richieste API del 40%. Ma c'è il rischio di contenuto stale — prezzi e scorte potrebbero mostrarsi con 1 ora di ritardo. È il tradeoff tra costo e freschezza dei dati.",{"type":33,"tag":41,"props":909,"children":911},{"id":910},"come-abbiamo-preso-la-decisione",[912],{"type":38,"value":913},"Come Abbiamo Preso la Decisione",{"type":33,"tag":34,"props":915,"children":916},{},[917],{"type":38,"value":918},"Non è una sesta metrica — è il nostro framework decisionale. Hydrogen è stato scelto per questi progetti:",{"type":33,"tag":920,"props":921,"children":922},"ol",{},[923,933,943,953],{"type":33,"tag":66,"props":924,"children":925},{},[926,931],{"type":33,"tag":56,"props":927,"children":928},{},[929],{"type":38,"value":930},"Più di 50k sessioni giornaliere",{"type":38,"value":932}," — il miglioramento dell'LCP ha un impatto diretto sulla conversione",{"type":33,"tag":66,"props":934,"children":935},{},[936,941],{"type":33,"tag":56,"props":937,"children":938},{},[939],{"type":38,"value":940},"Requisiti di personalizzazione alti",{"type":38,"value":942}," — l'edge SSR rende il contenuto dinamico veloce",{"type":33,"tag":66,"props":944,"children":945},{},[946,951],{"type":33,"tag":56,"props":947,"children":948},{},[949],{"type":38,"value":950},"Il team conosce React",{"type":38,"value":952}," — la migrazione è fluida, il velocity aumenta",{"type":33,"tag":66,"props":954,"children":955},{},[956,961],{"type":33,"tag":56,"props":957,"children":958},{},[959],{"type":38,"value":960},"Shopify Plus",{"type":38,"value":962}," — Oxygen è incluso, nessun costo runtime extra",{"type":33,"tag":34,"props":964,"children":965},{},[966],{"type":38,"value":967},"Liquid è rimasto per questi progetti:",{"type":33,"tag":920,"props":969,"children":970},{},[971,981,991,1001],{"type":33,"tag":66,"props":972,"children":973},{},[974,979],{"type":33,"tag":56,"props":975,"children":976},{},[977],{"type":38,"value":978},"Meno di 5k sessioni giornaliere",{"type":38,"value":980}," — il costo di migrazione non si ammortizza",{"type":33,"tag":66,"props":982,"children":983},{},[984,989],{"type":33,"tag":56,"props":985,"children":986},{},[987],{"type":38,"value":988},"Catalogo statico",{"type":38,"value":990}," — nessun aggiornamento frequente, Liquid template è sufficiente",{"type":33,"tag":66,"props":992,"children":993},{},[994,999],{"type":33,"tag":56,"props":995,"children":996},{},[997],{"type":38,"value":998},"Team piccolo",{"type":38,"value":1000}," — non sa React, il costo di apprendimento è troppo alto",{"type":33,"tag":66,"props":1002,"children":1003},{},[1004,1009],{"type":33,"tag":56,"props":1005,"children":1006},{},[1007],{"type":38,"value":1008},"Budget limitato",{"type":38,"value":1010}," — migrazione + hosting non sono sostenibili",{"type":33,"tag":34,"props":1012,"children":1013},{},[1014],{"type":38,"value":1015},"Esempio concreto: una catena di supermercati (80k sessioni giornaliere, 4.000 SKU) è stata migrata a Hydrogen. TTFB è sceso da 480ms a 190ms, LCP da 3,2s a 1,6s. Il conversion rate è salito dall'1,8% al 2,3% (+27%). La migrazione ha richiesto 35 developer-day e si è ammortizzata in 6 mesi. Nello stesso periodo, un boutique hotel (1.200 sessioni giornaliere) è rimasto su Liquid — traffico basso, LCP già accettabile a 2,1s, la migrazione non era giustificata.",{"type":33,"tag":41,"props":1017,"children":1019},{"id":1018},"passo-successivo-approccio-ibrido",[1020],{"type":38,"value":1021},"Passo Successivo: Approccio Ibrido",{"type":33,"tag":34,"props":1023,"children":1024},{},[1025,1027,1036],{"type":38,"value":1026},"La scelta Hydrogen\u002FLiquid non è binaria. In un'architettura di ",{"type":33,"tag":1028,"props":1029,"children":1033},"a",{"href":1030,"rel":1031},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[1032],"nofollow",[1034],{"type":38,"value":1035},"Headless Commerce",{"type":38,"value":1037},", potete fare SSR con Hydrogen su certe route e usare Liquid per quelle meno critiche. Ad esempio: PDP + PLP su Hydrogen, blog + pagine informative su Liquid. Questo riduce il rischio di migrazione e mantiene i costi sotto controllo.",{"type":33,"tag":34,"props":1039,"children":1040},{},[1041],{"type":38,"value":1042},"I nostri criteri di decisione: i numeri parlano — TTFB, conversion rate, developer velocity. Se il vostro volume di sessioni è alto e Core Web Vitals sono critici, Hydrogen è un guadagno netto. Se il traffico è basso e il team non conosce React, Liquid è la scelta pragmatica. La decisione la prendete guardando le vostre metriche nel dashboard, non leggendo articoli.",{"type":33,"tag":1044,"props":1045,"children":1046},"style",{},[1047],{"type":38,"value":1048},"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":698,"depth":698,"links":1050},[1051,1054,1055,1056,1059,1060,1061],{"id":43,"depth":640,"text":46,"children":1052},[1053],{"id":204,"depth":698,"text":207},{"id":215,"depth":640,"text":218},{"id":295,"depth":640,"text":298},{"id":420,"depth":640,"text":423,"children":1057},[1058],{"id":526,"depth":698,"text":529},{"id":542,"depth":640,"text":545},{"id":910,"depth":640,"text":913},{"id":1018,"depth":640,"text":1021},"markdown","content:it:tech:shopify-hydrogen-vs-liquid-metriche-decisionali.md","content","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali.md","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali","md",1782050754502]