[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fcomposable-commerce-mach-production-reality":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":7,"_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: MACH Architecture Production Reality","BigCommerce, commercetools, Shopify Plus — what flexibility does MACH promise? What are the real costs in production and what will you accept?","2026-06-07",[21,22,23,24,25],"composable-commerce","mach-architecture","headless-commerce","shopify-plus","bigcommerce",8,"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","Composable commerce has been positioned as the market's \"new standard\" since 2024. MACH principles (Microservices, API-first, Cloud-native, Headless) are being sold as the replacement for centralized monolithic platforms. But in production, reality differs: BigCommerce Catalyst bundle runs 850kB, commercetools requires a minimum integration cost of $120k, and Shopify Plus's composable features come with the migration burden of Hydrogen 2.0. Before deciding, tradeoffs need to be discussed in numbers.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"the-real-cost-of-machs-promise",[44],{"type":37,"value":45},"The Real Cost of MACH's Promise",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"The core promise of composable architecture is flexibility: frontend, backend, payment, search — each independent, swappable when needed. But this flexibility translates into three cost categories.",{"type":32,"tag":33,"props":52,"children":53},{},[54,60],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"First cost: integration startup time.",{"type":37,"value":61}," On API-only platforms like commercetools, you build the entire experience from frontend to checkout yourself. Average MVP: 16-20 weeks. The same experience on Shopify Plus takes 4 weeks. BigCommerce's Catalyst starter splits the difference: pre-built Next.js + GraphQL Storefront API setup, but you still need to customize every component from product listing to cart state (8-12 weeks).",{"type":32,"tag":33,"props":63,"children":64},{},[65,70],{"type":32,"tag":55,"props":66,"children":67},{},[68],{"type":37,"value":69},"Second cost: backend coordination.",{"type":37,"value":71}," In a MACH environment, each service is independent — but data synchronization between them falls on you. Example: inventory service (Fluent Commerce), pricing (Pimcore), promotions (Talon.One) run on separate endpoints. For these services to work in real-time, an event bus (Kafka \u002F AWS EventBridge) is mandatory. Mid-market e-commerce: minimum 3 engineer-months goes into this orchestration.",{"type":32,"tag":33,"props":73,"children":74},{},[75,80],{"type":32,"tag":55,"props":76,"children":77},{},[78],{"type":37,"value":79},"Third cost: bundle size.",{"type":37,"value":81}," Headless equals custom frontend code. BigCommerce Catalyst: 850kB JavaScript (240kB after gzip). Shopify Hydrogen 2.0: uses React Server Components, but still averages 320kB. commercetools's example Next.js frontend: 950kB (add client-side cart state management). Comparison: Shopify Liquid theme 120-180kB. Because HTML is server-rendered, JavaScript is minimal.",{"type":32,"tag":40,"props":83,"children":85},{"id":84},"bigcommerce-catalyst-the-compromise-middle-ground",[86],{"type":37,"value":87},"BigCommerce Catalyst: The Compromise Middle Ground",{"type":32,"tag":33,"props":89,"children":90},{},[91],{"type":37,"value":92},"BigCommerce launched Catalyst in 2023: Next.js-based, pre-integrated GraphQL Storefront API. The company positions it as \"best of both worlds\" — monolith speed plus headless flexibility.",{"type":32,"tag":33,"props":94,"children":95},{},[96,101],{"type":32,"tag":55,"props":97,"children":98},{},[99],{"type":37,"value":100},"Strengths:",{"type":37,"value":102}," Catalyst comes with PLP (product listing page), PDP, cart, and checkout components pre-built. The GraphQL schema syncs with the Storefront API. This means frontend developers focus on UI rather than writing cart logic from scratch. Deployment: push to Vercel \u002F Netlify, BigCommerce webhooks trigger the build. MVP time: 8 weeks — half of commercetools.",{"type":32,"tag":33,"props":104,"children":105},{},[106,111],{"type":32,"tag":55,"props":107,"children":108},{},[109],{"type":37,"value":110},"Weaknesses:",{"type":37,"value":112}," Flexibility remains limited. For example, fully customizing checkout binds you to BigCommerce's Checkout SDK. Third-party payment provider integration (like Adyen) happens via REST API + BigCommerce control panel — no React component-level control. Bundle size issues persist: Catalyst's default setup is 850kB. If your Core Web Vitals LCP target is 2.5s, this bundle can push LCP to 4.2s on 3G connections (Lighthouse simulation).",{"type":32,"tag":114,"props":115,"children":117},"h3",{"id":116},"code-example-catalyst-plp-optimization",[118],{"type":37,"value":119},"Code Example: Catalyst PLP Optimization",{"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 default PLP eager loads 48 products\n\u002F\u002F Reduce to 12 and add deferred pagination\n\nexport default async function CategoryPage({ params }) {\n  const products = await getProducts({\n    categoryId: params.slug,\n    first: 12, \u002F\u002F 48 → 12 reduced\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}>Load More\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,286,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 default PLP eager loads 48 products\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 Reduce to 12 and add deferred pagination\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":265},{"class":134,"line":26},[266,271,276,281],{"type":32,"tag":132,"props":267,"children":268},{"style":204},[269],{"type":37,"value":270},"    first: ",{"type":32,"tag":132,"props":272,"children":273},{"style":230},[274],{"type":37,"value":275},"12",{"type":32,"tag":132,"props":277,"children":278},{"style":204},[279],{"type":37,"value":280},", ",{"type":32,"tag":132,"props":282,"children":283},{"style":139},[284],{"type":37,"value":285},"\u002F\u002F 48 → 12 reduced\n",{"type":32,"tag":132,"props":287,"children":289},{"class":134,"line":288},9,[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":280},{"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}>Load More\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},"This change reduces the initial bundle from 850kB to 620kB (27% reduction). LCP drops from 4.2s to 2.9s. Still heavier than Shopify Liquid, though.",{"type":32,"tag":40,"props":772,"children":774},{"id":773},"commercetools-maximum-flexibility-maximum-burden",[775],{"type":37,"value":776},"commercetools: Maximum Flexibility, Maximum Burden",{"type":32,"tag":33,"props":778,"children":779},{},[780],{"type":37,"value":781},"commercetools positions itself as \"true headless.\" API-only backend, no UI components. You build the entire frontend — Next.js, Vue, Svelte, your choice.",{"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}," Complete flexibility. You can implement custom cart logic, checkout flow entirely under your control. For example, multi-currency plus regional tax calculation, server-side personalized pricing (critical for B2B) — all via commercetools API requests. Both GraphQL and REST are supported in parallel — use whichever endpoint performs better.",{"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}," High startup cost. Average MVP from commercetools implementation partners: $120k-$180k (6 months). Half that time goes to backend setup (product catalog import, pricing rules, inventory sync), the other half to frontend. Plus ongoing costs: commercetools licensing isn't transaction-based but a platform fee — starting at $50k annually (mid-market). Frontend hosting and CDN are separate (Vercel Enterprise: $2k\u002Fmonth).",{"type":32,"tag":33,"props":801,"children":802},{},[803,808],{"type":32,"tag":55,"props":804,"children":805},{},[806],{"type":37,"value":807},"Performance reality:",{"type":37,"value":809}," commercetools API response time averages 120-180ms (from European servers, cache miss scenario). You can cache this at the edge (Cloudflare Workers KV \u002F Vercel Edge Config), but you write the invalidation logic. Example: product price changes → commercetools webhook → Cloudflare Workers → KV purge. This pipeline is custom per project.",{"type":32,"tag":40,"props":811,"children":813},{"id":812},"shopify-plus-hybrid-composability",[814],{"type":37,"value":815},"Shopify Plus: Hybrid Composability",{"type":32,"tag":33,"props":817,"children":818},{},[819],{"type":37,"value":820},"Shopify entered the composable world with Hydrogen 2.0. But the approach differs: Liquid themes remain supported; Hydrogen is optional. Hybrid strategy: use headless if you need it, otherwise Liquid for speed.",{"type":32,"tag":33,"props":822,"children":823},{},[824,829],{"type":32,"tag":55,"props":825,"children":826},{},[827],{"type":37,"value":828},"Hydrogen 2.0 advantages:",{"type":37,"value":830}," Uses React Server Components — this balances server-side rendering with client-side interactivity effectively. Example: product page hero image renders on the server (as HTML), \"add to cart\" button is a client component (JavaScript). Result: initial bundle 320kB, but LCP 1.8s (Shopify CDN is fast, RSC overhead is low).",{"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},"Hydrogen 2.0 challenges:",{"type":37,"value":840}," Migration burden. If you have an existing Shopify Plus store using a Liquid theme, moving to Hydrogen means a new frontend. Liquid → React migration: 12-16 weeks. Also, Hydrogen requires Storefront API 2024 — some old Liquid variables (like ",{"type":32,"tag":128,"props":842,"children":844},{"className":843},[],[845],{"type":37,"value":846},"product.metafields",{"type":37,"value":848},") need different GraphQL query patterns.",{"type":32,"tag":33,"props":850,"children":851},{},[852,857],{"type":32,"tag":55,"props":853,"children":854},{},[855],{"type":37,"value":856},"Liquid advantage:",{"type":37,"value":858}," Still the fastest option. Because HTML renders on the server, JavaScript is minimal. Example: Shopify Dawn theme (default Liquid theme): 120kB bundle, LCP 1.2s. Is the flexibility headless provides worth this speed? Depends on use case. If you need checkout customization (like B2B approval workflows), Hydrogen makes sense. For standard e-commerce, Liquid still wins.",{"type":32,"tag":114,"props":860,"children":862},{"id":861},"tradeoff-table",[863],{"type":37,"value":864},"Tradeoff Table",{"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},"Criterion",{"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},"MVP time",{"type":32,"tag":911,"props":917,"children":918},{},[919],{"type":37,"value":920},"4 weeks",{"type":32,"tag":911,"props":922,"children":923},{},[924],{"type":37,"value":925},"12 weeks",{"type":32,"tag":911,"props":927,"children":928},{},[929],{"type":37,"value":930},"8 weeks",{"type":32,"tag":911,"props":932,"children":933},{},[934],{"type":37,"value":935},"24 weeks",{"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},"Bundle size",{"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 (optimized)",{"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 (cached)",{"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},"Checkout flexibility",{"type":32,"tag":911,"props":1001,"children":1002},{},[1003],{"type":37,"value":1004},"Low (Shopify SDK)",{"type":32,"tag":911,"props":1006,"children":1007},{},[1008],{"type":37,"value":1009},"Medium (Hydrogen checkout)",{"type":32,"tag":911,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Medium (SDK)",{"type":32,"tag":911,"props":1016,"children":1017},{},[1018],{"type":37,"value":1019},"Full",{"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},"Startup cost",{"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},"Annual platform fee",{"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},"how-to-make-the-decision",[1080],{"type":37,"value":1081},"How to Make the Decision",{"type":32,"tag":33,"props":1083,"children":1084},{},[1085],{"type":37,"value":1086},"Composable commerce is sold as the \"future,\" but it doesn't fit every project. Decision criteria need to be discussed through concrete scenarios.",{"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: Standard B2C e-commerce, 500k-2M orders annually.",{"type":37,"value":1096}," Liquid wins. Bundle size is low, LCP target is met, checkout integrates with Shopify Payments. Moving to headless triples bundle size, pushes LCP from 1.2s to 1.8s (conversion impact: 0.2-0.5% loss). Without flexibility that justifies this tradeoff, don't move.",{"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, custom approval workflow, regional pricing.",{"type":37,"value":1106}," commercetools makes sense. Because Shopify Plus's B2B feature (B2B on Shopify) has limited approval logic. On commercetools, you can build a custom cart rule engine: \"Orders over $10k require procurement approval\" — that kind of thing. API flexibility justifies the ROI here.",{"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: Existing Shopify store, checkout customization needed.",{"type":37,"value":1116}," Hydrogen 2.0. Because you stay in the Shopify ecosystem (app integrations preserved), but control checkout as a React component. Migration time: 12 weeks — half of commercetools. Platform fee doesn't change (you already pay for 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-channel (e-commerce plus mobile app plus marketplace), headless is mandatory.",{"type":37,"value":1126}," BigCommerce Catalyst could be a middle path. Because the GraphQL Storefront API serves both web and app, but integration cost doesn't match commercetools. React Native mobile app? Catalyst components can be adapted (web → native code sharing).",{"type":32,"tag":40,"props":1128,"children":1130},{"id":1129},"closing-accept-flexibilitys-price-tag",[1131],{"type":37,"value":1132},"Closing: Accept Flexibility's Price Tag",{"type":32,"tag":33,"props":1134,"children":1135},{},[1136],{"type":37,"value":1137},"MACH architecture delivers flexibility, but that flexibility comes back as bundle size, initial cost, and integration burden. Shopify Liquid remains the fastest production option — if your scenario fits Liquid, moving to headless is overengineering, not optimization. BigCommerce Catalyst is the middle ground: pre-built components plus GraphQL flexibility, but checkout has limits. commercetools is full flexibility: $120k startup plus ongoing orchestration burden. Hydrogen 2.0 is headless within the Shopify ecosystem — but heavier than Liquid. Make your decision based on whether your use case justifies the tradeoffs. In production, numbers speak before promises do.",{"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:en:tech:composable-commerce-mach-production-reality.md","content","en\u002Ftech\u002Fcomposable-commerce-mach-production-reality.md","en\u002Ftech\u002Fcomposable-commerce-mach-production-reality","md",1782079488118]