[{"data":1,"prerenderedAt":2016},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-i-numeri-della-decisione":13},{"i18nKey":4,"paths":5},"tech-002-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2010,"_id":2011,"_source":2012,"_file":2013,"_stem":2014,"_extension":2015},"\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-i-numeri-della-decisione","tech",false,"","Shopify Hydrogen vs Liquid: I Numeri Dietro la Nostra Scelta","TTFB, build time, developer velocity e migration cost a confronto. Come abbiamo preso la decisione di migrare verso Hydrogen con dati concreti — numeri veri, trade-off reali.","2026-07-26",[22,23,24,25,26],"shopify-hydrogen","headless-commerce","web-performance","liquid","ttfb",9,"Roibase",{"type":30,"children":31,"toc":1997},"root",[32,40,47,52,84,114,127,134,139,164,176,182,187,215,220,225,566,571,627,632,638,643,676,681,785,790,796,801,912,924,1115,1128,1134,1139,1147,1175,1187,1195,1224,1233,1238,1254,1260,1279,1377,1382,1415,1420,1891,1896,1902,1907,1915,1939,1947,1970,1975,1981,1986,1991],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","A fine 2024, nell'ecosistema Shopify scegli tra due architetture: il template engine Liquid tradizionale oppure Hydrogen. Noi non prendiamo questa decisione per supposizioni — confrontiamo i numeri su TTFB, build time, developer velocity e migration cost. Questo articolo racconta quali metriche abbiamo analizzato e quali trade-off abbiamo accettato.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"liquid-velocità-monolitica-flessibilità-limitata",[45],{"type":38,"value":46},"Liquid: Velocità Monolitica, Flessibilità Limitata",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Liquid è il motore di template che Shopify usa dal 2006. Server-rendered, CDN-cached, gira sull'infrastruttura Oxygen di Shopify. I nostri benchmark:",{"type":33,"tag":34,"props":53,"children":54},{},[55,61,63,67,72,74,77,82],{"type":33,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":38,"value":60},"TTFB medio:",{"type":38,"value":62}," 180-220ms (da edge Oxygen CDN)",{"type":33,"tag":64,"props":65,"children":66},"br",{},[],{"type":33,"tag":56,"props":68,"children":69},{},[70],{"type":38,"value":71},"Build time:",{"type":38,"value":73}," Nessuno — rendering a runtime per ogni richiesta",{"type":33,"tag":64,"props":75,"children":76},{},[],{"type":33,"tag":56,"props":78,"children":79},{},[80],{"type":38,"value":81},"Hit rate cache:",{"type":38,"value":83}," 82% (per pagine statiche)",{"type":33,"tag":34,"props":85,"children":86},{},[87,89,96,98,104,106,112],{"type":38,"value":88},"Il vantaggio di Liquid non è la velocità, è la semplicità. Assumi un theme developer, riempi le cartelle ",{"type":33,"tag":90,"props":91,"children":93},"code",{"className":92},[],[94],{"type":38,"value":95},"sections\u002F",{"type":38,"value":97}," e ",{"type":33,"tag":90,"props":99,"children":101},{"className":100},[],[102],{"type":38,"value":103},"snippets\u002F",{"type":38,"value":105},", editi i contenuti dall'admin Shopify. Nessuna build pipeline frontend, nessuna dipendenza npm. Ma la flessibilità è zero: per l'interattività lato client aggiungi tag ",{"type":33,"tag":90,"props":107,"children":109},{"className":108},[],[110],{"type":38,"value":111},"\u003Cscript>",{"type":38,"value":113}," e dipendi da librerie come Alpine.js o Petite Vue. Niente component library, niente state management.",{"type":33,"tag":34,"props":115,"children":116},{},[117,119,125],{"type":38,"value":118},"La personalizzazione in Liquid ti lega all'oggetto ",{"type":33,"tag":90,"props":120,"children":122},{"className":121},[],[123],{"type":38,"value":124},"customer",{"type":38,"value":126}," di Shopify. Per dynamic pricing e recommendation widget, bypassi la cache CDN e colpisci il server — TTFB sale da 180ms a 400-600ms. Qui scompare il vantaggio di velocità di Liquid.",{"type":33,"tag":128,"props":129,"children":131},"h3",{"id":130},"il-trade-off-di-liquid-developer-velocity",[132],{"type":38,"value":133},"Il Trade-off di Liquid: Developer Velocity",{"type":33,"tag":34,"props":135,"children":136},{},[137],{"type":38,"value":138},"Aggiungere una feature significa:",{"type":33,"tag":140,"props":141,"children":142},"ol",{},[143,149,154,159],{"type":33,"tag":144,"props":145,"children":146},"li",{},[147],{"type":38,"value":148},"Trovare un developer specializzato in Liquid (skill niche)",{"type":33,"tag":144,"props":150,"children":151},{},[152],{"type":38,"value":153},"Aggiungere Shopify theme app extension o scrivere una custom section",{"type":33,"tag":144,"props":155,"children":156},{},[157],{"type":38,"value":158},"Testare con Shopify theme preview (nessun local dev server)",{"type":33,"tag":144,"props":160,"children":161},{},[162],{"type":38,"value":163},"Deploy tramite GitHub sync o Shopify CLI",{"type":33,"tag":34,"props":165,"children":166},{},[167,169,174],{"type":38,"value":168},"Tempo medio di delivery per feature: ",{"type":33,"tag":56,"props":170,"children":171},{},[172],{"type":38,"value":173},"3-5 giorni",{"type":38,"value":175}," (per una section semplice). Configurare A\u002FB test, aggiungere analytics event, ottimizzare third-party script — ognuno è un lavoro separato. Niente TypeScript, nessun meccanismo di component reuse, nessun framework di unit test.",{"type":33,"tag":41,"props":177,"children":179},{"id":178},"hydrogen-react-remix-edge-ssr",[180],{"type":38,"value":181},"Hydrogen: React, Remix, Edge SSR",{"type":33,"tag":34,"props":183,"children":184},{},[185],{"type":38,"value":186},"Hydrogen è il framework headless che Shopify ha lanciato nel 2021 — basato su React, costruito su Remix, gira sulla rete edge Oxygen. I nostri numeri in production:",{"type":33,"tag":34,"props":188,"children":189},{},[190,194,196,199,203,205,208,213],{"type":33,"tag":56,"props":191,"children":192},{},[193],{"type":38,"value":60},{"type":38,"value":195}," 90-140ms (edge SSR, cache HIT)",{"type":33,"tag":64,"props":197,"children":198},{},[],{"type":33,"tag":56,"props":200,"children":201},{},[202],{"type":38,"value":71},{"type":38,"value":204}," 45-70 secondi (Remix build + Oxygen deploy)",{"type":33,"tag":64,"props":206,"children":207},{},[],{"type":33,"tag":56,"props":209,"children":210},{},[211],{"type":38,"value":212},"TTFB cache MISS:",{"type":38,"value":214}," 250-350ms (include latenza Storefront API query)",{"type":33,"tag":34,"props":216,"children":217},{},[218],{"type":38,"value":219},"Il vantaggio chiave di Hydrogen è l'architettura component-based. Usi l'ecosistema React: Radix UI, Framer Motion, React Query. Gestisci lo stato con Zustand o Jotai. TypeScript supportato nativamente, dev server Vite con HMR a 200-400ms.",{"type":33,"tag":34,"props":221,"children":222},{},[223],{"type":38,"value":224},"Codice di esempio — component product card in Hydrogen:",{"type":33,"tag":226,"props":227,"children":231},"pre",{"className":228,"code":229,"language":230,"meta":17,"style":17},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\nimport {Image, Money} from '@shopify\u002Fhydrogen';\nimport type {Product} from '@shopify\u002Fhydrogen\u002Fstorefront-api-types';\n\nexport function ProductCard({product}: {product: Product}) {\n  return (\n    \u003Cdiv className=\"product-card\">\n      \u003CImage data={product.featuredImage} sizes=\"(min-width: 768px) 33vw, 100vw\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003CMoney data={product.priceRange.minVariantPrice} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","tsx",[232],{"type":33,"tag":90,"props":233,"children":234},{"__ignoreMap":17},[235,247,279,310,320,384,398,433,481,505,531,548,557],{"type":33,"tag":236,"props":237,"children":240},"span",{"class":238,"line":239},"line",1,[241],{"type":33,"tag":236,"props":242,"children":244},{"style":243},"--shiki-default:#6A737D",[245],{"type":38,"value":246},"\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\n",{"type":33,"tag":236,"props":248,"children":250},{"class":238,"line":249},2,[251,257,263,268,274],{"type":33,"tag":236,"props":252,"children":254},{"style":253},"--shiki-default:#F97583",[255],{"type":38,"value":256},"import",{"type":33,"tag":236,"props":258,"children":260},{"style":259},"--shiki-default:#E1E4E8",[261],{"type":38,"value":262}," {Image, Money} ",{"type":33,"tag":236,"props":264,"children":265},{"style":253},[266],{"type":38,"value":267},"from",{"type":33,"tag":236,"props":269,"children":271},{"style":270},"--shiki-default:#9ECBFF",[272],{"type":38,"value":273}," '@shopify\u002Fhydrogen'",{"type":33,"tag":236,"props":275,"children":276},{"style":259},[277],{"type":38,"value":278},";\n",{"type":33,"tag":236,"props":280,"children":282},{"class":238,"line":281},3,[283,287,292,297,301,306],{"type":33,"tag":236,"props":284,"children":285},{"style":253},[286],{"type":38,"value":256},{"type":33,"tag":236,"props":288,"children":289},{"style":253},[290],{"type":38,"value":291}," type",{"type":33,"tag":236,"props":293,"children":294},{"style":259},[295],{"type":38,"value":296}," {Product} ",{"type":33,"tag":236,"props":298,"children":299},{"style":253},[300],{"type":38,"value":267},{"type":33,"tag":236,"props":302,"children":303},{"style":270},[304],{"type":38,"value":305}," '@shopify\u002Fhydrogen\u002Fstorefront-api-types'",{"type":33,"tag":236,"props":307,"children":308},{"style":259},[309],{"type":38,"value":278},{"type":33,"tag":236,"props":311,"children":313},{"class":238,"line":312},4,[314],{"type":33,"tag":236,"props":315,"children":317},{"emptyLinePlaceholder":316},true,[318],{"type":38,"value":319},"\n",{"type":33,"tag":236,"props":321,"children":323},{"class":238,"line":322},5,[324,329,334,340,345,351,356,361,366,370,374,379],{"type":33,"tag":236,"props":325,"children":326},{"style":253},[327],{"type":38,"value":328},"export",{"type":33,"tag":236,"props":330,"children":331},{"style":253},[332],{"type":38,"value":333}," function",{"type":33,"tag":236,"props":335,"children":337},{"style":336},"--shiki-default:#B392F0",[338],{"type":38,"value":339}," ProductCard",{"type":33,"tag":236,"props":341,"children":342},{"style":259},[343],{"type":38,"value":344},"({",{"type":33,"tag":236,"props":346,"children":348},{"style":347},"--shiki-default:#FFAB70",[349],{"type":38,"value":350},"product",{"type":33,"tag":236,"props":352,"children":353},{"style":259},[354],{"type":38,"value":355},"}",{"type":33,"tag":236,"props":357,"children":358},{"style":253},[359],{"type":38,"value":360},":",{"type":33,"tag":236,"props":362,"children":363},{"style":259},[364],{"type":38,"value":365}," {",{"type":33,"tag":236,"props":367,"children":368},{"style":347},[369],{"type":38,"value":350},{"type":33,"tag":236,"props":371,"children":372},{"style":253},[373],{"type":38,"value":360},{"type":33,"tag":236,"props":375,"children":376},{"style":336},[377],{"type":38,"value":378}," Product",{"type":33,"tag":236,"props":380,"children":381},{"style":259},[382],{"type":38,"value":383},"}) {\n",{"type":33,"tag":236,"props":385,"children":387},{"class":238,"line":386},6,[388,393],{"type":33,"tag":236,"props":389,"children":390},{"style":253},[391],{"type":38,"value":392},"  return",{"type":33,"tag":236,"props":394,"children":395},{"style":259},[396],{"type":38,"value":397}," (\n",{"type":33,"tag":236,"props":399,"children":401},{"class":238,"line":400},7,[402,407,413,418,423,428],{"type":33,"tag":236,"props":403,"children":404},{"style":259},[405],{"type":38,"value":406},"    \u003C",{"type":33,"tag":236,"props":408,"children":410},{"style":409},"--shiki-default:#85E89D",[411],{"type":38,"value":412},"div",{"type":33,"tag":236,"props":414,"children":415},{"style":336},[416],{"type":38,"value":417}," className",{"type":33,"tag":236,"props":419,"children":420},{"style":253},[421],{"type":38,"value":422},"=",{"type":33,"tag":236,"props":424,"children":425},{"style":270},[426],{"type":38,"value":427},"\"product-card\"",{"type":33,"tag":236,"props":429,"children":430},{"style":259},[431],{"type":38,"value":432},">\n",{"type":33,"tag":236,"props":434,"children":436},{"class":238,"line":435},8,[437,442,448,453,457,462,467,471,476],{"type":33,"tag":236,"props":438,"children":439},{"style":259},[440],{"type":38,"value":441},"      \u003C",{"type":33,"tag":236,"props":443,"children":445},{"style":444},"--shiki-default:#79B8FF",[446],{"type":38,"value":447},"Image",{"type":33,"tag":236,"props":449,"children":450},{"style":336},[451],{"type":38,"value":452}," data",{"type":33,"tag":236,"props":454,"children":455},{"style":253},[456],{"type":38,"value":422},{"type":33,"tag":236,"props":458,"children":459},{"style":259},[460],{"type":38,"value":461},"{product.featuredImage} ",{"type":33,"tag":236,"props":463,"children":464},{"style":336},[465],{"type":38,"value":466},"sizes",{"type":33,"tag":236,"props":468,"children":469},{"style":253},[470],{"type":38,"value":422},{"type":33,"tag":236,"props":472,"children":473},{"style":270},[474],{"type":38,"value":475},"\"(min-width: 768px) 33vw, 100vw\"",{"type":33,"tag":236,"props":477,"children":478},{"style":259},[479],{"type":38,"value":480}," \u002F>\n",{"type":33,"tag":236,"props":482,"children":483},{"class":238,"line":27},[484,488,492,497,501],{"type":33,"tag":236,"props":485,"children":486},{"style":259},[487],{"type":38,"value":441},{"type":33,"tag":236,"props":489,"children":490},{"style":409},[491],{"type":38,"value":128},{"type":33,"tag":236,"props":493,"children":494},{"style":259},[495],{"type":38,"value":496},">{product.title}\u003C\u002F",{"type":33,"tag":236,"props":498,"children":499},{"style":409},[500],{"type":38,"value":128},{"type":33,"tag":236,"props":502,"children":503},{"style":259},[504],{"type":38,"value":432},{"type":33,"tag":236,"props":506,"children":508},{"class":238,"line":507},10,[509,513,518,522,526],{"type":33,"tag":236,"props":510,"children":511},{"style":259},[512],{"type":38,"value":441},{"type":33,"tag":236,"props":514,"children":515},{"style":444},[516],{"type":38,"value":517},"Money",{"type":33,"tag":236,"props":519,"children":520},{"style":336},[521],{"type":38,"value":452},{"type":33,"tag":236,"props":523,"children":524},{"style":253},[525],{"type":38,"value":422},{"type":33,"tag":236,"props":527,"children":528},{"style":259},[529],{"type":38,"value":530},"{product.priceRange.minVariantPrice} \u002F>\n",{"type":33,"tag":236,"props":532,"children":534},{"class":238,"line":533},11,[535,540,544],{"type":33,"tag":236,"props":536,"children":537},{"style":259},[538],{"type":38,"value":539},"    \u003C\u002F",{"type":33,"tag":236,"props":541,"children":542},{"style":409},[543],{"type":38,"value":412},{"type":33,"tag":236,"props":545,"children":546},{"style":259},[547],{"type":38,"value":432},{"type":33,"tag":236,"props":549,"children":551},{"class":238,"line":550},12,[552],{"type":33,"tag":236,"props":553,"children":554},{"style":259},[555],{"type":38,"value":556},"  );\n",{"type":33,"tag":236,"props":558,"children":560},{"class":238,"line":559},13,[561],{"type":33,"tag":236,"props":562,"children":563},{"style":259},[564],{"type":38,"value":565},"}\n",{"type":33,"tag":34,"props":567,"children":568},{},[569],{"type":38,"value":570},"Lo stesso component in Liquid:",{"type":33,"tag":226,"props":572,"children":575},{"className":573,"code":574,"language":25,"meta":17,"style":17},"language-liquid shiki shiki-themes github-dark","{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n\u003Cdiv class=\"product-card\">\n  {{ product.featured_image | image_url: width: 800 | image_tag }}\n  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[576],{"type":33,"tag":90,"props":577,"children":578},{"__ignoreMap":17},[579,587,595,603,611,619],{"type":33,"tag":236,"props":580,"children":581},{"class":238,"line":239},[582],{"type":33,"tag":236,"props":583,"children":584},{},[585],{"type":38,"value":586},"{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n",{"type":33,"tag":236,"props":588,"children":589},{"class":238,"line":249},[590],{"type":33,"tag":236,"props":591,"children":592},{},[593],{"type":38,"value":594},"\u003Cdiv class=\"product-card\">\n",{"type":33,"tag":236,"props":596,"children":597},{"class":238,"line":281},[598],{"type":33,"tag":236,"props":599,"children":600},{},[601],{"type":38,"value":602},"  {{ product.featured_image | image_url: width: 800 | image_tag }}\n",{"type":33,"tag":236,"props":604,"children":605},{"class":238,"line":312},[606],{"type":33,"tag":236,"props":607,"children":608},{},[609],{"type":38,"value":610},"  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n",{"type":33,"tag":236,"props":612,"children":613},{"class":238,"line":322},[614],{"type":33,"tag":236,"props":615,"children":616},{},[617],{"type":38,"value":618},"  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n",{"type":33,"tag":236,"props":620,"children":621},{"class":238,"line":386},[622],{"type":33,"tag":236,"props":623,"children":624},{},[625],{"type":38,"value":626},"\u003C\u002Fdiv>\n",{"type":33,"tag":34,"props":628,"children":629},{},[630],{"type":38,"value":631},"La differenza non è di syntax — in Hydrogen importi questo component e lo riusi, hai type safety con PropTypes, lo documenti in Storybook. In Liquid, ogni volta includi lo snippet e passi le variable — refactorare è difficile.",{"type":33,"tag":41,"props":633,"children":635},{"id":634},"migration-cost-calcolo-in-ore",[636],{"type":38,"value":637},"Migration Cost: Calcolo in Ore",{"type":33,"tag":34,"props":639,"children":640},{},[641],{"type":38,"value":642},"Quando migri un sito e-commerce, tre costi emergono:",{"type":33,"tag":140,"props":644,"children":645},{},[646,656,666],{"type":33,"tag":144,"props":647,"children":648},{},[649,654],{"type":33,"tag":56,"props":650,"children":651},{},[652],{"type":38,"value":653},"Template migration:",{"type":38,"value":655}," da Liquid a JSX",{"type":33,"tag":144,"props":657,"children":658},{},[659,664],{"type":33,"tag":56,"props":660,"children":661},{},[662],{"type":38,"value":663},"Data fetching refactor:",{"type":38,"value":665}," da theme a Storefront API query",{"type":33,"tag":144,"props":667,"children":668},{},[669,674],{"type":33,"tag":56,"props":670,"children":671},{},[672],{"type":38,"value":673},"Third-party integration:",{"type":38,"value":675}," pixel, analytics, widget di review",{"type":33,"tag":34,"props":677,"children":678},{},[679],{"type":38,"value":680},"I nostri numeri reali:",{"type":33,"tag":682,"props":683,"children":684},"table",{},[685,709],{"type":33,"tag":686,"props":687,"children":688},"thead",{},[689],{"type":33,"tag":690,"props":691,"children":692},"tr",{},[693,699,704],{"type":33,"tag":694,"props":695,"children":696},"th",{},[697],{"type":38,"value":698},"Metrica",{"type":33,"tag":694,"props":700,"children":701},{},[702],{"type":38,"value":703},"Sito 50 pagine",{"type":33,"tag":694,"props":705,"children":706},{},[707],{"type":38,"value":708},"Sito 200 pagine",{"type":33,"tag":710,"props":711,"children":712},"tbody",{},[713,732,749,767],{"type":33,"tag":690,"props":714,"children":715},{},[716,722,727],{"type":33,"tag":717,"props":718,"children":719},"td",{},[720],{"type":38,"value":721},"Ore dev (migration)",{"type":33,"tag":717,"props":723,"children":724},{},[725],{"type":38,"value":726},"120-180 ore",{"type":33,"tag":717,"props":728,"children":729},{},[730],{"type":38,"value":731},"400-600 ore",{"type":33,"tag":690,"props":733,"children":734},{},[735,740,745],{"type":33,"tag":717,"props":736,"children":737},{},[738],{"type":38,"value":739},"Ore QA",{"type":33,"tag":717,"props":741,"children":742},{},[743],{"type":38,"value":744},"40-60 ore",{"type":33,"tag":717,"props":746,"children":747},{},[748],{"type":38,"value":726},{"type":33,"tag":690,"props":750,"children":751},{},[752,757,762],{"type":33,"tag":717,"props":753,"children":754},{},[755],{"type":38,"value":756},"Downtime",{"type":33,"tag":717,"props":758,"children":759},{},[760],{"type":38,"value":761},"0 (deploy su staging)",{"type":33,"tag":717,"props":763,"children":764},{},[765],{"type":38,"value":766},"0",{"type":33,"tag":690,"props":768,"children":769},{},[770,775,780],{"type":33,"tag":717,"props":771,"children":772},{},[773],{"type":38,"value":774},"Rischio",{"type":33,"tag":717,"props":776,"children":777},{},[778],{"type":38,"value":779},"Basso",{"type":33,"tag":717,"props":781,"children":782},{},[783],{"type":38,"value":784},"Medio (controllo URL SEO)",{"type":33,"tag":34,"props":786,"children":787},{},[788],{"type":38,"value":789},"Il costo maggiore è il cambio di skill set del team. Un developer Liquid non sa scrivere Hydrogen — assumi un frontend developer React o educhi il team. Differenziale di stipendio medio: Liquid dev €35-50k\u002Fanno, React dev €60-85k\u002Fanno.",{"type":33,"tag":128,"props":791,"children":793},{"id":792},"storefront-api-query-latency",[794],{"type":38,"value":795},"Storefront API Query Latency",{"type":33,"tag":34,"props":797,"children":798},{},[799],{"type":38,"value":800},"Hydrogen fa query GraphQL a Shopify Storefront API. In Liquid l'accesso ai dati è gratuito (stessa app monolitica), in Hydrogen c'è un network hop. Esempio di query:",{"type":33,"tag":226,"props":802,"children":806},{"className":803,"code":804,"language":805,"meta":17,"style":17},"language-graphql shiki shiki-themes github-dark","query ProductPage($handle: String!) {\n  product(handle: $handle) {\n    id\n    title\n    description\n    priceRange {\n      minVariantPrice { amount currencyCode }\n    }\n    images(first: 10) {\n      nodes { url altText }\n    }\n  }\n}\n","graphql",[807],{"type":33,"tag":90,"props":808,"children":809},{"__ignoreMap":17},[810,818,826,834,842,850,858,866,874,882,890,897,905],{"type":33,"tag":236,"props":811,"children":812},{"class":238,"line":239},[813],{"type":33,"tag":236,"props":814,"children":815},{},[816],{"type":38,"value":817},"query ProductPage($handle: String!) {\n",{"type":33,"tag":236,"props":819,"children":820},{"class":238,"line":249},[821],{"type":33,"tag":236,"props":822,"children":823},{},[824],{"type":38,"value":825},"  product(handle: $handle) {\n",{"type":33,"tag":236,"props":827,"children":828},{"class":238,"line":281},[829],{"type":33,"tag":236,"props":830,"children":831},{},[832],{"type":38,"value":833},"    id\n",{"type":33,"tag":236,"props":835,"children":836},{"class":238,"line":312},[837],{"type":33,"tag":236,"props":838,"children":839},{},[840],{"type":38,"value":841},"    title\n",{"type":33,"tag":236,"props":843,"children":844},{"class":238,"line":322},[845],{"type":33,"tag":236,"props":846,"children":847},{},[848],{"type":38,"value":849},"    description\n",{"type":33,"tag":236,"props":851,"children":852},{"class":238,"line":386},[853],{"type":33,"tag":236,"props":854,"children":855},{},[856],{"type":38,"value":857},"    priceRange {\n",{"type":33,"tag":236,"props":859,"children":860},{"class":238,"line":400},[861],{"type":33,"tag":236,"props":862,"children":863},{},[864],{"type":38,"value":865},"      minVariantPrice { amount currencyCode }\n",{"type":33,"tag":236,"props":867,"children":868},{"class":238,"line":435},[869],{"type":33,"tag":236,"props":870,"children":871},{},[872],{"type":38,"value":873},"    }\n",{"type":33,"tag":236,"props":875,"children":876},{"class":238,"line":27},[877],{"type":33,"tag":236,"props":878,"children":879},{},[880],{"type":38,"value":881},"    images(first: 10) {\n",{"type":33,"tag":236,"props":883,"children":884},{"class":238,"line":507},[885],{"type":33,"tag":236,"props":886,"children":887},{},[888],{"type":38,"value":889},"      nodes { url altText }\n",{"type":33,"tag":236,"props":891,"children":892},{"class":238,"line":533},[893],{"type":33,"tag":236,"props":894,"children":895},{},[896],{"type":38,"value":873},{"type":33,"tag":236,"props":898,"children":899},{"class":238,"line":550},[900],{"type":33,"tag":236,"props":901,"children":902},{},[903],{"type":38,"value":904},"  }\n",{"type":33,"tag":236,"props":906,"children":907},{"class":238,"line":559},[908],{"type":33,"tag":236,"props":909,"children":910},{},[911],{"type":38,"value":565},{"type":33,"tag":34,"props":913,"children":914},{},[915,917,922],{"type":38,"value":916},"Questa query va dall'edge Oxygen al backend Shopify — latenza media ",{"type":33,"tag":56,"props":918,"children":919},{},[920],{"type":38,"value":921},"80-120ms",{"type":38,"value":923},". In Liquid questa latenza non esiste perché i dati sono in memoria. Ma con la strategia di cache di Hydrogen recuperi:",{"type":33,"tag":226,"props":925,"children":927},{"className":228,"code":926,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const {product} = await context.storefront.query(PRODUCT_QUERY, {\n    variables: {handle: params.handle},\n    cache: context.storefront.CacheLong(), \u002F\u002F 1 ora di cache\n  });\n  return json({product});\n}\n",[928],{"type":33,"tag":90,"props":929,"children":930},{"__ignoreMap":17},[931,939,997,1052,1060,1083,1091,1108],{"type":33,"tag":236,"props":932,"children":933},{"class":238,"line":239},[934],{"type":33,"tag":236,"props":935,"children":936},{"style":243},[937],{"type":38,"value":938},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":33,"tag":236,"props":940,"children":941},{"class":238,"line":249},[942,946,951,955,960,964,969,974,979,983,987,992],{"type":33,"tag":236,"props":943,"children":944},{"style":253},[945],{"type":38,"value":328},{"type":33,"tag":236,"props":947,"children":948},{"style":253},[949],{"type":38,"value":950}," async",{"type":33,"tag":236,"props":952,"children":953},{"style":253},[954],{"type":38,"value":333},{"type":33,"tag":236,"props":956,"children":957},{"style":336},[958],{"type":38,"value":959}," loader",{"type":33,"tag":236,"props":961,"children":962},{"style":259},[963],{"type":38,"value":344},{"type":33,"tag":236,"props":965,"children":966},{"style":347},[967],{"type":38,"value":968},"params",{"type":33,"tag":236,"props":970,"children":971},{"style":259},[972],{"type":38,"value":973},", ",{"type":33,"tag":236,"props":975,"children":976},{"style":347},[977],{"type":38,"value":978},"context",{"type":33,"tag":236,"props":980,"children":981},{"style":259},[982],{"type":38,"value":355},{"type":33,"tag":236,"props":984,"children":985},{"style":253},[986],{"type":38,"value":360},{"type":33,"tag":236,"props":988,"children":989},{"style":336},[990],{"type":38,"value":991}," LoaderFunctionArgs",{"type":33,"tag":236,"props":993,"children":994},{"style":259},[995],{"type":38,"value":996},") {\n",{"type":33,"tag":236,"props":998,"children":999},{"class":238,"line":281},[1000,1005,1009,1013,1018,1022,1027,1032,1037,1042,1047],{"type":33,"tag":236,"props":1001,"children":1002},{"style":253},[1003],{"type":38,"value":1004},"  const",{"type":33,"tag":236,"props":1006,"children":1007},{"style":259},[1008],{"type":38,"value":365},{"type":33,"tag":236,"props":1010,"children":1011},{"style":444},[1012],{"type":38,"value":350},{"type":33,"tag":236,"props":1014,"children":1015},{"style":259},[1016],{"type":38,"value":1017},"} ",{"type":33,"tag":236,"props":1019,"children":1020},{"style":253},[1021],{"type":38,"value":422},{"type":33,"tag":236,"props":1023,"children":1024},{"style":253},[1025],{"type":38,"value":1026}," await",{"type":33,"tag":236,"props":1028,"children":1029},{"style":259},[1030],{"type":38,"value":1031}," context.storefront.",{"type":33,"tag":236,"props":1033,"children":1034},{"style":336},[1035],{"type":38,"value":1036},"query",{"type":33,"tag":236,"props":1038,"children":1039},{"style":259},[1040],{"type":38,"value":1041},"(",{"type":33,"tag":236,"props":1043,"children":1044},{"style":444},[1045],{"type":38,"value":1046},"PRODUCT_QUERY",{"type":33,"tag":236,"props":1048,"children":1049},{"style":259},[1050],{"type":38,"value":1051},", {\n",{"type":33,"tag":236,"props":1053,"children":1054},{"class":238,"line":312},[1055],{"type":33,"tag":236,"props":1056,"children":1057},{"style":259},[1058],{"type":38,"value":1059},"    variables: {handle: params.handle},\n",{"type":33,"tag":236,"props":1061,"children":1062},{"class":238,"line":322},[1063,1068,1073,1078],{"type":33,"tag":236,"props":1064,"children":1065},{"style":259},[1066],{"type":38,"value":1067},"    cache: context.storefront.",{"type":33,"tag":236,"props":1069,"children":1070},{"style":336},[1071],{"type":38,"value":1072},"CacheLong",{"type":33,"tag":236,"props":1074,"children":1075},{"style":259},[1076],{"type":38,"value":1077},"(), ",{"type":33,"tag":236,"props":1079,"children":1080},{"style":243},[1081],{"type":38,"value":1082},"\u002F\u002F 1 ora di cache\n",{"type":33,"tag":236,"props":1084,"children":1085},{"class":238,"line":386},[1086],{"type":33,"tag":236,"props":1087,"children":1088},{"style":259},[1089],{"type":38,"value":1090},"  });\n",{"type":33,"tag":236,"props":1092,"children":1093},{"class":238,"line":400},[1094,1098,1103],{"type":33,"tag":236,"props":1095,"children":1096},{"style":253},[1097],{"type":38,"value":392},{"type":33,"tag":236,"props":1099,"children":1100},{"style":336},[1101],{"type":38,"value":1102}," json",{"type":33,"tag":236,"props":1104,"children":1105},{"style":259},[1106],{"type":38,"value":1107},"({product});\n",{"type":33,"tag":236,"props":1109,"children":1110},{"class":238,"line":435},[1111],{"type":33,"tag":236,"props":1112,"children":1113},{"style":259},[1114],{"type":38,"value":565},{"type":33,"tag":34,"props":1116,"children":1117},{},[1118,1120,1126],{"type":38,"value":1119},"La strategia ",{"type":33,"tag":90,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":38,"value":1125},"CacheLong()",{"type":38,"value":1127}," cache la stessa query sull'edge per 1 ora — alla seconda richiesta la latenza scende sotto i 10ms.",{"type":33,"tag":41,"props":1129,"children":1131},{"id":1130},"confronto-developer-velocity",[1132],{"type":38,"value":1133},"Confronto Developer Velocity",{"type":33,"tag":34,"props":1135,"children":1136},{},[1137],{"type":38,"value":1138},"Implementiamo la stessa feature in entrambe le architetture: \"Mostra un widget di upselling dinamico per il prodotto aggiunto al carrello\".",{"type":33,"tag":34,"props":1140,"children":1141},{},[1142],{"type":33,"tag":56,"props":1143,"children":1144},{},[1145],{"type":38,"value":1146},"Approccio Liquid:",{"type":33,"tag":140,"props":1148,"children":1149},{},[1150,1155,1160,1165,1170],{"type":33,"tag":144,"props":1151,"children":1152},{},[1153],{"type":38,"value":1154},"Scrivi una custom app (Shopify App Bridge)",{"type":33,"tag":144,"props":1156,"children":1157},{},[1158],{"type":38,"value":1159},"Aggiungi l'app extension come snippet",{"type":33,"tag":144,"props":1161,"children":1162},{},[1163],{"type":38,"value":1164},"Fai una richiesta Ajax sulla pagina del carrello",{"type":33,"tag":144,"props":1166,"children":1167},{},[1168],{"type":38,"value":1169},"Collega il recommendation engine API",{"type":33,"tag":144,"props":1171,"children":1172},{},[1173],{"type":38,"value":1174},"Renderizza la response nel DOM",{"type":33,"tag":34,"props":1176,"children":1177},{},[1178,1180,1185],{"type":38,"value":1179},"Tempo: ",{"type":33,"tag":56,"props":1181,"children":1182},{},[1183],{"type":38,"value":1184},"3-4 giorni",{"type":38,"value":1186}," (test incluso)",{"type":33,"tag":34,"props":1188,"children":1189},{},[1190],{"type":33,"tag":56,"props":1191,"children":1192},{},[1193],{"type":38,"value":1194},"Approccio Hydrogen:",{"type":33,"tag":140,"props":1196,"children":1197},{},[1198,1203,1214,1219],{"type":33,"tag":144,"props":1199,"children":1200},{},[1201],{"type":38,"value":1202},"Scrivi un componente React (CartUpsell.tsx)",{"type":33,"tag":144,"props":1204,"children":1205},{},[1206,1208],{"type":38,"value":1207},"Estrai i dati del carrello con l'hook ",{"type":33,"tag":90,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":38,"value":1213},"useCart",{"type":33,"tag":144,"props":1215,"children":1216},{},[1217],{"type":38,"value":1218},"Query l'API di recommendation (React Query)",{"type":33,"tag":144,"props":1220,"children":1221},{},[1222],{"type":38,"value":1223},"Importa il componente nella route del carrello",{"type":33,"tag":34,"props":1225,"children":1226},{},[1227,1228],{"type":38,"value":1179},{"type":33,"tag":56,"props":1229,"children":1230},{},[1231],{"type":38,"value":1232},"4-6 ore",{"type":33,"tag":34,"props":1234,"children":1235},{},[1236],{"type":38,"value":1237},"Dove sta la differenza: in Hydrogen hai type safety TypeScript, il componente è testabile, lo sviluppi isolato in Storybook. In Liquid ogni cambio viene testato manualmente da theme preview.",{"type":33,"tag":34,"props":1239,"children":1240},{},[1241,1243,1252],{"type":38,"value":1242},"Numero reale da un progetto Roibase: una feature di personalization che ha richiesto 1 sprint (2 settimane) in Liquid è stata completata in 3 giorni con Hydrogen — questo è l'impatto di developer velocity dell'architettura ",{"type":33,"tag":1244,"props":1245,"children":1249},"a",{"href":1246,"rel":1247},"https:\u002F\u002Fwww.roibase.com.tr\u002Fit\u002Fheadless",[1248],"nofollow",[1250],{"type":38,"value":1251},"headless commerce",{"type":38,"value":1253},".",{"type":33,"tag":41,"props":1255,"children":1257},{"id":1256},"web-performance-differenza-core-web-vitals",[1258],{"type":38,"value":1259},"Web Performance: Differenza Core Web Vitals",{"type":33,"tag":34,"props":1261,"children":1262},{},[1263,1265,1270,1272,1277],{"type":38,"value":1264},"Nel rapporto 2025 Q1 di Shopify: theme Liquid medio LCP ",{"type":33,"tag":56,"props":1266,"children":1267},{},[1268],{"type":38,"value":1269},"2.4 secondi",{"type":38,"value":1271},", sito Hydrogen LCP ",{"type":33,"tag":56,"props":1273,"children":1274},{},[1275],{"type":38,"value":1276},"1.8 secondi",{"type":38,"value":1278}," (mobile, 4G). I nostri dati production:",{"type":33,"tag":682,"props":1280,"children":1281},{},[1282,1302],{"type":33,"tag":686,"props":1283,"children":1284},{},[1285],{"type":33,"tag":690,"props":1286,"children":1287},{},[1288,1292,1297],{"type":33,"tag":694,"props":1289,"children":1290},{},[1291],{"type":38,"value":698},{"type":33,"tag":694,"props":1293,"children":1294},{},[1295],{"type":38,"value":1296},"Liquid (theme)",{"type":33,"tag":694,"props":1298,"children":1299},{},[1300],{"type":38,"value":1301},"Hydrogen",{"type":33,"tag":710,"props":1303,"children":1304},{},[1305,1323,1341,1359],{"type":33,"tag":690,"props":1306,"children":1307},{},[1308,1313,1318],{"type":33,"tag":717,"props":1309,"children":1310},{},[1311],{"type":38,"value":1312},"TTFB",{"type":33,"tag":717,"props":1314,"children":1315},{},[1316],{"type":38,"value":1317},"210ms",{"type":33,"tag":717,"props":1319,"children":1320},{},[1321],{"type":38,"value":1322},"130ms",{"type":33,"tag":690,"props":1324,"children":1325},{},[1326,1331,1336],{"type":33,"tag":717,"props":1327,"children":1328},{},[1329],{"type":38,"value":1330},"LCP",{"type":33,"tag":717,"props":1332,"children":1333},{},[1334],{"type":38,"value":1335},"2.6s",{"type":33,"tag":717,"props":1337,"children":1338},{},[1339],{"type":38,"value":1340},"1.9s",{"type":33,"tag":690,"props":1342,"children":1343},{},[1344,1349,1354],{"type":33,"tag":717,"props":1345,"children":1346},{},[1347],{"type":38,"value":1348},"TBT",{"type":33,"tag":717,"props":1350,"children":1351},{},[1352],{"type":38,"value":1353},"420ms",{"type":33,"tag":717,"props":1355,"children":1356},{},[1357],{"type":38,"value":1358},"180ms",{"type":33,"tag":690,"props":1360,"children":1361},{},[1362,1367,1372],{"type":33,"tag":717,"props":1363,"children":1364},{},[1365],{"type":38,"value":1366},"CLS",{"type":33,"tag":717,"props":1368,"children":1369},{},[1370],{"type":38,"value":1371},"0.08",{"type":33,"tag":717,"props":1373,"children":1374},{},[1375],{"type":38,"value":1376},"0.02",{"type":33,"tag":34,"props":1378,"children":1379},{},[1380],{"type":38,"value":1381},"Il vantaggio di performance di Hydrogen viene da tre punti:",{"type":33,"tag":140,"props":1383,"children":1384},{},[1385,1395,1405],{"type":33,"tag":144,"props":1386,"children":1387},{},[1388,1393],{"type":33,"tag":56,"props":1389,"children":1390},{},[1391],{"type":38,"value":1392},"Edge SSR:",{"type":38,"value":1394}," La rete edge Oxygen di Shopify è su PoP globali come Cloudflare — ogni edge renderizza HTML più vicino all'utente",{"type":33,"tag":144,"props":1396,"children":1397},{},[1398,1403],{"type":33,"tag":56,"props":1399,"children":1400},{},[1401],{"type":38,"value":1402},"Streaming SSR:",{"type":38,"value":1404}," Il supporto di streaming di Remix renderizza il contenuto above-fold subito, lazy load del below-fold",{"type":33,"tag":144,"props":1406,"children":1407},{},[1408,1413],{"type":33,"tag":56,"props":1409,"children":1410},{},[1411],{"type":38,"value":1412},"Bundle ottimizzato:",{"type":38,"value":1414}," Vite build con code splitting automatico, tree shaking, dynamic import — il bundle JS è il 40% più piccolo",{"type":33,"tag":34,"props":1416,"children":1417},{},[1418],{"type":38,"value":1419},"Esempio: product grid lazy loading (Hydrogen):",{"type":33,"tag":226,"props":1421,"children":1423},{"className":228,"code":1422,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\nimport {Await} from '@remix-run\u002Freact';\nimport {Suspense} from 'react';\n\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const productsPromise = context.storefront.query(PRODUCTS_QUERY, {\n    variables: {handle: params.handle},\n  });\n  \n  return defer({products: productsPromise}); \u002F\u002F Stream promise\n}\n\nexport default function Collection() {\n  const {products} = useLoaderData\u003Ctypeof loader>();\n  \n  return (\n    \u003CSuspense fallback={\u003CProductGridSkeleton \u002F>}>\n      \u003CAwait resolve={products}>\n        {(data) => \u003CProductGrid products={data.products} \u002F>}\n      \u003C\u002FAwait>\n    \u003C\u002FSuspense>\n  );\n}\n",[1424],{"type":33,"tag":90,"props":1425,"children":1426},{"__ignoreMap":17},[1427,1435,1460,1485,1492,1543,1581,1588,1595,1603,1625,1632,1639,1665,1710,1718,1730,1767,1794,1842,1859,1875,1883],{"type":33,"tag":236,"props":1428,"children":1429},{"class":238,"line":239},[1430],{"type":33,"tag":236,"props":1431,"children":1432},{"style":243},[1433],{"type":38,"value":1434},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\n",{"type":33,"tag":236,"props":1436,"children":1437},{"class":238,"line":249},[1438,1442,1447,1451,1456],{"type":33,"tag":236,"props":1439,"children":1440},{"style":253},[1441],{"type":38,"value":256},{"type":33,"tag":236,"props":1443,"children":1444},{"style":259},[1445],{"type":38,"value":1446}," {Await} ",{"type":33,"tag":236,"props":1448,"children":1449},{"style":253},[1450],{"type":38,"value":267},{"type":33,"tag":236,"props":1452,"children":1453},{"style":270},[1454],{"type":38,"value":1455}," '@remix-run\u002Freact'",{"type":33,"tag":236,"props":1457,"children":1458},{"style":259},[1459],{"type":38,"value":278},{"type":33,"tag":236,"props":1461,"children":1462},{"class":238,"line":281},[1463,1467,1472,1476,1481],{"type":33,"tag":236,"props":1464,"children":1465},{"style":253},[1466],{"type":38,"value":256},{"type":33,"tag":236,"props":1468,"children":1469},{"style":259},[1470],{"type":38,"value":1471}," {Suspense} ",{"type":33,"tag":236,"props":1473,"children":1474},{"style":253},[1475],{"type":38,"value":267},{"type":33,"tag":236,"props":1477,"children":1478},{"style":270},[1479],{"type":38,"value":1480}," 'react'",{"type":33,"tag":236,"props":1482,"children":1483},{"style":259},[1484],{"type":38,"value":278},{"type":33,"tag":236,"props":1486,"children":1487},{"class":238,"line":312},[1488],{"type":33,"tag":236,"props":1489,"children":1490},{"emptyLinePlaceholder":316},[1491],{"type":38,"value":319},{"type":33,"tag":236,"props":1493,"children":1494},{"class":238,"line":322},[1495,1499,1503,1507,1511,1515,1519,1523,1527,1531,1535,1539],{"type":33,"tag":236,"props":1496,"children":1497},{"style":253},[1498],{"type":38,"value":328},{"type":33,"tag":236,"props":1500,"children":1501},{"style":253},[1502],{"type":38,"value":950},{"type":33,"tag":236,"props":1504,"children":1505},{"style":253},[1506],{"type":38,"value":333},{"type":33,"tag":236,"props":1508,"children":1509},{"style":336},[1510],{"type":38,"value":959},{"type":33,"tag":236,"props":1512,"children":1513},{"style":259},[1514],{"type":38,"value":344},{"type":33,"tag":236,"props":1516,"children":1517},{"style":347},[1518],{"type":38,"value":968},{"type":33,"tag":236,"props":1520,"children":1521},{"style":259},[1522],{"type":38,"value":973},{"type":33,"tag":236,"props":1524,"children":1525},{"style":347},[1526],{"type":38,"value":978},{"type":33,"tag":236,"props":1528,"children":1529},{"style":259},[1530],{"type":38,"value":355},{"type":33,"tag":236,"props":1532,"children":1533},{"style":253},[1534],{"type":38,"value":360},{"type":33,"tag":236,"props":1536,"children":1537},{"style":336},[1538],{"type":38,"value":991},{"type":33,"tag":236,"props":1540,"children":1541},{"style":259},[1542],{"type":38,"value":996},{"type":33,"tag":236,"props":1544,"children":1545},{"class":238,"line":386},[1546,1550,1555,1560,1564,1568,1572,1577],{"type":33,"tag":236,"props":1547,"children":1548},{"style":253},[1549],{"type":38,"value":1004},{"type":33,"tag":236,"props":1551,"children":1552},{"style":444},[1553],{"type":38,"value":1554}," productsPromise",{"type":33,"tag":236,"props":1556,"children":1557},{"style":253},[1558],{"type":38,"value":1559}," =",{"type":33,"tag":236,"props":1561,"children":1562},{"style":259},[1563],{"type":38,"value":1031},{"type":33,"tag":236,"props":1565,"children":1566},{"style":336},[1567],{"type":38,"value":1036},{"type":33,"tag":236,"props":1569,"children":1570},{"style":259},[1571],{"type":38,"value":1041},{"type":33,"tag":236,"props":1573,"children":1574},{"style":444},[1575],{"type":38,"value":1576},"PRODUCTS_QUERY",{"type":33,"tag":236,"props":1578,"children":1579},{"style":259},[1580],{"type":38,"value":1051},{"type":33,"tag":236,"props":1582,"children":1583},{"class":238,"line":400},[1584],{"type":33,"tag":236,"props":1585,"children":1586},{"style":259},[1587],{"type":38,"value":1059},{"type":33,"tag":236,"props":1589,"children":1590},{"class":238,"line":435},[1591],{"type":33,"tag":236,"props":1592,"children":1593},{"style":259},[1594],{"type":38,"value":1090},{"type":33,"tag":236,"props":1596,"children":1597},{"class":238,"line":27},[1598],{"type":33,"tag":236,"props":1599,"children":1600},{"style":259},[1601],{"type":38,"value":1602},"  \n",{"type":33,"tag":236,"props":1604,"children":1605},{"class":238,"line":507},[1606,1610,1615,1620],{"type":33,"tag":236,"props":1607,"children":1608},{"style":253},[1609],{"type":38,"value":392},{"type":33,"tag":236,"props":1611,"children":1612},{"style":336},[1613],{"type":38,"value":1614}," defer",{"type":33,"tag":236,"props":1616,"children":1617},{"style":259},[1618],{"type":38,"value":1619},"({products: productsPromise}); ",{"type":33,"tag":236,"props":1621,"children":1622},{"style":243},[1623],{"type":38,"value":1624},"\u002F\u002F Stream promise\n",{"type":33,"tag":236,"props":1626,"children":1627},{"class":238,"line":533},[1628],{"type":33,"tag":236,"props":1629,"children":1630},{"style":259},[1631],{"type":38,"value":565},{"type":33,"tag":236,"props":1633,"children":1634},{"class":238,"line":550},[1635],{"type":33,"tag":236,"props":1636,"children":1637},{"emptyLinePlaceholder":316},[1638],{"type":38,"value":319},{"type":33,"tag":236,"props":1640,"children":1641},{"class":238,"line":559},[1642,1646,1651,1655,1660],{"type":33,"tag":236,"props":1643,"children":1644},{"style":253},[1645],{"type":38,"value":328},{"type":33,"tag":236,"props":1647,"children":1648},{"style":253},[1649],{"type":38,"value":1650}," default",{"type":33,"tag":236,"props":1652,"children":1653},{"style":253},[1654],{"type":38,"value":333},{"type":33,"tag":236,"props":1656,"children":1657},{"style":336},[1658],{"type":38,"value":1659}," Collection",{"type":33,"tag":236,"props":1661,"children":1662},{"style":259},[1663],{"type":38,"value":1664},"() {\n",{"type":33,"tag":236,"props":1666,"children":1668},{"class":238,"line":1667},14,[1669,1673,1677,1682,1686,1690,1695,1700,1705],{"type":33,"tag":236,"props":1670,"children":1671},{"style":253},[1672],{"type":38,"value":1004},{"type":33,"tag":236,"props":1674,"children":1675},{"style":259},[1676],{"type":38,"value":365},{"type":33,"tag":236,"props":1678,"children":1679},{"style":444},[1680],{"type":38,"value":1681},"products",{"type":33,"tag":236,"props":1683,"children":1684},{"style":259},[1685],{"type":38,"value":1017},{"type":33,"tag":236,"props":1687,"children":1688},{"style":253},[1689],{"type":38,"value":422},{"type":33,"tag":236,"props":1691,"children":1692},{"style":336},[1693],{"type":38,"value":1694}," useLoaderData",{"type":33,"tag":236,"props":1696,"children":1697},{"style":259},[1698],{"type":38,"value":1699},"\u003C",{"type":33,"tag":236,"props":1701,"children":1702},{"style":253},[1703],{"type":38,"value":1704},"typeof",{"type":33,"tag":236,"props":1706,"children":1707},{"style":259},[1708],{"type":38,"value":1709}," loader>();\n",{"type":33,"tag":236,"props":1711,"children":1713},{"class":238,"line":1712},15,[1714],{"type":33,"tag":236,"props":1715,"children":1716},{"style":259},[1717],{"type":38,"value":1602},{"type":33,"tag":236,"props":1719,"children":1721},{"class":238,"line":1720},16,[1722,1726],{"type":33,"tag":236,"props":1723,"children":1724},{"style":253},[1725],{"type":38,"value":392},{"type":33,"tag":236,"props":1727,"children":1728},{"style":259},[1729],{"type":38,"value":397},{"type":33,"tag":236,"props":1731,"children":1733},{"class":238,"line":1732},17,[1734,1738,1743,1748,1752,1757,1762],{"type":33,"tag":236,"props":1735,"children":1736},{"style":259},[1737],{"type":38,"value":406},{"type":33,"tag":236,"props":1739,"children":1740},{"style":444},[1741],{"type":38,"value":1742},"Suspense",{"type":33,"tag":236,"props":1744,"children":1745},{"style":336},[1746],{"type":38,"value":1747}," fallback",{"type":33,"tag":236,"props":1749,"children":1750},{"style":253},[1751],{"type":38,"value":422},{"type":33,"tag":236,"props":1753,"children":1754},{"style":259},[1755],{"type":38,"value":1756},"{\u003C",{"type":33,"tag":236,"props":1758,"children":1759},{"style":444},[1760],{"type":38,"value":1761},"ProductGridSkeleton",{"type":33,"tag":236,"props":1763,"children":1764},{"style":259},[1765],{"type":38,"value":1766}," \u002F>}>\n",{"type":33,"tag":236,"props":1768,"children":1770},{"class":238,"line":1769},18,[1771,1775,1780,1785,1789],{"type":33,"tag":236,"props":1772,"children":1773},{"style":259},[1774],{"type":38,"value":441},{"type":33,"tag":236,"props":1776,"children":1777},{"style":444},[1778],{"type":38,"value":1779},"Await",{"type":33,"tag":236,"props":1781,"children":1782},{"style":336},[1783],{"type":38,"value":1784}," resolve",{"type":33,"tag":236,"props":1786,"children":1787},{"style":253},[1788],{"type":38,"value":422},{"type":33,"tag":236,"props":1790,"children":1791},{"style":259},[1792],{"type":38,"value":1793},"{products}>\n",{"type":33,"tag":236,"props":1795,"children":1797},{"class":238,"line":1796},19,[1798,1803,1808,1813,1818,1823,1828,1833,1837],{"type":33,"tag":236,"props":1799,"children":1800},{"style":259},[1801],{"type":38,"value":1802},"        {(",{"type":33,"tag":236,"props":1804,"children":1805},{"style":347},[1806],{"type":38,"value":1807},"data",{"type":33,"tag":236,"props":1809,"children":1810},{"style":259},[1811],{"type":38,"value":1812},") ",{"type":33,"tag":236,"props":1814,"children":1815},{"style":253},[1816],{"type":38,"value":1817},"=>",{"type":33,"tag":236,"props":1819,"children":1820},{"style":259},[1821],{"type":38,"value":1822}," \u003C",{"type":33,"tag":236,"props":1824,"children":1825},{"style":444},[1826],{"type":38,"value":1827},"ProductGrid",{"type":33,"tag":236,"props":1829,"children":1830},{"style":336},[1831],{"type":38,"value":1832}," products",{"type":33,"tag":236,"props":1834,"children":1835},{"style":253},[1836],{"type":38,"value":422},{"type":33,"tag":236,"props":1838,"children":1839},{"style":259},[1840],{"type":38,"value":1841},"{data.products} \u002F>}\n",{"type":33,"tag":236,"props":1843,"children":1845},{"class":238,"line":1844},20,[1846,1851,1855],{"type":33,"tag":236,"props":1847,"children":1848},{"style":259},[1849],{"type":38,"value":1850},"      \u003C\u002F",{"type":33,"tag":236,"props":1852,"children":1853},{"style":444},[1854],{"type":38,"value":1779},{"type":33,"tag":236,"props":1856,"children":1857},{"style":259},[1858],{"type":38,"value":432},{"type":33,"tag":236,"props":1860,"children":1862},{"class":238,"line":1861},21,[1863,1867,1871],{"type":33,"tag":236,"props":1864,"children":1865},{"style":259},[1866],{"type":38,"value":539},{"type":33,"tag":236,"props":1868,"children":1869},{"style":444},[1870],{"type":38,"value":1742},{"type":33,"tag":236,"props":1872,"children":1873},{"style":259},[1874],{"type":38,"value":432},{"type":33,"tag":236,"props":1876,"children":1878},{"class":238,"line":1877},22,[1879],{"type":33,"tag":236,"props":1880,"children":1881},{"style":259},[1882],{"type":38,"value":556},{"type":33,"tag":236,"props":1884,"children":1886},{"class":238,"line":1885},23,[1887],{"type":33,"tag":236,"props":1888,"children":1889},{"style":259},[1890],{"type":38,"value":565},{"type":33,"tag":34,"props":1892,"children":1893},{},[1894],{"type":38,"value":1895},"Questo pattern invia l'HTML above-fold subito e fa hydration sul client — il calo di LCP da 2.6s a 1.9s è per questo.",{"type":33,"tag":41,"props":1897,"children":1899},{"id":1898},"matrice-di-decisione-quando-scegliere-cosa",[1900],{"type":38,"value":1901},"Matrice di Decisione: Quando Scegliere Cosa",{"type":33,"tag":34,"props":1903,"children":1904},{},[1905],{"type":38,"value":1906},"Il nostro decision tree:",{"type":33,"tag":34,"props":1908,"children":1909},{},[1910],{"type":33,"tag":56,"props":1911,"children":1912},{},[1913],{"type":38,"value":1914},"Scegli Liquid se:",{"type":33,"tag":1916,"props":1917,"children":1918},"ul",{},[1919,1924,1929,1934],{"type":33,"tag":144,"props":1920,"children":1921},{},[1922],{"type":38,"value":1923},"GMV annuale \u003C€2M",{"type":33,"tag":144,"props":1925,"children":1926},{},[1927],{"type":38,"value":1928},"Numero di deploy mensili \u003C4",{"type":33,"tag":144,"props":1930,"children":1931},{},[1932],{"type":38,"value":1933},"Nessun bisogno di personalizzazione",{"type":33,"tag":144,"props":1935,"children":1936},{},[1937],{"type":38,"value":1938},"Il team conosce Shopify theme development",{"type":33,"tag":34,"props":1940,"children":1941},{},[1942],{"type":33,"tag":56,"props":1943,"children":1944},{},[1945],{"type":38,"value":1946},"Scegli Hydrogen se:",{"type":33,"tag":1916,"props":1948,"children":1949},{},[1950,1955,1960,1965],{"type":33,"tag":144,"props":1951,"children":1952},{},[1953],{"type":38,"value":1954},"GMV annuale >€5M",{"type":33,"tag":144,"props":1956,"children":1957},{},[1958],{"type":38,"value":1959},"2+ feature deploy alla settimana",{"type":33,"tag":144,"props":1961,"children":1962},{},[1963],{"type":38,"value":1964},"Hai bisogno di A\u002FB test, personalizzazione, integrazione headless CMS",{"type":33,"tag":144,"props":1966,"children":1967},{},[1968],{"type":38,"value":1969},"Puoi investire in uno stack frontend moderno",{"type":33,"tag":34,"props":1971,"children":1972},{},[1973],{"type":38,"value":1974},"Zona grigia (€2-5M GMV): guarda metriche come conversion rate, AOV, repeat purchase. Se la roadmap di CRO è aggressiva, migra a Hydrogen — la differenza di developer velocity restituisce ROI.",{"type":33,"tag":41,"props":1976,"children":1978},{"id":1977},"conclusione-accettare-i-trade-off",[1979],{"type":38,"value":1980},"Conclusione: Accettare i Trade-off",{"type":33,"tag":34,"props":1982,"children":1983},{},[1984],{"type":38,"value":1985},"Hydrogen è il 35-40% più veloce di Liquid (in TTFB, LCP), la developer velocity è 3-5x superiore, ma il costo di migration è 120-600 ore. Decidere di fare questo investimento dipende dai vostri obiettivi di operational velocity.",{"type":33,"tag":34,"props":1987,"children":1988},{},[1989],{"type":38,"value":1990},"Dalla nostra esperienza: un cliente e-commerce medio recupera l'ROI della migration Hydrogen in 6-9 mesi — la velocità di iterazione CRO cresce, il cycle time di A\u002FB test cala, l'integrazione di terze parti diventa più rapida. Se puntate a crescita rapida, la migrazione a Hydrogen è supportata dai numeri. Se gestite un catalogo statico, Liquid è sufficiente.",{"type":33,"tag":1992,"props":1993,"children":1994},"style",{},[1995],{"type":38,"value":1996},"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":17,"searchDepth":281,"depth":281,"links":1998},[1999,2002,2003,2006,2007,2008,2009],{"id":43,"depth":249,"text":46,"children":2000},[2001],{"id":130,"depth":281,"text":133},{"id":178,"depth":249,"text":181},{"id":634,"depth":249,"text":637,"children":2004},[2005],{"id":792,"depth":281,"text":795},{"id":1130,"depth":249,"text":1133},{"id":1256,"depth":249,"text":1259},{"id":1898,"depth":249,"text":1901},{"id":1977,"depth":249,"text":1980},"markdown","content:it:tech:shopify-hydrogen-vs-liquid-i-numeri-della-decisione.md","content","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-i-numeri-della-decisione.md","it\u002Ftech\u002Fshopify-hydrogen-vs-liquid-i-numeri-della-decisione","md",1785967479956]