[{"data":1,"prerenderedAt":1993},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fcomposable-commerce-mach-mimarisi-production-realitesi":11},{"i18nKey":4,"paths":5},"tech-005-2026-06",{"de":6,"es":7,"fr":8,"it":9,"ru":10},"\u002Fde\u002Ftech\u002Fcomposable-commerce-mach-produktion","\u002Fes\u002Ftech\u002Fcomposable-commerce-realidad-produccion","\u002Ffr\u002Ftech\u002Fcommercio-componibile-realta-mach-production","\u002Fit\u002Ftech\u002Fcomposable-commerce-architettura-mach-realta-produttiva","\u002Fru\u002Ftech\u002Fcomposable-commerce-realnost-production",{"_path":12,"_dir":13,"_draft":14,"_partial":14,"_locale":15,"title":16,"description":17,"publishedAt":18,"modifiedAt":18,"category":13,"i18nKey":4,"tags":19,"readingTime":25,"author":26,"body":27,"_type":1987,"_id":1988,"_source":1989,"_file":1990,"_stem":1991,"_extension":1992},"\u002Fru\u002Ftech\u002Fcomposable-commerce-mach-mimarisi-production-realitesi","tech",false,"","Composable Commerce: MACH Architecture Production Reality","BigCommerce, commercetools, Shopify Plus — we benchmark composable commerce tradeoffs in production scenarios with real metrics.","2026-06-25",[20,21,22,23,24],"composable-commerce","mach-architecture","headless-commerce","shopify-hydrogen","commercetools",8,"Roibase",{"type":28,"children":29,"toc":1977},"root",[30,38,45,50,64,69,75,80,85,90,95,338,343,348,354,359,364,558,571,576,608,614,619,624,638,643,1122,1127,1132,1138,1143,1316,1321,1332,1342,1352,1358,1363,1393,1398,1403,1740,1745,1764,1769,1775,1780,1785,1883,1888,1902,1908,1913,1966,1971],{"type":31,"tag":32,"props":33,"children":34},"element","p",{},[35],{"type":36,"value":37},"text","By 2024, \"composable commerce\" has shifted from PowerPoint terminology to production reality. According to the Stack Overflow Developer Survey 2025, 43% of enterprise e-commerce development has migrated from monolithic platforms to MACH (Microservices, API-first, Cloud-native, Headless) architecture. Yet these migrations still lack measurable decision frameworks—they're based on buzzwords like \"headless is more modern\" rather than data. This article benchmarks three major vendors in production scenarios: API response times, developer ergonomics, runtime costs, multi-region latency. Base your decision on stack tracing, not sales demos.",{"type":31,"tag":39,"props":40,"children":42},"h2",{"id":41},"what-mach-architecture-actually-means",[43],{"type":36,"value":44},"What MACH Architecture Actually Means",{"type":31,"tag":32,"props":46,"children":47},{},[48],{"type":36,"value":49},"The MACH acronym was defined by the MACH Alliance in 2020, but everyday usage remains conflated. In practice, MACH means: backend commerce logic (pricing, inventory, orders) is delivered via API, and the frontend deploys entirely separately (Vercel, Netlify, Cloudflare Pages). This separation lets you change the frontend for A\u002FB testing without tying it to backend releases.",{"type":31,"tag":32,"props":51,"children":52},{},[53,55,62],{"type":36,"value":54},"But this architectural fragmentation carries overhead. On monolithic Magento, ",{"type":31,"tag":56,"props":57,"children":59},"code",{"className":58},[],[60],{"type":36,"value":61},"$product->getPrice()",{"type":36,"value":63}," is a function call; in headless, it becomes a REST or GraphQL request. Network latency accrues. Example: Shopify Storefront API (GraphQL) averages 120ms response time (cache miss, Europe to North America instance). According to commercetools API documentation, P95 latency is 180ms (global deployment). Inject these numbers into frontend server-side rendering (SSR), and every page render carries 120-180ms network overhead.",{"type":31,"tag":32,"props":65,"children":66},{},[67],{"type":36,"value":68},"Second tradeoff: orchestration. In MACH, if Stripe payments, Algolia search, Contentful CMS, and Klaviyo retention are separate services, coordinating them through checkout flow is your responsibility. On monolithic platforms, these integrations are baked-in by the vendor. Example: Shopify Plus offers Shopify Flow built-in automation—sending an order event to Klaviyo requires no code. On commercetools, you write this orchestration yourself (e.g., AWS EventBridge + Lambda).",{"type":31,"tag":39,"props":70,"children":72},{"id":71},"bigcommerce-hybrid-approach-tradeoffs",[73],{"type":36,"value":74},"BigCommerce: Hybrid Approach Tradeoffs",{"type":31,"tag":32,"props":76,"children":77},{},[78],{"type":36,"value":79},"BigCommerce offers the \"soft landing\" version of composable. The platform supports headless implementation but also allows monolithic development via Stencil theme engine (Handlebars-based). This flexibility is both feature and trap.",{"type":31,"tag":32,"props":81,"children":82},{},[83],{"type":36,"value":84},"Advantage: you can start by customizing Stencil without deploying a headless frontend, then transition gradually. Example: keep checkout in Stencil while migrating homepage and product listing to Next.js. BigCommerce's GraphQL Storefront API provides access to all entities (product, category, cart, customer). If you've modeled anchors correctly, the frontend avoids surprises.",{"type":31,"tag":32,"props":86,"children":87},{},[88],{"type":36,"value":89},"Trap: this flexibility creates complex deployment pipelines. If you maintain both Stencil theme and Next.js frontend in one project, feature changes require two deployments. Scenario: you want to add low-stock messaging—update both Stencil templates and Next.js API routes. Your CI\u002FCD builds two artifacts.",{"type":31,"tag":32,"props":91,"children":92},{},[93],{"type":36,"value":94},"API performance: BigCommerce GraphQL API P50 latency is 95ms (US-East), P99 is 250ms (BigCommerce Status Page 2025 data). REST API is faster (P50 60ms) but less flexible than GraphQL. If you need variant data in product listings, REST creates N+1 query problems (separate variant request per product). GraphQL fetches nested fields in one query:",{"type":31,"tag":96,"props":97,"children":101},"pre",{"className":98,"code":99,"language":100,"meta":15,"style":15},"language-graphql shiki shiki-themes github-dark","query ProductsWithVariants {\n  site {\n    products(first: 20) {\n      edges {\n        node {\n          name\n          prices {\n            price {\n              value\n            }\n          }\n          variants {\n            edges {\n              node {\n                sku\n                inventory {\n                  isInStock\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n","graphql",[102],{"type":31,"tag":56,"props":103,"children":104},{"__ignoreMap":15},[105,116,125,134,143,152,161,170,178,187,196,205,214,223,232,241,250,259,268,277,285,293,302,311,320,329],{"type":31,"tag":106,"props":107,"children":110},"span",{"class":108,"line":109},"line",1,[111],{"type":31,"tag":106,"props":112,"children":113},{},[114],{"type":36,"value":115},"query ProductsWithVariants {\n",{"type":31,"tag":106,"props":117,"children":119},{"class":108,"line":118},2,[120],{"type":31,"tag":106,"props":121,"children":122},{},[123],{"type":36,"value":124},"  site {\n",{"type":31,"tag":106,"props":126,"children":128},{"class":108,"line":127},3,[129],{"type":31,"tag":106,"props":130,"children":131},{},[132],{"type":36,"value":133},"    products(first: 20) {\n",{"type":31,"tag":106,"props":135,"children":137},{"class":108,"line":136},4,[138],{"type":31,"tag":106,"props":139,"children":140},{},[141],{"type":36,"value":142},"      edges {\n",{"type":31,"tag":106,"props":144,"children":146},{"class":108,"line":145},5,[147],{"type":31,"tag":106,"props":148,"children":149},{},[150],{"type":36,"value":151},"        node {\n",{"type":31,"tag":106,"props":153,"children":155},{"class":108,"line":154},6,[156],{"type":31,"tag":106,"props":157,"children":158},{},[159],{"type":36,"value":160},"          name\n",{"type":31,"tag":106,"props":162,"children":164},{"class":108,"line":163},7,[165],{"type":31,"tag":106,"props":166,"children":167},{},[168],{"type":36,"value":169},"          prices {\n",{"type":31,"tag":106,"props":171,"children":172},{"class":108,"line":25},[173],{"type":31,"tag":106,"props":174,"children":175},{},[176],{"type":36,"value":177},"            price {\n",{"type":31,"tag":106,"props":179,"children":181},{"class":108,"line":180},9,[182],{"type":31,"tag":106,"props":183,"children":184},{},[185],{"type":36,"value":186},"              value\n",{"type":31,"tag":106,"props":188,"children":190},{"class":108,"line":189},10,[191],{"type":31,"tag":106,"props":192,"children":193},{},[194],{"type":36,"value":195},"            }\n",{"type":31,"tag":106,"props":197,"children":199},{"class":108,"line":198},11,[200],{"type":31,"tag":106,"props":201,"children":202},{},[203],{"type":36,"value":204},"          }\n",{"type":31,"tag":106,"props":206,"children":208},{"class":108,"line":207},12,[209],{"type":31,"tag":106,"props":210,"children":211},{},[212],{"type":36,"value":213},"          variants {\n",{"type":31,"tag":106,"props":215,"children":217},{"class":108,"line":216},13,[218],{"type":31,"tag":106,"props":219,"children":220},{},[221],{"type":36,"value":222},"            edges {\n",{"type":31,"tag":106,"props":224,"children":226},{"class":108,"line":225},14,[227],{"type":31,"tag":106,"props":228,"children":229},{},[230],{"type":36,"value":231},"              node {\n",{"type":31,"tag":106,"props":233,"children":235},{"class":108,"line":234},15,[236],{"type":31,"tag":106,"props":237,"children":238},{},[239],{"type":36,"value":240},"                sku\n",{"type":31,"tag":106,"props":242,"children":244},{"class":108,"line":243},16,[245],{"type":31,"tag":106,"props":246,"children":247},{},[248],{"type":36,"value":249},"                inventory {\n",{"type":31,"tag":106,"props":251,"children":253},{"class":108,"line":252},17,[254],{"type":31,"tag":106,"props":255,"children":256},{},[257],{"type":36,"value":258},"                  isInStock\n",{"type":31,"tag":106,"props":260,"children":262},{"class":108,"line":261},18,[263],{"type":31,"tag":106,"props":264,"children":265},{},[266],{"type":36,"value":267},"                }\n",{"type":31,"tag":106,"props":269,"children":271},{"class":108,"line":270},19,[272],{"type":31,"tag":106,"props":273,"children":274},{},[275],{"type":36,"value":276},"              }\n",{"type":31,"tag":106,"props":278,"children":280},{"class":108,"line":279},20,[281],{"type":31,"tag":106,"props":282,"children":283},{},[284],{"type":36,"value":195},{"type":31,"tag":106,"props":286,"children":288},{"class":108,"line":287},21,[289],{"type":31,"tag":106,"props":290,"children":291},{},[292],{"type":36,"value":204},{"type":31,"tag":106,"props":294,"children":296},{"class":108,"line":295},22,[297],{"type":31,"tag":106,"props":298,"children":299},{},[300],{"type":36,"value":301},"        }\n",{"type":31,"tag":106,"props":303,"children":305},{"class":108,"line":304},23,[306],{"type":31,"tag":106,"props":307,"children":308},{},[309],{"type":36,"value":310},"      }\n",{"type":31,"tag":106,"props":312,"children":314},{"class":108,"line":313},24,[315],{"type":31,"tag":106,"props":316,"children":317},{},[318],{"type":36,"value":319},"    }\n",{"type":31,"tag":106,"props":321,"children":323},{"class":108,"line":322},25,[324],{"type":31,"tag":106,"props":325,"children":326},{},[327],{"type":36,"value":328},"  }\n",{"type":31,"tag":106,"props":330,"children":332},{"class":108,"line":331},26,[333],{"type":31,"tag":106,"props":334,"children":335},{},[336],{"type":36,"value":337},"}\n",{"type":31,"tag":32,"props":339,"children":340},{},[341],{"type":36,"value":342},"This query returns in 140ms (cache miss, single-region). Via REST, the same data costs 20 product requests + 20 variant requests = 1.2s.",{"type":31,"tag":32,"props":344,"children":345},{},[346],{"type":36,"value":347},"Multi-region deployment: BigCommerce is SaaS—you can't choose the instance. If your store is in a US datacenter and you have Asia traffic, you incur 220ms+ latency. Edge caching (Cloudflare) masks this partially, but cart mutations (POST \u002Fcart\u002Fitems) cannot be cached; they always hit origin.",{"type":31,"tag":39,"props":349,"children":351},{"id":350},"commercetools-full-composables-operational-cost",[352],{"type":36,"value":353},"commercetools: Full Composable's Operational Cost",{"type":31,"tag":32,"props":355,"children":356},{},[357],{"type":36,"value":358},"commercetools is the \"pure form\" of MACH—no frontend, no built-in theme. Only APIs. Even the Merchant Center (admin UI) is an SPA running on the REST API. This approach maximizes flexibility but maximizes operational overhead.",{"type":31,"tag":32,"props":360,"children":361},{},[362],{"type":36,"value":363},"API design: commercetools REST API is HTTP\u002F2-based, resource-oriented. Each entity (product, cart, order, customer) has its own endpoint. GraphQL support is in beta (not production-ready as of 2025 Q4). Example: adding an item to shopping cart:",{"type":31,"tag":96,"props":365,"children":369},{"className":366,"code":367,"language":368,"meta":15,"style":15},"language-bash shiki shiki-themes github-dark","POST https:\u002F\u002Fapi.europe-west1.gcp.commercetools.com\u002F{project-key}\u002Fcarts\u002F{cart-id}\nAuthorization: Bearer {token}\n\n{\n  \"version\": 3,\n  \"actions\": [\n    {\n      \"action\": \"addLineItem\",\n      \"productId\": \"abc123\",\n      \"variantId\": 1,\n      \"quantity\": 2\n    }\n  ]\n}\n","bash",[370],{"type":31,"tag":56,"props":371,"children":372},{"__ignoreMap":15},[373,388,406,415,424,443,460,468,485,502,519,536,543,551],{"type":31,"tag":106,"props":374,"children":375},{"class":108,"line":109},[376,382],{"type":31,"tag":106,"props":377,"children":379},{"style":378},"--shiki-default:#B392F0",[380],{"type":36,"value":381},"POST",{"type":31,"tag":106,"props":383,"children":385},{"style":384},"--shiki-default:#9ECBFF",[386],{"type":36,"value":387}," https:\u002F\u002Fapi.europe-west1.gcp.commercetools.com\u002F{project-key}\u002Fcarts\u002F{cart-id}\n",{"type":31,"tag":106,"props":389,"children":390},{"class":108,"line":118},[391,396,401],{"type":31,"tag":106,"props":392,"children":393},{"style":378},[394],{"type":36,"value":395},"Authorization:",{"type":31,"tag":106,"props":397,"children":398},{"style":384},[399],{"type":36,"value":400}," Bearer",{"type":31,"tag":106,"props":402,"children":403},{"style":384},[404],{"type":36,"value":405}," {token}\n",{"type":31,"tag":106,"props":407,"children":408},{"class":108,"line":127},[409],{"type":31,"tag":106,"props":410,"children":412},{"emptyLinePlaceholder":411},true,[413],{"type":36,"value":414},"\n",{"type":31,"tag":106,"props":416,"children":417},{"class":108,"line":136},[418],{"type":31,"tag":106,"props":419,"children":421},{"style":420},"--shiki-default:#E1E4E8",[422],{"type":36,"value":423},"{\n",{"type":31,"tag":106,"props":425,"children":426},{"class":108,"line":145},[427,432,438],{"type":31,"tag":106,"props":428,"children":429},{"style":378},[430],{"type":36,"value":431},"  \"version\"",{"type":31,"tag":106,"props":433,"children":435},{"style":434},"--shiki-default:#79B8FF",[436],{"type":36,"value":437},":",{"type":31,"tag":106,"props":439,"children":440},{"style":384},[441],{"type":36,"value":442}," 3,\n",{"type":31,"tag":106,"props":444,"children":445},{"class":108,"line":154},[446,451,455],{"type":31,"tag":106,"props":447,"children":448},{"style":378},[449],{"type":36,"value":450},"  \"actions\"",{"type":31,"tag":106,"props":452,"children":453},{"style":434},[454],{"type":36,"value":437},{"type":31,"tag":106,"props":456,"children":457},{"style":420},[458],{"type":36,"value":459}," [\n",{"type":31,"tag":106,"props":461,"children":462},{"class":108,"line":163},[463],{"type":31,"tag":106,"props":464,"children":465},{"style":420},[466],{"type":36,"value":467},"    {\n",{"type":31,"tag":106,"props":469,"children":470},{"class":108,"line":25},[471,476,480],{"type":31,"tag":106,"props":472,"children":473},{"style":378},[474],{"type":36,"value":475},"      \"action\"",{"type":31,"tag":106,"props":477,"children":478},{"style":434},[479],{"type":36,"value":437},{"type":31,"tag":106,"props":481,"children":482},{"style":384},[483],{"type":36,"value":484}," \"addLineItem\",\n",{"type":31,"tag":106,"props":486,"children":487},{"class":108,"line":180},[488,493,497],{"type":31,"tag":106,"props":489,"children":490},{"style":378},[491],{"type":36,"value":492},"      \"productId\"",{"type":31,"tag":106,"props":494,"children":495},{"style":434},[496],{"type":36,"value":437},{"type":31,"tag":106,"props":498,"children":499},{"style":384},[500],{"type":36,"value":501}," \"abc123\",\n",{"type":31,"tag":106,"props":503,"children":504},{"class":108,"line":189},[505,510,514],{"type":31,"tag":106,"props":506,"children":507},{"style":378},[508],{"type":36,"value":509},"      \"variantId\"",{"type":31,"tag":106,"props":511,"children":512},{"style":434},[513],{"type":36,"value":437},{"type":31,"tag":106,"props":515,"children":516},{"style":384},[517],{"type":36,"value":518}," 1,\n",{"type":31,"tag":106,"props":520,"children":521},{"class":108,"line":198},[522,527,531],{"type":31,"tag":106,"props":523,"children":524},{"style":378},[525],{"type":36,"value":526},"      \"quantity\"",{"type":31,"tag":106,"props":528,"children":529},{"style":434},[530],{"type":36,"value":437},{"type":31,"tag":106,"props":532,"children":533},{"style":434},[534],{"type":36,"value":535}," 2\n",{"type":31,"tag":106,"props":537,"children":538},{"class":108,"line":207},[539],{"type":31,"tag":106,"props":540,"children":541},{"style":420},[542],{"type":36,"value":319},{"type":31,"tag":106,"props":544,"children":545},{"class":108,"line":216},[546],{"type":31,"tag":106,"props":547,"children":548},{"style":420},[549],{"type":36,"value":550},"  ]\n",{"type":31,"tag":106,"props":552,"children":553},{"class":108,"line":225},[554],{"type":31,"tag":106,"props":555,"children":556},{"style":420},[557],{"type":36,"value":337},{"type":31,"tag":32,"props":559,"children":560},{},[561,563,569],{"type":36,"value":562},"This request returns P50 85ms, P95 180ms (from GCP europe-west1). However, note: the ",{"type":31,"tag":56,"props":564,"children":566},{"className":565},[],[567],{"type":36,"value":568},"version",{"type":36,"value":570}," field is required for optimistic locking. Every request must send the cart's current version; otherwise you get 409 Conflict. This requires retry logic in concurrent checkout scenarios.",{"type":31,"tag":32,"props":572,"children":573},{},[574],{"type":36,"value":575},"Operational cost: commercetools pricing is API-call based. After the first 50 million API calls\u002Fyear, billing starts ($0.0003\u002Fcall). Cost example: a site with 1 million monthly sessions averaging 15 API calls per session (product listing, product detail, cart mutations, checkout) = 180 million annual calls = 130 million billable calls = $39,000 in API cost alone. This adds to infrastructure costs. On BigCommerce, this cost is embedded in SaaS pricing.",{"type":31,"tag":32,"props":577,"children":578},{},[579,581,587,589,595,597,606],{"type":36,"value":580},"Multi-region: commercetools offers multi-region deployment on GCP and AWS. You choose one region for your project: ",{"type":31,"tag":56,"props":582,"children":584},{"className":583},[],[585],{"type":36,"value":586},"europe-west1",{"type":36,"value":588}," or ",{"type":31,"tag":56,"props":590,"children":592},{"className":591},[],[593],{"type":36,"value":594},"us-central1",{"type":36,"value":596},". No cross-region replication—you pick a single region. For global e-commerce, this means latency. Solution: in ",{"type":31,"tag":598,"props":599,"children":603},"a",{"href":600,"rel":601},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[602],"nofollow",[604],{"type":36,"value":605},"headless commerce",{"type":36,"value":607}," architecture, render the frontend at the edge (Cloudflare Workers, Vercel Edge Functions) and put the commercetools API behind a cache layer. Example architecture: cache product catalog in Cloudflare KV (TTL 60s), send cart mutations to origin always. Result: product listing returns in 40ms (from edge), cart operations take 180ms (to origin).",{"type":31,"tag":39,"props":609,"children":611},{"id":610},"shopify-plus-headless-layer-on-monolithic-root",[612],{"type":36,"value":613},"Shopify Plus: Headless Layer on Monolithic Root",{"type":31,"tag":32,"props":615,"children":616},{},[617],{"type":36,"value":618},"Shopify Plus says \"headless\" instead of \"composable,\" but under the hood sits a monolithic platform. With Hydrogen (React-based framework) and Storefront API, you build headless frontends, but checkout and admin remain entirely under Shopify's control. This hybrid model accelerates small teams but constrains large ones.",{"type":31,"tag":32,"props":620,"children":621},{},[622],{"type":36,"value":623},"Storefront API: GraphQL-only, rate-limited by cost (query complexity). Each GraphQL query has a \"cost\" value (simple product query = 5 points, nested variants + metafields = 15 points). Per store: 1000 points\u002Fsecond quota (Shopify Plus). If a homepage query listing 50 products costs 250 points, you can render 4 homepages per second. Traffic bursts trigger rate limits (429 errors).",{"type":31,"tag":32,"props":625,"children":626},{},[627,629,636],{"type":36,"value":628},"Hydrogen framework: Shopify's official React framework, built on Remix. The old version (Hydrogen v1) used Vite; the new version (Hydrogen v2) uses Remix's file-based routing. Built-in Shopify API client, cart management, i18n routing. Within ",{"type":31,"tag":598,"props":630,"children":633},{"href":631,"rel":632},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fshopify",[602],[634],{"type":36,"value":635},"Shopify Services",{"type":36,"value":637},", we use Hydrogen because it reduces boilerplate: cart state management, checkout redirect, API authentication ship ready.",{"type":31,"tag":32,"props":639,"children":640},{},[641],{"type":36,"value":642},"Example Hydrogen route:",{"type":31,"tag":96,"props":644,"children":648},{"className":645,"code":646,"language":647,"meta":15,"style":15},"language-typescript shiki shiki-themes github-dark","\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nimport {useLoaderData} from '@remix-run\u002Freact';\nimport {json} from '@shopify\u002Fremix-oxygen';\n\nexport async function loader({params, context}) {\n  const {product} = await context.storefront.query(PRODUCT_QUERY, {\n    variables: {handle: params.handle},\n  });\n  return json({product});\n}\n\nexport default function Product() {\n  const {product} = useLoaderData\u003Ctypeof loader>();\n  return \u003Cdiv>{product.title}\u003C\u002Fdiv>;\n}\n\nconst PRODUCT_QUERY = `#graphql\n  query Product($handle: String!) {\n    product(handle: $handle) {\n      id\n      title\n      priceRange {\n        minVariantPrice {\n          amount\n        }\n      }\n    }\n  }\n`;\n","typescript",[649],{"type":31,"tag":56,"props":650,"children":651},{"__ignoreMap":15},[652,661,690,715,722,771,829,837,845,863,870,877,903,946,986,993,1000,1023,1031,1039,1047,1055,1063,1071,1079,1086,1093,1101,1109],{"type":31,"tag":106,"props":653,"children":654},{"class":108,"line":109},[655],{"type":31,"tag":106,"props":656,"children":658},{"style":657},"--shiki-default:#6A737D",[659],{"type":36,"value":660},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":31,"tag":106,"props":662,"children":663},{"class":108,"line":118},[664,670,675,680,685],{"type":31,"tag":106,"props":665,"children":667},{"style":666},"--shiki-default:#F97583",[668],{"type":36,"value":669},"import",{"type":31,"tag":106,"props":671,"children":672},{"style":420},[673],{"type":36,"value":674}," {useLoaderData} ",{"type":31,"tag":106,"props":676,"children":677},{"style":666},[678],{"type":36,"value":679},"from",{"type":31,"tag":106,"props":681,"children":682},{"style":384},[683],{"type":36,"value":684}," '@remix-run\u002Freact'",{"type":31,"tag":106,"props":686,"children":687},{"style":420},[688],{"type":36,"value":689},";\n",{"type":31,"tag":106,"props":691,"children":692},{"class":108,"line":127},[693,697,702,706,711],{"type":31,"tag":106,"props":694,"children":695},{"style":666},[696],{"type":36,"value":669},{"type":31,"tag":106,"props":698,"children":699},{"style":420},[700],{"type":36,"value":701}," {json} ",{"type":31,"tag":106,"props":703,"children":704},{"style":666},[705],{"type":36,"value":679},{"type":31,"tag":106,"props":707,"children":708},{"style":384},[709],{"type":36,"value":710}," '@shopify\u002Fremix-oxygen'",{"type":31,"tag":106,"props":712,"children":713},{"style":420},[714],{"type":36,"value":689},{"type":31,"tag":106,"props":716,"children":717},{"class":108,"line":136},[718],{"type":31,"tag":106,"props":719,"children":720},{"emptyLinePlaceholder":411},[721],{"type":36,"value":414},{"type":31,"tag":106,"props":723,"children":724},{"class":108,"line":145},[725,730,735,740,745,750,756,761,766],{"type":31,"tag":106,"props":726,"children":727},{"style":666},[728],{"type":36,"value":729},"export",{"type":31,"tag":106,"props":731,"children":732},{"style":666},[733],{"type":36,"value":734}," async",{"type":31,"tag":106,"props":736,"children":737},{"style":666},[738],{"type":36,"value":739}," function",{"type":31,"tag":106,"props":741,"children":742},{"style":378},[743],{"type":36,"value":744}," loader",{"type":31,"tag":106,"props":746,"children":747},{"style":420},[748],{"type":36,"value":749},"({",{"type":31,"tag":106,"props":751,"children":753},{"style":752},"--shiki-default:#FFAB70",[754],{"type":36,"value":755},"params",{"type":31,"tag":106,"props":757,"children":758},{"style":420},[759],{"type":36,"value":760},", ",{"type":31,"tag":106,"props":762,"children":763},{"style":752},[764],{"type":36,"value":765},"context",{"type":31,"tag":106,"props":767,"children":768},{"style":420},[769],{"type":36,"value":770},"}) {\n",{"type":31,"tag":106,"props":772,"children":773},{"class":108,"line":154},[774,779,784,789,794,799,804,809,814,819,824],{"type":31,"tag":106,"props":775,"children":776},{"style":666},[777],{"type":36,"value":778},"  const",{"type":31,"tag":106,"props":780,"children":781},{"style":420},[782],{"type":36,"value":783}," {",{"type":31,"tag":106,"props":785,"children":786},{"style":434},[787],{"type":36,"value":788},"product",{"type":31,"tag":106,"props":790,"children":791},{"style":420},[792],{"type":36,"value":793},"} ",{"type":31,"tag":106,"props":795,"children":796},{"style":666},[797],{"type":36,"value":798},"=",{"type":31,"tag":106,"props":800,"children":801},{"style":666},[802],{"type":36,"value":803}," await",{"type":31,"tag":106,"props":805,"children":806},{"style":420},[807],{"type":36,"value":808}," context.storefront.",{"type":31,"tag":106,"props":810,"children":811},{"style":378},[812],{"type":36,"value":813},"query",{"type":31,"tag":106,"props":815,"children":816},{"style":420},[817],{"type":36,"value":818},"(",{"type":31,"tag":106,"props":820,"children":821},{"style":434},[822],{"type":36,"value":823},"PRODUCT_QUERY",{"type":31,"tag":106,"props":825,"children":826},{"style":420},[827],{"type":36,"value":828},", {\n",{"type":31,"tag":106,"props":830,"children":831},{"class":108,"line":163},[832],{"type":31,"tag":106,"props":833,"children":834},{"style":420},[835],{"type":36,"value":836},"    variables: {handle: params.handle},\n",{"type":31,"tag":106,"props":838,"children":839},{"class":108,"line":25},[840],{"type":31,"tag":106,"props":841,"children":842},{"style":420},[843],{"type":36,"value":844},"  });\n",{"type":31,"tag":106,"props":846,"children":847},{"class":108,"line":180},[848,853,858],{"type":31,"tag":106,"props":849,"children":850},{"style":666},[851],{"type":36,"value":852},"  return",{"type":31,"tag":106,"props":854,"children":855},{"style":378},[856],{"type":36,"value":857}," json",{"type":31,"tag":106,"props":859,"children":860},{"style":420},[861],{"type":36,"value":862},"({product});\n",{"type":31,"tag":106,"props":864,"children":865},{"class":108,"line":189},[866],{"type":31,"tag":106,"props":867,"children":868},{"style":420},[869],{"type":36,"value":337},{"type":31,"tag":106,"props":871,"children":872},{"class":108,"line":198},[873],{"type":31,"tag":106,"props":874,"children":875},{"emptyLinePlaceholder":411},[876],{"type":36,"value":414},{"type":31,"tag":106,"props":878,"children":879},{"class":108,"line":207},[880,884,889,893,898],{"type":31,"tag":106,"props":881,"children":882},{"style":666},[883],{"type":36,"value":729},{"type":31,"tag":106,"props":885,"children":886},{"style":666},[887],{"type":36,"value":888}," default",{"type":31,"tag":106,"props":890,"children":891},{"style":666},[892],{"type":36,"value":739},{"type":31,"tag":106,"props":894,"children":895},{"style":378},[896],{"type":36,"value":897}," Product",{"type":31,"tag":106,"props":899,"children":900},{"style":420},[901],{"type":36,"value":902},"() {\n",{"type":31,"tag":106,"props":904,"children":905},{"class":108,"line":216},[906,910,914,918,922,926,931,936,941],{"type":31,"tag":106,"props":907,"children":908},{"style":666},[909],{"type":36,"value":778},{"type":31,"tag":106,"props":911,"children":912},{"style":420},[913],{"type":36,"value":783},{"type":31,"tag":106,"props":915,"children":916},{"style":434},[917],{"type":36,"value":788},{"type":31,"tag":106,"props":919,"children":920},{"style":420},[921],{"type":36,"value":793},{"type":31,"tag":106,"props":923,"children":924},{"style":666},[925],{"type":36,"value":798},{"type":31,"tag":106,"props":927,"children":928},{"style":378},[929],{"type":36,"value":930}," useLoaderData",{"type":31,"tag":106,"props":932,"children":933},{"style":420},[934],{"type":36,"value":935},"\u003C",{"type":31,"tag":106,"props":937,"children":938},{"style":666},[939],{"type":36,"value":940},"typeof",{"type":31,"tag":106,"props":942,"children":943},{"style":420},[944],{"type":36,"value":945}," loader>();\n",{"type":31,"tag":106,"props":947,"children":948},{"class":108,"line":225},[949,953,958,963,968,973,977,982],{"type":31,"tag":106,"props":950,"children":951},{"style":666},[952],{"type":36,"value":852},{"type":31,"tag":106,"props":954,"children":955},{"style":420},[956],{"type":36,"value":957}," \u003C",{"type":31,"tag":106,"props":959,"children":960},{"style":378},[961],{"type":36,"value":962},"div",{"type":31,"tag":106,"props":964,"children":965},{"style":420},[966],{"type":36,"value":967},">{product.title}",{"type":31,"tag":106,"props":969,"children":970},{"style":666},[971],{"type":36,"value":972},"\u003C\u002F",{"type":31,"tag":106,"props":974,"children":975},{"style":420},[976],{"type":36,"value":962},{"type":31,"tag":106,"props":978,"children":979},{"style":666},[980],{"type":36,"value":981},">",{"type":31,"tag":106,"props":983,"children":984},{"style":420},[985],{"type":36,"value":689},{"type":31,"tag":106,"props":987,"children":988},{"class":108,"line":234},[989],{"type":31,"tag":106,"props":990,"children":991},{"style":420},[992],{"type":36,"value":337},{"type":31,"tag":106,"props":994,"children":995},{"class":108,"line":243},[996],{"type":31,"tag":106,"props":997,"children":998},{"emptyLinePlaceholder":411},[999],{"type":36,"value":414},{"type":31,"tag":106,"props":1001,"children":1002},{"class":108,"line":252},[1003,1008,1013,1018],{"type":31,"tag":106,"props":1004,"children":1005},{"style":666},[1006],{"type":36,"value":1007},"const",{"type":31,"tag":106,"props":1009,"children":1010},{"style":434},[1011],{"type":36,"value":1012}," PRODUCT_QUERY",{"type":31,"tag":106,"props":1014,"children":1015},{"style":666},[1016],{"type":36,"value":1017}," =",{"type":31,"tag":106,"props":1019,"children":1020},{"style":384},[1021],{"type":36,"value":1022}," `#graphql\n",{"type":31,"tag":106,"props":1024,"children":1025},{"class":108,"line":261},[1026],{"type":31,"tag":106,"props":1027,"children":1028},{"style":384},[1029],{"type":36,"value":1030},"  query Product($handle: String!) {\n",{"type":31,"tag":106,"props":1032,"children":1033},{"class":108,"line":270},[1034],{"type":31,"tag":106,"props":1035,"children":1036},{"style":384},[1037],{"type":36,"value":1038},"    product(handle: $handle) {\n",{"type":31,"tag":106,"props":1040,"children":1041},{"class":108,"line":279},[1042],{"type":31,"tag":106,"props":1043,"children":1044},{"style":384},[1045],{"type":36,"value":1046},"      id\n",{"type":31,"tag":106,"props":1048,"children":1049},{"class":108,"line":287},[1050],{"type":31,"tag":106,"props":1051,"children":1052},{"style":384},[1053],{"type":36,"value":1054},"      title\n",{"type":31,"tag":106,"props":1056,"children":1057},{"class":108,"line":295},[1058],{"type":31,"tag":106,"props":1059,"children":1060},{"style":384},[1061],{"type":36,"value":1062},"      priceRange {\n",{"type":31,"tag":106,"props":1064,"children":1065},{"class":108,"line":304},[1066],{"type":31,"tag":106,"props":1067,"children":1068},{"style":384},[1069],{"type":36,"value":1070},"        minVariantPrice {\n",{"type":31,"tag":106,"props":1072,"children":1073},{"class":108,"line":313},[1074],{"type":31,"tag":106,"props":1075,"children":1076},{"style":384},[1077],{"type":36,"value":1078},"          amount\n",{"type":31,"tag":106,"props":1080,"children":1081},{"class":108,"line":322},[1082],{"type":31,"tag":106,"props":1083,"children":1084},{"style":384},[1085],{"type":36,"value":301},{"type":31,"tag":106,"props":1087,"children":1088},{"class":108,"line":331},[1089],{"type":31,"tag":106,"props":1090,"children":1091},{"style":384},[1092],{"type":36,"value":310},{"type":31,"tag":106,"props":1094,"children":1096},{"class":108,"line":1095},27,[1097],{"type":31,"tag":106,"props":1098,"children":1099},{"style":384},[1100],{"type":36,"value":319},{"type":31,"tag":106,"props":1102,"children":1104},{"class":108,"line":1103},28,[1105],{"type":31,"tag":106,"props":1106,"children":1107},{"style":384},[1108],{"type":36,"value":328},{"type":31,"tag":106,"props":1110,"children":1112},{"class":108,"line":1111},29,[1113,1118],{"type":31,"tag":106,"props":1114,"children":1115},{"style":384},[1116],{"type":36,"value":1117},"`",{"type":31,"tag":106,"props":1119,"children":1120},{"style":420},[1121],{"type":36,"value":689},{"type":31,"tag":32,"props":1123,"children":1124},{},[1125],{"type":36,"value":1126},"When deployed to Oxygen (Shopify's edge platform), global average latency is 90ms (Shopify Performance Dashboard 2025). But Oxygen is limited to Shopify Plus customers; standard plans cannot access it (you can deploy to Vercel, but Storefront API quota remains the same).",{"type":31,"tag":32,"props":1128,"children":1129},{},[1130],{"type":36,"value":1131},"Tradeoff: checkout cannot be customized. Shopify's checkout page renders on Shopify's servers, separate from your headless frontend. If you want custom loyalty point display at checkout, you use Shopify Scripts (Liquid-based) or Checkout UI Extensions (React components with limited APIs). On commercetools, you build checkout entirely.",{"type":31,"tag":39,"props":1133,"children":1135},{"id":1134},"decision-matrix-which-vendor-for-which-scenario",[1136],{"type":36,"value":1137},"Decision Matrix: Which Vendor for Which Scenario",{"type":31,"tag":32,"props":1139,"children":1140},{},[1141],{"type":36,"value":1142},"Comparing all three vendors by concrete metrics:",{"type":31,"tag":1144,"props":1145,"children":1146},"table",{},[1147,1175],{"type":31,"tag":1148,"props":1149,"children":1150},"thead",{},[1151],{"type":31,"tag":1152,"props":1153,"children":1154},"tr",{},[1155,1161,1166,1170],{"type":31,"tag":1156,"props":1157,"children":1158},"th",{},[1159],{"type":36,"value":1160},"Metric",{"type":31,"tag":1156,"props":1162,"children":1163},{},[1164],{"type":36,"value":1165},"BigCommerce",{"type":31,"tag":1156,"props":1167,"children":1168},{},[1169],{"type":36,"value":24},{"type":31,"tag":1156,"props":1171,"children":1172},{},[1173],{"type":36,"value":1174},"Shopify Plus",{"type":31,"tag":1176,"props":1177,"children":1178},"tbody",{},[1179,1203,1226,1249,1271,1293],{"type":31,"tag":1152,"props":1180,"children":1181},{},[1182,1188,1193,1198],{"type":31,"tag":1183,"props":1184,"children":1185},"td",{},[1186],{"type":36,"value":1187},"API P50 latency",{"type":31,"tag":1183,"props":1189,"children":1190},{},[1191],{"type":36,"value":1192},"95ms (GraphQL)",{"type":31,"tag":1183,"props":1194,"children":1195},{},[1196],{"type":36,"value":1197},"85ms (REST)",{"type":31,"tag":1183,"props":1199,"children":1200},{},[1201],{"type":36,"value":1202},"120ms (GraphQL)",{"type":31,"tag":1152,"props":1204,"children":1205},{},[1206,1211,1216,1221],{"type":31,"tag":1183,"props":1207,"children":1208},{},[1209],{"type":36,"value":1210},"Multi-region",{"type":31,"tag":1183,"props":1212,"children":1213},{},[1214],{"type":36,"value":1215},"Vendor-controlled (US\u002FEU)",{"type":31,"tag":1183,"props":1217,"children":1218},{},[1219],{"type":36,"value":1220},"GCP\u002FAWS regional",{"type":31,"tag":1183,"props":1222,"children":1223},{},[1224],{"type":36,"value":1225},"Global edge (Oxygen)",{"type":31,"tag":1152,"props":1227,"children":1228},{},[1229,1234,1239,1244],{"type":31,"tag":1183,"props":1230,"children":1231},{},[1232],{"type":36,"value":1233},"Developer onboarding",{"type":31,"tag":1183,"props":1235,"children":1236},{},[1237],{"type":36,"value":1238},"Medium (Stencil + Next.js)",{"type":31,"tag":1183,"props":1240,"children":1241},{},[1242],{"type":36,"value":1243},"High (pure API)",{"type":31,"tag":1183,"props":1245,"children":1246},{},[1247],{"type":36,"value":1248},"Low (Hydrogen)",{"type":31,"tag":1152,"props":1250,"children":1251},{},[1252,1257,1262,1266],{"type":31,"tag":1183,"props":1253,"children":1254},{},[1255],{"type":36,"value":1256},"Checkout control",{"type":31,"tag":1183,"props":1258,"children":1259},{},[1260],{"type":36,"value":1261},"Full",{"type":31,"tag":1183,"props":1263,"children":1264},{},[1265],{"type":36,"value":1261},{"type":31,"tag":1183,"props":1267,"children":1268},{},[1269],{"type":36,"value":1270},"Limited (Shopify checkout)",{"type":31,"tag":1152,"props":1272,"children":1273},{},[1274,1279,1284,1289],{"type":31,"tag":1183,"props":1275,"children":1276},{},[1277],{"type":36,"value":1278},"Monthly API cost (1M sessions)",{"type":31,"tag":1183,"props":1280,"children":1281},{},[1282],{"type":36,"value":1283},"Embedded in SaaS",{"type":31,"tag":1183,"props":1285,"children":1286},{},[1287],{"type":36,"value":1288},"~$3,250",{"type":31,"tag":1183,"props":1290,"children":1291},{},[1292],{"type":36,"value":1283},{"type":31,"tag":1152,"props":1294,"children":1295},{},[1296,1301,1306,1311],{"type":31,"tag":1183,"props":1297,"children":1298},{},[1299],{"type":36,"value":1300},"Built-in features",{"type":31,"tag":1183,"props":1302,"children":1303},{},[1304],{"type":36,"value":1305},"Medium (POS, B2B)",{"type":31,"tag":1183,"props":1307,"children":1308},{},[1309],{"type":36,"value":1310},"Low (API only)",{"type":31,"tag":1183,"props":1312,"children":1313},{},[1314],{"type":36,"value":1315},"High (Flow, Script)",{"type":31,"tag":32,"props":1317,"children":1318},{},[1319],{"type":36,"value":1320},"Scenario-based recommendations:",{"type":31,"tag":32,"props":1322,"children":1323},{},[1324,1330],{"type":31,"tag":1325,"props":1326,"children":1327},"strong",{},[1328],{"type":36,"value":1329},"Choose BigCommerce if:",{"type":36,"value":1331}," B2B complexity exists (quote management, customer groups), you don't need immediate headless migration but want to keep it optional later. Use multiple storefronts (different brands, same backend).",{"type":31,"tag":32,"props":1333,"children":1334},{},[1335,1340],{"type":31,"tag":1325,"props":1336,"children":1337},{},[1338],{"type":36,"value":1339},"Choose commercetools if:",{"type":36,"value":1341}," you want full ownership (every piece custom-built, including checkout), you have API-first infrastructure (mobile app + web + POS fed from same API), you have 100M+ annual sessions (API cost optimizable via caching strategies).",{"type":31,"tag":32,"props":1343,"children":1344},{},[1345,1350],{"type":31,"tag":1325,"props":1346,"children":1347},{},[1348],{"type":36,"value":1349},"Choose Shopify Plus if:",{"type":36,"value":1351}," your dev team is small (2-4 developers), checkout customization isn't required, you benefit from Shopify App Store integrations (Klaviyo, Yotpo, Gorgias have built-in connectors).",{"type":31,"tag":39,"props":1353,"children":1355},{"id":1354},"composables-hidden-cost-orchestration",[1356],{"type":36,"value":1357},"Composable's Hidden Cost: Orchestration",{"type":31,"tag":32,"props":1359,"children":1360},{},[1361],{"type":36,"value":1362},"Vendor selection masks the post-deployment challenge: orchestration. MACH architecture requires checkout flow as a chain:",{"type":31,"tag":1364,"props":1365,"children":1366},"ol",{},[1367,1373,1378,1383,1388],{"type":31,"tag":1368,"props":1369,"children":1370},"li",{},[1371],{"type":36,"value":1372},"Frontend (Next.js) → Storefront API (product\u002Fcart)",{"type":31,"tag":1368,"props":1374,"children":1375},{},[1376],{"type":36,"value":1377},"Payment gateway (Stripe\u002FAdyen) → backend orchestrator",{"type":31,"tag":1368,"props":1379,"children":1380},{},[1381],{"type":36,"value":1382},"OMS (Order Management) → commercetools\u002FBigCommerce",{"type":31,"tag":1368,"props":1384,"children":1385},{},[1386],{"type":36,"value":1387},"Email (Klaviyo\u002FSendGrid) → customer data",{"type":31,"tag":1368,"props":1389,"children":1390},{},[1391],{"type":36,"value":1392},"Inventory sync (ERP) → stock update",{"type":31,"tag":32,"props":1394,"children":1395},{},[1396],{"type":36,"value":1397},"If one link fails (e.g., Stripe webhook arrives 5 seconds late), customer experience breaks. On monolithic platforms (e.g., Magento), this flow is vendor-solved. On composable, you write the orchestration code.",{"type":31,"tag":32,"props":1399,"children":1400},{},[1401],{"type":36,"value":1402},"Example orchestration (pseudo-code):",{"type":31,"tag":96,"props":1404,"children":1408},{"className":1405,"code":1406,"language":1407,"meta":15,"style":15},"language-javascript shiki shiki-themes github-dark","async function handleCheckout(cartId, paymentToken) {\n  const cart = await commercetools.getCart(cartId);\n  const paymentResult = await stripe.capturePayment(paymentToken, cart.total);\n  \n  if (paymentResult.status === 'succeeded') {\n    const order = await commercetools.createOrder(cartId);\n    await klaviyo.trackEvent('Order Placed', { orderId: order.id });\n    await oms.syncOrder(order);\n    return { success: true, orderId: order.id };\n  } else {\n    \u002F\u002F Retry logic, error handling, idempotency\n    throw new CheckoutError('Payment failed');\n  }\n}\n","javascript",[1409],{"type":31,"tag":56,"props":1410,"children":1411},{"__ignoreMap":15},[1412,1452,1487,1522,1530,1557,1591,1623,1645,1668,1686,1694,1726,1733],{"type":31,"tag":106,"props":1413,"children":1414},{"class":108,"line":109},[1415,1420,1424,1429,1433,1438,1442,1447],{"type":31,"tag":106,"props":1416,"children":1417},{"style":666},[1418],{"type":36,"value":1419},"async",{"type":31,"tag":106,"props":1421,"children":1422},{"style":666},[1423],{"type":36,"value":739},{"type":31,"tag":106,"props":1425,"children":1426},{"style":378},[1427],{"type":36,"value":1428}," handleCheckout",{"type":31,"tag":106,"props":1430,"children":1431},{"style":420},[1432],{"type":36,"value":818},{"type":31,"tag":106,"props":1434,"children":1435},{"style":752},[1436],{"type":36,"value":1437},"cartId",{"type":31,"tag":106,"props":1439,"children":1440},{"style":420},[1441],{"type":36,"value":760},{"type":31,"tag":106,"props":1443,"children":1444},{"style":752},[1445],{"type":36,"value":1446},"paymentToken",{"type":31,"tag":106,"props":1448,"children":1449},{"style":420},[1450],{"type":36,"value":1451},") {\n",{"type":31,"tag":106,"props":1453,"children":1454},{"class":108,"line":118},[1455,1459,1464,1468,1472,1477,1482],{"type":31,"tag":106,"props":1456,"children":1457},{"style":666},[1458],{"type":36,"value":778},{"type":31,"tag":106,"props":1460,"children":1461},{"style":434},[1462],{"type":36,"value":1463}," cart",{"type":31,"tag":106,"props":1465,"children":1466},{"style":666},[1467],{"type":36,"value":1017},{"type":31,"tag":106,"props":1469,"children":1470},{"style":666},[1471],{"type":36,"value":803},{"type":31,"tag":106,"props":1473,"children":1474},{"style":420},[1475],{"type":36,"value":1476}," commercetools.",{"type":31,"tag":106,"props":1478,"children":1479},{"style":378},[1480],{"type":36,"value":1481},"getCart",{"type":31,"tag":106,"props":1483,"children":1484},{"style":420},[1485],{"type":36,"value":1486},"(cartId);\n",{"type":31,"tag":106,"props":1488,"children":1489},{"class":108,"line":127},[1490,1494,1499,1503,1507,1512,1517],{"type":31,"tag":106,"props":1491,"children":1492},{"style":666},[1493],{"type":36,"value":778},{"type":31,"tag":106,"props":1495,"children":1496},{"style":434},[1497],{"type":36,"value":1498}," paymentResult",{"type":31,"tag":106,"props":1500,"children":1501},{"style":666},[1502],{"type":36,"value":1017},{"type":31,"tag":106,"props":1504,"children":1505},{"style":666},[1506],{"type":36,"value":803},{"type":31,"tag":106,"props":1508,"children":1509},{"style":420},[1510],{"type":36,"value":1511}," stripe.",{"type":31,"tag":106,"props":1513,"children":1514},{"style":378},[1515],{"type":36,"value":1516},"capturePayment",{"type":31,"tag":106,"props":1518,"children":1519},{"style":420},[1520],{"type":36,"value":1521},"(paymentToken, cart.total);\n",{"type":31,"tag":106,"props":1523,"children":1524},{"class":108,"line":136},[1525],{"type":31,"tag":106,"props":1526,"children":1527},{"style":420},[1528],{"type":36,"value":1529},"  \n",{"type":31,"tag":106,"props":1531,"children":1532},{"class":108,"line":145},[1533,1538,1543,1548,1553],{"type":31,"tag":106,"props":1534,"children":1535},{"style":666},[1536],{"type":36,"value":1537},"  if",{"type":31,"tag":106,"props":1539,"children":1540},{"style":420},[1541],{"type":36,"value":1542}," (paymentResult.status ",{"type":31,"tag":106,"props":1544,"children":1545},{"style":666},[1546],{"type":36,"value":1547},"===",{"type":31,"tag":106,"props":1549,"children":1550},{"style":384},[1551],{"type":36,"value":1552}," 'succeeded'",{"type":31,"tag":106,"props":1554,"children":1555},{"style":420},[1556],{"type":36,"value":1451},{"type":31,"tag":106,"props":1558,"children":1559},{"class":108,"line":154},[1560,1565,1570,1574,1578,1582,1587],{"type":31,"tag":106,"props":1561,"children":1562},{"style":666},[1563],{"type":36,"value":1564},"    const",{"type":31,"tag":106,"props":1566,"children":1567},{"style":434},[1568],{"type":36,"value":1569}," order",{"type":31,"tag":106,"props":1571,"children":1572},{"style":666},[1573],{"type":36,"value":1017},{"type":31,"tag":106,"props":1575,"children":1576},{"style":666},[1577],{"type":36,"value":803},{"type":31,"tag":106,"props":1579,"children":1580},{"style":420},[1581],{"type":36,"value":1476},{"type":31,"tag":106,"props":1583,"children":1584},{"style":378},[1585],{"type":36,"value":1586},"createOrder",{"type":31,"tag":106,"props":1588,"children":1589},{"style":420},[1590],{"type":36,"value":1486},{"type":31,"tag":106,"props":1592,"children":1593},{"class":108,"line":163},[1594,1599,1604,1609,1613,1618],{"type":31,"tag":106,"props":1595,"children":1596},{"style":666},[1597],{"type":36,"value":1598},"    await",{"type":31,"tag":106,"props":1600,"children":1601},{"style":420},[1602],{"type":36,"value":1603}," klaviyo.",{"type":31,"tag":106,"props":1605,"children":1606},{"style":378},[1607],{"type":36,"value":1608},"trackEvent",{"type":31,"tag":106,"props":1610,"children":1611},{"style":420},[1612],{"type":36,"value":818},{"type":31,"tag":106,"props":1614,"children":1615},{"style":384},[1616],{"type":36,"value":1617},"'Order Placed'",{"type":31,"tag":106,"props":1619,"children":1620},{"style":420},[1621],{"type":36,"value":1622},", { orderId: order.id });\n",{"type":31,"tag":106,"props":1624,"children":1625},{"class":108,"line":25},[1626,1630,1635,1640],{"type":31,"tag":106,"props":1627,"children":1628},{"style":666},[1629],{"type":36,"value":1598},{"type":31,"tag":106,"props":1631,"children":1632},{"style":420},[1633],{"type":36,"value":1634}," oms.",{"type":31,"tag":106,"props":1636,"children":1637},{"style":378},[1638],{"type":36,"value":1639},"syncOrder",{"type":31,"tag":106,"props":1641,"children":1642},{"style":420},[1643],{"type":36,"value":1644},"(order);\n",{"type":31,"tag":106,"props":1646,"children":1647},{"class":108,"line":180},[1648,1653,1658,1663],{"type":31,"tag":106,"props":1649,"children":1650},{"style":666},[1651],{"type":36,"value":1652},"    return",{"type":31,"tag":106,"props":1654,"children":1655},{"style":420},[1656],{"type":36,"value":1657}," { success: ",{"type":31,"tag":106,"props":1659,"children":1660},{"style":434},[1661],{"type":36,"value":1662},"true",{"type":31,"tag":106,"props":1664,"children":1665},{"style":420},[1666],{"type":36,"value":1667},", orderId: order.id };\n",{"type":31,"tag":106,"props":1669,"children":1670},{"class":108,"line":189},[1671,1676,1681],{"type":31,"tag":106,"props":1672,"children":1673},{"style":420},[1674],{"type":36,"value":1675},"  } ",{"type":31,"tag":106,"props":1677,"children":1678},{"style":666},[1679],{"type":36,"value":1680},"else",{"type":31,"tag":106,"props":1682,"children":1683},{"style":420},[1684],{"type":36,"value":1685}," {\n",{"type":31,"tag":106,"props":1687,"children":1688},{"class":108,"line":198},[1689],{"type":31,"tag":106,"props":1690,"children":1691},{"style":657},[1692],{"type":36,"value":1693},"    \u002F\u002F Retry logic, error handling, idempotency\n",{"type":31,"tag":106,"props":1695,"children":1696},{"class":108,"line":207},[1697,1702,1707,1712,1716,1721],{"type":31,"tag":106,"props":1698,"children":1699},{"style":666},[1700],{"type":36,"value":1701},"    throw",{"type":31,"tag":106,"props":1703,"children":1704},{"style":666},[1705],{"type":36,"value":1706}," new",{"type":31,"tag":106,"props":1708,"children":1709},{"style":378},[1710],{"type":36,"value":1711}," CheckoutError",{"type":31,"tag":106,"props":1713,"children":1714},{"style":420},[1715],{"type":36,"value":818},{"type":31,"tag":106,"props":1717,"children":1718},{"style":384},[1719],{"type":36,"value":1720},"'Payment failed'",{"type":31,"tag":106,"props":1722,"children":1723},{"style":420},[1724],{"type":36,"value":1725},");\n",{"type":31,"tag":106,"props":1727,"children":1728},{"class":108,"line":216},[1729],{"type":31,"tag":106,"props":1730,"children":1731},{"style":420},[1732],{"type":36,"value":328},{"type":31,"tag":106,"props":1734,"children":1735},{"class":108,"line":225},[1736],{"type":31,"tag":106,"props":1737,"children":1738},{"style":420},[1739],{"type":36,"value":337},{"type":31,"tag":32,"props":1741,"children":1742},{},[1743],{"type":36,"value":1744},"This code looks simple but production requires handling these edge cases:",{"type":31,"tag":1746,"props":1747,"children":1748},"ul",{},[1749,1754,1759],{"type":31,"tag":1368,"props":1750,"children":1751},{},[1752],{"type":36,"value":1753},"Stripe succeeds but commercetools order creation fails → payment captured but order missing (refund needed)",{"type":31,"tag":1368,"props":1755,"children":1756},{},[1757],{"type":36,"value":1758},"Klaviyo event send fails → customer never gets email (retry queue needed)",{"type":31,"tag":1368,"props":1760,"children":1761},{},[1762],{"type":36,"value":1763},"Network timeout → is the request duplicate? How is idempotency checked?",{"type":31,"tag":32,"props":1765,"children":1766},{},[1767],{"type":36,"value":1768},"Writing, testing, monitoring this orchestration demands team bandwidth. On Shopify Plus, this flow is Shopify Flow (no-code). On commercetools, you must write AWS Step Functions or Temporal workflows.",{"type":31,"tag":39,"props":1770,"children":1772},{"id":1771},"frontend-performance-headlesss-tbtlcp-tradeoff",[1773],{"type":36,"value":1774},"Frontend Performance: Headless's TBT\u002FLCP Tradeoff",{"type":31,"tag":32,"props":1776,"children":1777},{},[1778],{"type":36,"value":1779},"The assumption that composable commerce is \"fast\" is misleading. Is a headless frontend (Next.js + Storefront API) faster than a monolithic theme (Liquid, Stencil)? It varies.",{"type":31,"tag":32,"props":1781,"children":1782},{},[1783],{"type":36,"value":1784},"Example benchmark (Shopify Hydrogen vs Liquid, based on Dawn theme):",{"type":31,"tag":1144,"props":1786,"children":1787},{},[1788,1808],{"type":31,"tag":1148,"props":1789,"children":1790},{},[1791],{"type":31,"tag":1152,"props":1792,"children":1793},{},[1794,1798,1803],{"type":31,"tag":1156,"props":1795,"children":1796},{},[1797],{"type":36,"value":1160},{"type":31,"tag":1156,"props":1799,"children":1800},{},[1801],{"type":36,"value":1802},"Liquid (Dawn)",{"type":31,"tag":1156,"props":1804,"children":1805},{},[1806],{"type":36,"value":1807},"Hydrogen (Oxygen)",{"type":31,"tag":1176,"props":1809,"children":1810},{},[1811,1829,1847,1865],{"type":31,"tag":1152,"props":1812,"children":1813},{},[1814,1819,1824],{"type":31,"tag":1183,"props":1815,"children":1816},{},[1817],{"type":36,"value":1818},"LCP",{"type":31,"tag":1183,"props":1820,"children":1821},{},[1822],{"type":36,"value":1823},"1.8s",{"type":31,"tag":1183,"props":1825,"children":1826},{},[1827],{"type":36,"value":1828},"1.2s",{"type":31,"tag":1152,"props":1830,"children":1831},{},[1832,1837,1842],{"type":31,"tag":1183,"props":1833,"children":1834},{},[1835],{"type":36,"value":1836},"TBT",{"type":31,"tag":1183,"props":1838,"children":1839},{},[1840],{"type":36,"value":1841},"420ms",{"type":31,"tag":1183,"props":1843,"children":1844},{},[1845],{"type":36,"value":1846},"180ms",{"type":31,"tag":1152,"props":1848,"children":1849},{},[1850,1855,1860],{"type":31,"tag":1183,"props":1851,"children":1852},{},[1853],{"type":36,"value":1854},"FCP",{"type":31,"tag":1183,"props":1856,"children":1857},{},[1858],{"type":36,"value":1859},"0.9s",{"type":31,"tag":1183,"props":1861,"children":1862},{},[1863],{"type":36,"value":1864},"0.7s",{"type":31,"tag":1152,"props":1866,"children":1867},{},[1868,1873,1878],{"type":31,"tag":1183,"props":1869,"children":1870},{},[1871],{"type":36,"value":1872},"JavaScript bundle",{"type":31,"tag":1183,"props":1874,"children":1875},{},[1876],{"type":36,"value":1877},"45KB",{"type":31,"tag":1183,"props":1879,"children":1880},{},[1881],{"type":36,"value":1882},"180KB",{"type":31,"tag":32,"props":1884,"children":1885},{},[1886],{"type":36,"value":1887},"Hydrogen renders faster (LCP 1.2s vs 1.8s) because it uses server-side rendering and edge caching. But JavaScript bundle is 4x larger (React + Remix overhead). If client interaction is heavy (filters, wishlist, cart preview), TBT increases.",{"type":31,"tag":32,"props":1889,"children":1890},{},[1891,1893,1900],{"type":36,"value":1892},"Tradeoff: unless you optimize JavaScript in headless, you gain fast render but lose fast interaction. In ",{"type":31,"tag":598,"props":1894,"children":1897},{"href":1895,"rel":1896},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fui-ux",[602],[1898],{"type":36,"value":1899},"UI\u002FUX Design",{"type":36,"value":1901}," process, we account for this tradeoff: move critical interactions (add-to-cart, checkout) to server actions, lazy-load client JavaScript.",{"type":31,"tag":39,"props":1903,"children":1905},{"id":1904},"decision-process",[1906],{"type":36,"value":1907},"Decision Process",{"type":31,"tag":32,"props":1909,"children":1910},{},[1911],{"type":36,"value":1912},"Make the composable commerce choice in this order:",{"type":31,"tag":1364,"props":1914,"children":1915},{},[1916,1926,1936,1946,1956],{"type":31,"tag":1368,"props":1917,"children":1918},{},[1919,1924],{"type":31,"tag":1325,"props":1920,"children":1921},{},[1922],{"type":36,"value":1923},"Checkout control:",{"type":36,"value":1925}," if you must fully customize checkout (subscription logic, dynamic pricing, custom payment flow) → commercetools or BigCommerce. Shopify Plus is out.",{"type":31,"tag":1368,"props":1927,"children":1928},{},[1929,1934],{"type":31,"tag":1325,"props":1930,"children":1931},{},[1932],{"type":36,"value":1933},"Team capacity:",{"type":36,"value":1935}," with 2-4 developers, you cannot bear operational overhead → Shopify Plus. With 8+ developers and dedicated DevOps → commercetools.",{"type":31,"tag":1368,"props":1937,"children":1938},{},[1939,1944],{"type":31,"tag":1325,"props":1940,"children":1941},{},[1942],{"type":36,"value":1943},"Traffic profile:",{"type":36,"value":1945}," if you have global multi-region traffic and edge rendering is critical → Shopify Plus (Oxygen) or BigCommerce + Cloudflare Workers. Single-region traffic → commercetools (regional GCP deployment suffices).",{"type":31,"tag":1368,"props":1947,"children":1948},{},[1949,1954],{"type":31,"tag":1325,"props":1950,"children":1951},{},[1952],{"type":36,"value":1953},"API budget:",{"type":36,"value":1955}," high session-to-API-call ratio (e.g., marketplace, 50+ API calls per session) → calculate commercetools API cost. Low API calls per session → vendor matters less.",{"type":31,"tag":1368,"props":1957,"children":1958},{},[1959,1964],{"type":31,"tag":1325,"props":1960,"children":1961},{},[1962],{"type":36,"value":1963},"Built-in features:",{"type":36,"value":1965}," if B2B, POS, multi-storefront, quote management required → BigCommerce. Pure DTC e-commerce → Shopify Plus sufficient. Enterprise B2B + full control → commercetools.",{"type":31,"tag":32,"props":1967,"children":1968},{},[1969],{"type":36,"value":1970},"In headless migration, put these numbers on the table, not buzzwords: API latency, bundle size, orchestration complexity, team velocity. \"Composable\" will be generic by 2027—now decide which tradeoffs you can accept.",{"type":31,"tag":1972,"props":1973,"children":1974},"style",{},[1975],{"type":36,"value":1976},"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":15,"searchDepth":127,"depth":127,"links":1978},[1979,1980,1981,1982,1983,1984,1985,1986],{"id":41,"depth":118,"text":44},{"id":71,"depth":118,"text":74},{"id":350,"depth":118,"text":353},{"id":610,"depth":118,"text":613},{"id":1134,"depth":118,"text":1137},{"id":1354,"depth":118,"text":1357},{"id":1771,"depth":118,"text":1774},{"id":1904,"depth":118,"text":1907},"markdown","content:ru:tech:composable-commerce-mach-mimarisi-production-realitesi.md","content","ru\u002Ftech\u002Fcomposable-commerce-mach-mimarisi-production-realitesi.md","ru\u002Ftech\u002Fcomposable-commerce-mach-mimarisi-production-realitesi","md",1785967505863]