[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fit\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva":13},{"i18nKey":4,"paths":5},"tech-005-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fcomposable-commerce-mach-produktion","\u002Fen\u002Ftech\u002Fcomposable-commerce-mach-production-reality","\u002Fes\u002Ftech\u002Fcomposable-commerce-realidad-produccion","\u002Ffr\u002Ftech\u002Fcommerce-composable-mach-realites-production","\u002Fit\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva","\u002Fru\u002Ftech\u002Fcomposable-commerce-realnost-production","\u002Ftr\u002Ftech\u002Fcomposable-commerce-mach-mimarisi-production-realitesi",{"_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":1156,"_id":1157,"_source":1158,"_file":1159,"_stem":1160,"_extension":1161},"tech",false,"","Composable Commerce: La Realtà di Produzione dell'Architettura MACH","BigCommerce, commercetools, Shopify Plus — quale flessibilità promette MACH e quali costi comporta in produzione? Cosa dovrai accettare?","2026-06-07",[21,22,23,24,25],"composable-commerce","architettura-mach","headless-commerce","shopify-plus","bigcommerce",9,"Roibase",{"type":29,"children":30,"toc":1144},"root",[31,39,46,51,62,72,82,88,93,103,113,120,766,771,777,782,791,800,810,816,821,831,849,859,865,1076,1082,1087,1097,1107,1117,1127,1133,1138],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Il composable commerce dal 2024 viene venduto come la \"nuova regola\" del mercato. I principi MACH (Microservizi, API-first, Cloud-native, Headless) dovrebbero sostituire le piattaforme monolitiche centrali. Ma in produzione le cose cambiano: il bundle Catalyst di BigCommerce pesa 850kB, l'integrazione minima di commercetools costa $120k, e le funzionalità composable di Shopify Plus arrivano con il disagio della migrazione Hydrogen 2.0. Prima di decidere, i tradeoff devono parlare con numeri, non promesse.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"il-costo-reale-della-promessa-mach",[44],{"type":37,"value":45},"Il Costo Reale della Promessa MACH",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Il nucleo della promessa del composable è la flessibilità: frontend, backend, payment, ricerca — ognuno indipendente, sostituibile quando necessario. Ma questa flessibilità si traduce in tre voci di costo.",{"type":32,"tag":33,"props":52,"children":53},{},[54,60],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Il primo costo: il tempo di integrazione iniziale.",{"type":37,"value":61}," Su piattaforme API-only come commercetools, costruisci l'intera esperienza dal frontend al checkout. MVP medio: 16-20 settimane. Lo stesso percorso su Shopify Plus in 4 settimane. Il starter Catalyst di BigCommerce rappresenta una via di mezzo: Next.js preconfigurato + setup GraphQL Storefront API già in posto, ma devi customizzare ogni component dalla product listing page allo stato del carrello (8-12 settimane).",{"type":32,"tag":33,"props":63,"children":64},{},[65,70],{"type":32,"tag":55,"props":66,"children":67},{},[68],{"type":37,"value":69},"Il secondo costo: l'orchestrazione del backend.",{"type":37,"value":71}," In un ambiente MACH ogni servizio è indipendente — ma la sincronizzazione dello stato tra loro ricade su di te. Esempio: servizio inventario (Fluent Commerce), pricing (Pimcore), promozioni (Talon.One) in endpoint separati. Per farli funzionare in tempo reale ti serve un event bus (Kafka \u002F AWS EventBridge). Per un e-commerce di medie dimensioni: almeno 3 engineer-month dedicati a questa orchestrazione.",{"type":32,"tag":33,"props":73,"children":74},{},[75,80],{"type":32,"tag":55,"props":76,"children":77},{},[78],{"type":37,"value":79},"Il terzo costo: la dimensione del bundle.",{"type":37,"value":81}," Headless = codice frontend custom. Catalyst di BigCommerce: 850kB JavaScript (240kB dopo gzip). Shopify Hydrogen 2.0: React Server Components, ma comunque circa 320kB. Esempio di Next.js frontend di commercetools: 950kB (aumenta se aggiungi la gestione dello stato del carrello lato client). Confronto: tema Liquid Shopify 120-180kB. Perché? HTML renderizzato lato server, JavaScript minimo.",{"type":32,"tag":40,"props":83,"children":85},{"id":84},"bigcommerce-catalyst-il-compromesso-della-via-di-mezzo",[86],{"type":37,"value":87},"BigCommerce Catalyst: Il Compromesso della Via di Mezzo",{"type":32,"tag":33,"props":89,"children":90},{},[91],{"type":37,"value":92},"BigCommerce ha introdotto Catalyst nel 2023: basato su Next.js, API Storefront GraphQL preintegrata. L'azienda lo presenta come \"il meglio dei due mondi\" — la velocità del monolite + la flessibilità del headless.",{"type":32,"tag":33,"props":94,"children":95},{},[96,101],{"type":32,"tag":55,"props":97,"children":98},{},[99],{"type":37,"value":100},"I punti di forza:",{"type":37,"value":102}," In Catalyst troverai i component PLP (product listing page), PDP, carrello, checkout già pronti. Lo schema GraphQL sincronizzato con l'API Storefront. Questo significa che il frontend developer si concentra sull'UI invece di scrivere la logica del carrello da zero. Deploy: push su Vercel \u002F Netlify, i webhook di BigCommerce triggerano il build. Tempo MVP: 8 settimane — metà di commercetools.",{"type":32,"tag":33,"props":104,"children":105},{},[106,111],{"type":32,"tag":55,"props":107,"children":108},{},[109],{"type":37,"value":110},"I punti deboli:",{"type":37,"value":112}," La flessibilità rimane limitata. Se vuoi personalizzare completamente il checkout, sei legato all'SDK di BigCommerce. L'integrazione di provider di pagamento di terze parti (come Adyen) passa attraverso l'API REST + il control panel di BigCommerce — nessun controllo a livello di componente React. E il problema della dimensione del bundle persiste: l'installazione predefinita di Catalyst è 850kB. Se il tuo obiettivo LCP è 2.5s, questo bundle su una connessione 3G può arrivare a 4.2s (simulazione Lighthouse).",{"type":32,"tag":114,"props":115,"children":117},"h3",{"id":116},"esempio-di-codice-ottimizzazione-plp-catalyst",[118],{"type":37,"value":119},"Esempio di Codice: Ottimizzazione PLP Catalyst",{"type":32,"tag":121,"props":122,"children":126},"pre",{"className":123,"code":124,"language":125,"meta":16,"style":16},"language-javascript shiki shiki-themes github-dark","\u002F\u002F app\u002F[locale]\u002F(default)\u002Fcategory\u002F[slug]\u002Fpage.tsx\n\u002F\u002F Catalyst predefinito carica 48 prodotti in eager mode\n\u002F\u002F Riducilo a 12 e aggiungi pagination differita\n\nexport default async function CategoryPage({ params }) {\n  const products = await getProducts({\n    categoryId: params.slug,\n    first: 12, \u002F\u002F 48 → 12\n  });\n\n  return (\n    \u003Cdiv>\n      \u003CProductGrid products={products.edges} \u002F>\n      \u003CLoadMoreButton cursor={products.pageInfo.endCursor} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F client component: LoadMoreButton\n'use client';\nexport function LoadMoreButton({ cursor }) {\n  const [items, setItems] = useState([]);\n  \n  async function loadMore() {\n    const res = await fetch(`\u002Fapi\u002Fproducts?after=${cursor}&first=12`);\n    const data = await res.json();\n    setItems(prev => [...prev, ...data.edges]);\n  }\n\n  return \u003Cbutton onClick={loadMore}>Carica altri\u003C\u002Fbutton>;\n}\n","javascript",[127],{"type":32,"tag":128,"props":129,"children":130},"code",{"__ignoreMap":16},[131,143,152,161,171,219,254,263,287,295,303,317,337,365,392,409,418,427,435,444,459,489,535,544,567,618,654,700,709,717,758],{"type":32,"tag":132,"props":133,"children":136},"span",{"class":134,"line":135},"line",1,[137],{"type":32,"tag":132,"props":138,"children":140},{"style":139},"--shiki-default:#6A737D",[141],{"type":37,"value":142},"\u002F\u002F app\u002F[locale]\u002F(default)\u002Fcategory\u002F[slug]\u002Fpage.tsx\n",{"type":32,"tag":132,"props":144,"children":146},{"class":134,"line":145},2,[147],{"type":32,"tag":132,"props":148,"children":149},{"style":139},[150],{"type":37,"value":151},"\u002F\u002F Catalyst predefinito carica 48 prodotti in eager mode\n",{"type":32,"tag":132,"props":153,"children":155},{"class":134,"line":154},3,[156],{"type":32,"tag":132,"props":157,"children":158},{"style":139},[159],{"type":37,"value":160},"\u002F\u002F Riducilo a 12 e aggiungi pagination differita\n",{"type":32,"tag":132,"props":162,"children":164},{"class":134,"line":163},4,[165],{"type":32,"tag":132,"props":166,"children":168},{"emptyLinePlaceholder":167},true,[169],{"type":37,"value":170},"\n",{"type":32,"tag":132,"props":172,"children":174},{"class":134,"line":173},5,[175,181,186,191,196,202,208,214],{"type":32,"tag":132,"props":176,"children":178},{"style":177},"--shiki-default:#F97583",[179],{"type":37,"value":180},"export",{"type":32,"tag":132,"props":182,"children":183},{"style":177},[184],{"type":37,"value":185}," default",{"type":32,"tag":132,"props":187,"children":188},{"style":177},[189],{"type":37,"value":190}," async",{"type":32,"tag":132,"props":192,"children":193},{"style":177},[194],{"type":37,"value":195}," function",{"type":32,"tag":132,"props":197,"children":199},{"style":198},"--shiki-default:#B392F0",[200],{"type":37,"value":201}," CategoryPage",{"type":32,"tag":132,"props":203,"children":205},{"style":204},"--shiki-default:#E1E4E8",[206],{"type":37,"value":207},"({ ",{"type":32,"tag":132,"props":209,"children":211},{"style":210},"--shiki-default:#FFAB70",[212],{"type":37,"value":213},"params",{"type":32,"tag":132,"props":215,"children":216},{"style":204},[217],{"type":37,"value":218}," }) {\n",{"type":32,"tag":132,"props":220,"children":222},{"class":134,"line":221},6,[223,228,234,239,244,249],{"type":32,"tag":132,"props":224,"children":225},{"style":177},[226],{"type":37,"value":227},"  const",{"type":32,"tag":132,"props":229,"children":231},{"style":230},"--shiki-default:#79B8FF",[232],{"type":37,"value":233}," products",{"type":32,"tag":132,"props":235,"children":236},{"style":177},[237],{"type":37,"value":238}," =",{"type":32,"tag":132,"props":240,"children":241},{"style":177},[242],{"type":37,"value":243}," await",{"type":32,"tag":132,"props":245,"children":246},{"style":198},[247],{"type":37,"value":248}," getProducts",{"type":32,"tag":132,"props":250,"children":251},{"style":204},[252],{"type":37,"value":253},"({\n",{"type":32,"tag":132,"props":255,"children":257},{"class":134,"line":256},7,[258],{"type":32,"tag":132,"props":259,"children":260},{"style":204},[261],{"type":37,"value":262},"    categoryId: params.slug,\n",{"type":32,"tag":132,"props":264,"children":266},{"class":134,"line":265},8,[267,272,277,282],{"type":32,"tag":132,"props":268,"children":269},{"style":204},[270],{"type":37,"value":271},"    first: ",{"type":32,"tag":132,"props":273,"children":274},{"style":230},[275],{"type":37,"value":276},"12",{"type":32,"tag":132,"props":278,"children":279},{"style":204},[280],{"type":37,"value":281},", ",{"type":32,"tag":132,"props":283,"children":284},{"style":139},[285],{"type":37,"value":286},"\u002F\u002F 48 → 12\n",{"type":32,"tag":132,"props":288,"children":289},{"class":134,"line":26},[290],{"type":32,"tag":132,"props":291,"children":292},{"style":204},[293],{"type":37,"value":294},"  });\n",{"type":32,"tag":132,"props":296,"children":298},{"class":134,"line":297},10,[299],{"type":32,"tag":132,"props":300,"children":301},{"emptyLinePlaceholder":167},[302],{"type":37,"value":170},{"type":32,"tag":132,"props":304,"children":306},{"class":134,"line":305},11,[307,312],{"type":32,"tag":132,"props":308,"children":309},{"style":177},[310],{"type":37,"value":311},"  return",{"type":32,"tag":132,"props":313,"children":314},{"style":204},[315],{"type":37,"value":316}," (\n",{"type":32,"tag":132,"props":318,"children":320},{"class":134,"line":319},12,[321,326,332],{"type":32,"tag":132,"props":322,"children":323},{"style":204},[324],{"type":37,"value":325},"    \u003C",{"type":32,"tag":132,"props":327,"children":329},{"style":328},"--shiki-default:#85E89D",[330],{"type":37,"value":331},"div",{"type":32,"tag":132,"props":333,"children":334},{"style":204},[335],{"type":37,"value":336},">\n",{"type":32,"tag":132,"props":338,"children":340},{"class":134,"line":339},13,[341,346,351,355,360],{"type":32,"tag":132,"props":342,"children":343},{"style":204},[344],{"type":37,"value":345},"      \u003C",{"type":32,"tag":132,"props":347,"children":348},{"style":230},[349],{"type":37,"value":350},"ProductGrid",{"type":32,"tag":132,"props":352,"children":353},{"style":198},[354],{"type":37,"value":233},{"type":32,"tag":132,"props":356,"children":357},{"style":177},[358],{"type":37,"value":359},"=",{"type":32,"tag":132,"props":361,"children":362},{"style":204},[363],{"type":37,"value":364},"{products.edges} \u002F>\n",{"type":32,"tag":132,"props":366,"children":368},{"class":134,"line":367},14,[369,373,378,383,387],{"type":32,"tag":132,"props":370,"children":371},{"style":204},[372],{"type":37,"value":345},{"type":32,"tag":132,"props":374,"children":375},{"style":230},[376],{"type":37,"value":377},"LoadMoreButton",{"type":32,"tag":132,"props":379,"children":380},{"style":198},[381],{"type":37,"value":382}," cursor",{"type":32,"tag":132,"props":384,"children":385},{"style":177},[386],{"type":37,"value":359},{"type":32,"tag":132,"props":388,"children":389},{"style":204},[390],{"type":37,"value":391},"{products.pageInfo.endCursor} \u002F>\n",{"type":32,"tag":132,"props":393,"children":395},{"class":134,"line":394},15,[396,401,405],{"type":32,"tag":132,"props":397,"children":398},{"style":204},[399],{"type":37,"value":400},"    \u003C\u002F",{"type":32,"tag":132,"props":402,"children":403},{"style":328},[404],{"type":37,"value":331},{"type":32,"tag":132,"props":406,"children":407},{"style":204},[408],{"type":37,"value":336},{"type":32,"tag":132,"props":410,"children":412},{"class":134,"line":411},16,[413],{"type":32,"tag":132,"props":414,"children":415},{"style":204},[416],{"type":37,"value":417},"  );\n",{"type":32,"tag":132,"props":419,"children":421},{"class":134,"line":420},17,[422],{"type":32,"tag":132,"props":423,"children":424},{"style":204},[425],{"type":37,"value":426},"}\n",{"type":32,"tag":132,"props":428,"children":430},{"class":134,"line":429},18,[431],{"type":32,"tag":132,"props":432,"children":433},{"emptyLinePlaceholder":167},[434],{"type":37,"value":170},{"type":32,"tag":132,"props":436,"children":438},{"class":134,"line":437},19,[439],{"type":32,"tag":132,"props":440,"children":441},{"style":139},[442],{"type":37,"value":443},"\u002F\u002F client component: LoadMoreButton\n",{"type":32,"tag":132,"props":445,"children":447},{"class":134,"line":446},20,[448,454],{"type":32,"tag":132,"props":449,"children":451},{"style":450},"--shiki-default:#9ECBFF",[452],{"type":37,"value":453},"'use client'",{"type":32,"tag":132,"props":455,"children":456},{"style":204},[457],{"type":37,"value":458},";\n",{"type":32,"tag":132,"props":460,"children":462},{"class":134,"line":461},21,[463,467,471,476,480,485],{"type":32,"tag":132,"props":464,"children":465},{"style":177},[466],{"type":37,"value":180},{"type":32,"tag":132,"props":468,"children":469},{"style":177},[470],{"type":37,"value":195},{"type":32,"tag":132,"props":472,"children":473},{"style":198},[474],{"type":37,"value":475}," LoadMoreButton",{"type":32,"tag":132,"props":477,"children":478},{"style":204},[479],{"type":37,"value":207},{"type":32,"tag":132,"props":481,"children":482},{"style":210},[483],{"type":37,"value":484},"cursor",{"type":32,"tag":132,"props":486,"children":487},{"style":204},[488],{"type":37,"value":218},{"type":32,"tag":132,"props":490,"children":492},{"class":134,"line":491},22,[493,497,502,507,511,516,521,525,530],{"type":32,"tag":132,"props":494,"children":495},{"style":177},[496],{"type":37,"value":227},{"type":32,"tag":132,"props":498,"children":499},{"style":204},[500],{"type":37,"value":501}," [",{"type":32,"tag":132,"props":503,"children":504},{"style":230},[505],{"type":37,"value":506},"items",{"type":32,"tag":132,"props":508,"children":509},{"style":204},[510],{"type":37,"value":281},{"type":32,"tag":132,"props":512,"children":513},{"style":230},[514],{"type":37,"value":515},"setItems",{"type":32,"tag":132,"props":517,"children":518},{"style":204},[519],{"type":37,"value":520},"] ",{"type":32,"tag":132,"props":522,"children":523},{"style":177},[524],{"type":37,"value":359},{"type":32,"tag":132,"props":526,"children":527},{"style":198},[528],{"type":37,"value":529}," useState",{"type":32,"tag":132,"props":531,"children":532},{"style":204},[533],{"type":37,"value":534},"([]);\n",{"type":32,"tag":132,"props":536,"children":538},{"class":134,"line":537},23,[539],{"type":32,"tag":132,"props":540,"children":541},{"style":204},[542],{"type":37,"value":543},"  \n",{"type":32,"tag":132,"props":545,"children":547},{"class":134,"line":546},24,[548,553,557,562],{"type":32,"tag":132,"props":549,"children":550},{"style":177},[551],{"type":37,"value":552},"  async",{"type":32,"tag":132,"props":554,"children":555},{"style":177},[556],{"type":37,"value":195},{"type":32,"tag":132,"props":558,"children":559},{"style":198},[560],{"type":37,"value":561}," loadMore",{"type":32,"tag":132,"props":563,"children":564},{"style":204},[565],{"type":37,"value":566},"() {\n",{"type":32,"tag":132,"props":568,"children":570},{"class":134,"line":569},25,[571,576,581,585,589,594,599,604,608,613],{"type":32,"tag":132,"props":572,"children":573},{"style":177},[574],{"type":37,"value":575},"    const",{"type":32,"tag":132,"props":577,"children":578},{"style":230},[579],{"type":37,"value":580}," res",{"type":32,"tag":132,"props":582,"children":583},{"style":177},[584],{"type":37,"value":238},{"type":32,"tag":132,"props":586,"children":587},{"style":177},[588],{"type":37,"value":243},{"type":32,"tag":132,"props":590,"children":591},{"style":198},[592],{"type":37,"value":593}," fetch",{"type":32,"tag":132,"props":595,"children":596},{"style":204},[597],{"type":37,"value":598},"(",{"type":32,"tag":132,"props":600,"children":601},{"style":450},[602],{"type":37,"value":603},"`\u002Fapi\u002Fproducts?after=${",{"type":32,"tag":132,"props":605,"children":606},{"style":204},[607],{"type":37,"value":484},{"type":32,"tag":132,"props":609,"children":610},{"style":450},[611],{"type":37,"value":612},"}&first=12`",{"type":32,"tag":132,"props":614,"children":615},{"style":204},[616],{"type":37,"value":617},");\n",{"type":32,"tag":132,"props":619,"children":621},{"class":134,"line":620},26,[622,626,631,635,639,644,649],{"type":32,"tag":132,"props":623,"children":624},{"style":177},[625],{"type":37,"value":575},{"type":32,"tag":132,"props":627,"children":628},{"style":230},[629],{"type":37,"value":630}," data",{"type":32,"tag":132,"props":632,"children":633},{"style":177},[634],{"type":37,"value":238},{"type":32,"tag":132,"props":636,"children":637},{"style":177},[638],{"type":37,"value":243},{"type":32,"tag":132,"props":640,"children":641},{"style":204},[642],{"type":37,"value":643}," res.",{"type":32,"tag":132,"props":645,"children":646},{"style":198},[647],{"type":37,"value":648},"json",{"type":32,"tag":132,"props":650,"children":651},{"style":204},[652],{"type":37,"value":653},"();\n",{"type":32,"tag":132,"props":655,"children":657},{"class":134,"line":656},27,[658,663,667,672,677,681,686,691,695],{"type":32,"tag":132,"props":659,"children":660},{"style":198},[661],{"type":37,"value":662},"    setItems",{"type":32,"tag":132,"props":664,"children":665},{"style":204},[666],{"type":37,"value":598},{"type":32,"tag":132,"props":668,"children":669},{"style":210},[670],{"type":37,"value":671},"prev",{"type":32,"tag":132,"props":673,"children":674},{"style":177},[675],{"type":37,"value":676}," =>",{"type":32,"tag":132,"props":678,"children":679},{"style":204},[680],{"type":37,"value":501},{"type":32,"tag":132,"props":682,"children":683},{"style":177},[684],{"type":37,"value":685},"...",{"type":32,"tag":132,"props":687,"children":688},{"style":204},[689],{"type":37,"value":690},"prev, ",{"type":32,"tag":132,"props":692,"children":693},{"style":177},[694],{"type":37,"value":685},{"type":32,"tag":132,"props":696,"children":697},{"style":204},[698],{"type":37,"value":699},"data.edges]);\n",{"type":32,"tag":132,"props":701,"children":703},{"class":134,"line":702},28,[704],{"type":32,"tag":132,"props":705,"children":706},{"style":204},[707],{"type":37,"value":708},"  }\n",{"type":32,"tag":132,"props":710,"children":712},{"class":134,"line":711},29,[713],{"type":32,"tag":132,"props":714,"children":715},{"emptyLinePlaceholder":167},[716],{"type":37,"value":170},{"type":32,"tag":132,"props":718,"children":720},{"class":134,"line":719},30,[721,725,730,735,740,744,749,753],{"type":32,"tag":132,"props":722,"children":723},{"style":177},[724],{"type":37,"value":311},{"type":32,"tag":132,"props":726,"children":727},{"style":204},[728],{"type":37,"value":729}," \u003C",{"type":32,"tag":132,"props":731,"children":732},{"style":328},[733],{"type":37,"value":734},"button",{"type":32,"tag":132,"props":736,"children":737},{"style":198},[738],{"type":37,"value":739}," onClick",{"type":32,"tag":132,"props":741,"children":742},{"style":177},[743],{"type":37,"value":359},{"type":32,"tag":132,"props":745,"children":746},{"style":204},[747],{"type":37,"value":748},"{loadMore}>Carica altri\u003C\u002F",{"type":32,"tag":132,"props":750,"children":751},{"style":328},[752],{"type":37,"value":734},{"type":32,"tag":132,"props":754,"children":755},{"style":204},[756],{"type":37,"value":757},">;\n",{"type":32,"tag":132,"props":759,"children":761},{"class":134,"line":760},31,[762],{"type":32,"tag":132,"props":763,"children":764},{"style":204},[765],{"type":37,"value":426},{"type":32,"tag":33,"props":767,"children":768},{},[769],{"type":37,"value":770},"Questa modifica riduce il bundle iniziale da 850kB a 620kB (riduzione del 27%). LCP: 4.2s → 2.9s. Ma rimane ancora più pesante di Shopify Liquid.",{"type":32,"tag":40,"props":772,"children":774},{"id":773},"commercetools-massima-flessibilità-massimo-carico",[775],{"type":37,"value":776},"commercetools: Massima Flessibilità, Massimo Carico",{"type":32,"tag":33,"props":778,"children":779},{},[780],{"type":37,"value":781},"commercetools si posiziona come \"truly headless\". Backend API-only, zero UI component. Costruisci tutto il frontend tu — Next.js, Vue, Svelte, la scelta è tua.",{"type":32,"tag":33,"props":783,"children":784},{},[785,789],{"type":32,"tag":55,"props":786,"children":787},{},[788],{"type":37,"value":100},{"type":37,"value":790}," Flessibilità totale. Puoi scrivere la logica del carrello in modo custom, il flusso di checkout è completamente sotto il tuo controllo. Ad esempio, multi-valuta + calcolo imposte regionale, personalized pricing lato server (critico per B2B) — tutto interrogando l'API di commercetools. GraphQL e REST sono supportati in parallelo: usa l'endpoint che perfeziona meglio.",{"type":32,"tag":33,"props":792,"children":793},{},[794,798],{"type":32,"tag":55,"props":795,"children":796},{},[797],{"type":37,"value":110},{"type":37,"value":799}," Il costo iniziale è alto. I partner di implementazione commercetools quotano una MVP media a $120k-$180k (6 mesi). Metà di questo tempo va al setup backend (import catalogo prodotti, regole pricing, sincronizzazione inventario), l'altra metà al frontend. E il costo continuo: il prezzo di commercetools non è basato su transazioni ma su una fee di piattaforma — si parte da $50k annui (fascia medio-market). Hosting frontend + CDN separati (Vercel Enterprise: $2k\u002Fmese).",{"type":32,"tag":33,"props":801,"children":802},{},[803,808],{"type":32,"tag":55,"props":804,"children":805},{},[806],{"type":37,"value":807},"Realtà di performance:",{"type":37,"value":809}," Il tempo di risposta API di commercetools è in media 120-180ms (da un server europeo, in caso di cache miss). Puoi mettere in cache su Edge (Cloudflare Workers KV \u002F Vercel Edge Config), ma devi scrivere tu la logica di invalidazione. Esempio: il prezzo di un prodotto cambia → webhook di commercetools → Cloudflare Workers → KV purge. Questo pipeline è custom per ogni progetto.",{"type":32,"tag":40,"props":811,"children":813},{"id":812},"shopify-plus-composability-ibrida",[814],{"type":37,"value":815},"Shopify Plus: Composability Ibrida",{"type":32,"tag":33,"props":817,"children":818},{},[819],{"type":37,"value":820},"Shopify con Hydrogen 2.0 entra nel mondo composable. Ma l'approccio è diverso: i temi Liquid rimangono supportati, Hydrogen è opzionale. Quindi ibrido: se serve headless lo usi, altrimenti Liquid è veloce.",{"type":32,"tag":33,"props":822,"children":823},{},[824,829],{"type":32,"tag":55,"props":825,"children":826},{},[827],{"type":37,"value":828},"I vantaggi di Hydrogen 2.0:",{"type":37,"value":830}," Usa React Server Components — questo equilibra bene tra rendering lato server e interattività lato client. Esempio: la hero image della pagina prodotto viene renderizzata sul server (come HTML), il bottone \"add to cart\" è un client component (JavaScript). Risultato: bundle iniziale 320kB, LCP 1.8s (la CDN di Shopify è veloce, l'overhead RSC è basso).",{"type":32,"tag":33,"props":832,"children":833},{},[834,839,841,847],{"type":32,"tag":55,"props":835,"children":836},{},[837],{"type":37,"value":838},"I difetti di Hydrogen 2.0:",{"type":37,"value":840}," Lo sforzo della migrazione. Se hai uno store Shopify Plus esistente e usi un tema Liquid, il passaggio a Hydrogen significa un frontend completamente nuovo. Convertire Liquid → React: 12-16 settimane. Inoltre, Hydrogen deve usare l'API Storefront 2024 — alcune variabili Liquid legacy (come ",{"type":32,"tag":128,"props":842,"children":844},{"className":843},[],[845],{"type":37,"value":846},"product.metafields",{"type":37,"value":848},") richiedono un pattern di query GraphQL diverso.",{"type":32,"tag":33,"props":850,"children":851},{},[852,857],{"type":32,"tag":55,"props":853,"children":854},{},[855],{"type":37,"value":856},"Il vantaggio di Liquid:",{"type":37,"value":858}," Rimane ancora la scelta più veloce. Perché l'HTML viene renderizzato sul server, il JavaScript è minimo. Esempio: il tema Shopify Dawn (tema Liquid predefinito): 120kB bundle, LCP 1.2s. Vale la pena la flessibilità del headless rispetto a questa velocità? La risposta dipende dal caso d'uso. Se hai bisogno di personalizzare il checkout (ad esempio, workflow di approvazione B2B), Hydrogen ha senso. Se l'esperienza di e-commerce standard ti basta, Liquid vince ancora.",{"type":32,"tag":114,"props":860,"children":862},{"id":861},"tabella-dei-tradeoff",[863],{"type":37,"value":864},"Tabella dei Tradeoff",{"type":32,"tag":866,"props":867,"children":868},"table",{},[869,903],{"type":32,"tag":870,"props":871,"children":872},"thead",{},[873],{"type":32,"tag":874,"props":875,"children":876},"tr",{},[877,883,888,893,898],{"type":32,"tag":878,"props":879,"children":880},"th",{},[881],{"type":37,"value":882},"Criterio",{"type":32,"tag":878,"props":884,"children":885},{},[886],{"type":37,"value":887},"Shopify Liquid",{"type":32,"tag":878,"props":889,"children":890},{},[891],{"type":37,"value":892},"Shopify Hydrogen",{"type":32,"tag":878,"props":894,"children":895},{},[896],{"type":37,"value":897},"BigCommerce Catalyst",{"type":32,"tag":878,"props":899,"children":900},{},[901],{"type":37,"value":902},"commercetools",{"type":32,"tag":904,"props":905,"children":906},"tbody",{},[907,936,964,992,1020,1048],{"type":32,"tag":874,"props":908,"children":909},{},[910,916,921,926,931],{"type":32,"tag":911,"props":912,"children":913},"td",{},[914],{"type":37,"value":915},"Tempo MVP",{"type":32,"tag":911,"props":917,"children":918},{},[919],{"type":37,"value":920},"4 settimane",{"type":32,"tag":911,"props":922,"children":923},{},[924],{"type":37,"value":925},"12 settimane",{"type":32,"tag":911,"props":927,"children":928},{},[929],{"type":37,"value":930},"8 settimane",{"type":32,"tag":911,"props":932,"children":933},{},[934],{"type":37,"value":935},"24 settimane",{"type":32,"tag":874,"props":937,"children":938},{},[939,944,949,954,959],{"type":32,"tag":911,"props":940,"children":941},{},[942],{"type":37,"value":943},"Dimensione bundle",{"type":32,"tag":911,"props":945,"children":946},{},[947],{"type":37,"value":948},"120kB",{"type":32,"tag":911,"props":950,"children":951},{},[952],{"type":37,"value":953},"320kB",{"type":32,"tag":911,"props":955,"children":956},{},[957],{"type":37,"value":958},"620kB (ottimizzato)",{"type":32,"tag":911,"props":960,"children":961},{},[962],{"type":37,"value":963},"400-600kB",{"type":32,"tag":874,"props":965,"children":966},{},[967,972,977,982,987],{"type":32,"tag":911,"props":968,"children":969},{},[970],{"type":37,"value":971},"LCP (3G)",{"type":32,"tag":911,"props":973,"children":974},{},[975],{"type":37,"value":976},"1.2s",{"type":32,"tag":911,"props":978,"children":979},{},[980],{"type":37,"value":981},"1.8s",{"type":32,"tag":911,"props":983,"children":984},{},[985],{"type":37,"value":986},"2.9s",{"type":32,"tag":911,"props":988,"children":989},{},[990],{"type":37,"value":991},"2.5s (con cache)",{"type":32,"tag":874,"props":993,"children":994},{},[995,1000,1005,1010,1015],{"type":32,"tag":911,"props":996,"children":997},{},[998],{"type":37,"value":999},"Flessibilità checkout",{"type":32,"tag":911,"props":1001,"children":1002},{},[1003],{"type":37,"value":1004},"Bassa (Shopify SDK)",{"type":32,"tag":911,"props":1006,"children":1007},{},[1008],{"type":37,"value":1009},"Media (Hydrogen checkout)",{"type":32,"tag":911,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Media (SDK)",{"type":32,"tag":911,"props":1016,"children":1017},{},[1018],{"type":37,"value":1019},"Totale",{"type":32,"tag":874,"props":1021,"children":1022},{},[1023,1028,1033,1038,1043],{"type":32,"tag":911,"props":1024,"children":1025},{},[1026],{"type":37,"value":1027},"Costo iniziale",{"type":32,"tag":911,"props":1029,"children":1030},{},[1031],{"type":37,"value":1032},"$15k-30k",{"type":32,"tag":911,"props":1034,"children":1035},{},[1036],{"type":37,"value":1037},"$60k-90k",{"type":32,"tag":911,"props":1039,"children":1040},{},[1041],{"type":37,"value":1042},"$50k-80k",{"type":32,"tag":911,"props":1044,"children":1045},{},[1046],{"type":37,"value":1047},"$120k-180k",{"type":32,"tag":874,"props":1049,"children":1050},{},[1051,1056,1061,1066,1071],{"type":32,"tag":911,"props":1052,"children":1053},{},[1054],{"type":37,"value":1055},"Fee piattaforma annua",{"type":32,"tag":911,"props":1057,"children":1058},{},[1059],{"type":37,"value":1060},"~$24k (Plus)",{"type":32,"tag":911,"props":1062,"children":1063},{},[1064],{"type":37,"value":1065},"~$24k + Vercel",{"type":32,"tag":911,"props":1067,"children":1068},{},[1069],{"type":37,"value":1070},"~$36k (Enterprise)",{"type":32,"tag":911,"props":1072,"children":1073},{},[1074],{"type":37,"value":1075},"$50k+",{"type":32,"tag":40,"props":1077,"children":1079},{"id":1078},"su-cosa-baserai-la-tua-decisione",[1080],{"type":37,"value":1081},"Su Cosa Baserai la Tua Decisione",{"type":32,"tag":33,"props":1083,"children":1084},{},[1085],{"type":37,"value":1086},"Il composable commerce viene presentato come il \"futuro\", ma non si adatta a ogni progetto. I criteri decisionali vanno discussi attraverso scenari concreti.",{"type":32,"tag":33,"props":1088,"children":1089},{},[1090,1095],{"type":32,"tag":55,"props":1091,"children":1092},{},[1093],{"type":37,"value":1094},"Scenario 1: E-commerce B2C standard, 500k-2M ordini annui.",{"type":37,"value":1096}," Liquid vince. Perché il bundle è piccolo, LCP raggiunge il target, il checkout è integrato con Shopify Payments. Passare al headless aumenta il bundle di 2.5x, porta l'LCP da 1.2s a 1.8s (impatto sul tasso di conversione: perdita 0.2-0.5%). Se non hai un requisito di flessibilità che lo giustifichi, non vale la pena.",{"type":32,"tag":33,"props":1098,"children":1099},{},[1100,1105],{"type":32,"tag":55,"props":1101,"children":1102},{},[1103],{"type":37,"value":1104},"Scenario 2: B2B wholesale, workflow di approvazione custom, pricing regionale.",{"type":37,"value":1106}," commercetools ha senso. Perché le funzionalità B2B di Shopify Plus (B2B on Shopify) hanno logica di approvazione limitata. Con commercetools puoi costruire un custom cart rule engine: \"ordini sopra i 10k USD richiedono approvazione procurement\". La flessibilità API giustifica il ROI in questo scenario.",{"type":32,"tag":33,"props":1108,"children":1109},{},[1110,1115],{"type":32,"tag":55,"props":1111,"children":1112},{},[1113],{"type":37,"value":1114},"Scenario 3: Store Shopify esistente, personalizzazione checkout necessaria.",{"type":37,"value":1116}," Hydrogen 2.0. Perché rimani nell'ecosistema Shopify (le integrazioni di app si preservano), ma hai il controllo del checkout come componente React. Il tempo di migrazione è 12 settimane — metà di commercetools. La fee della piattaforma non cambia (già paghi Shopify Plus).",{"type":32,"tag":33,"props":1118,"children":1119},{},[1120,1125],{"type":32,"tag":55,"props":1121,"children":1122},{},[1123],{"type":37,"value":1124},"Scenario 4: Multi-canale (e-commerce + app mobile + marketplace), headless obbligatorio.",{"type":37,"value":1126}," BigCommerce Catalyst potrebbe essere una via di mezzo. Perché l'API Storefront GraphQL serve sia il web che l'app, ma il costo di integrazione non è alto come commercetools. Se l'app mobile è React Native, i component di Catalyst possono essere adattati (code sharing web → native).",{"type":32,"tag":40,"props":1128,"children":1130},{"id":1129},"conclusione-accetta-la-fattura-della-flessibilità",[1131],{"type":37,"value":1132},"Conclusione: Accetta la Fattura della Flessibilità",{"type":32,"tag":33,"props":1134,"children":1135},{},[1136],{"type":37,"value":1137},"L'architettura MACH offre flessibilità, ma questa flessibilità ritorna come dimensione del bundle, costo iniziale, carico di integrazione. Shopify Liquid rimane l'opzione di produzione più veloce — se il tuo scenario lo copre, passare al headless non è ottimizzazione, è over-engineering. BigCommerce Catalyst rappresenta la via di mezzo: component precostruiti + flessibilità GraphQL, ma limiti nel checkout. commercetools è flessibilità totale: $120k di avviamento + carico di orchestrazione continuativo. Hydrogen 2.0 è headless nell'ecosistema Shopify — ma più pesante di Liquid. Basa la tua decisione se il caso d'uso giustifica effettivamente i tradeoff. In produzione, i numeri vengono prima delle promesse.",{"type":32,"tag":1139,"props":1140,"children":1141},"style",{},[1142],{"type":37,"value":1143},"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":154,"depth":154,"links":1145},[1146,1147,1150,1151,1154,1155],{"id":42,"depth":145,"text":45},{"id":84,"depth":145,"text":87,"children":1148},[1149],{"id":116,"depth":154,"text":119},{"id":773,"depth":145,"text":776},{"id":812,"depth":145,"text":815,"children":1152},[1153],{"id":861,"depth":154,"text":864},{"id":1078,"depth":145,"text":1081},{"id":1129,"depth":145,"text":1132},"markdown","content:it:tech:composable-commerce-architettura-mach-realta-produttiva.md","content","it\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva.md","it\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva","md",1782050755526]