[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fde\u002Ftech\u002Fcomposable-commerce-mach-produktion":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":6,"_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-Architektur Production-Realität","BigCommerce, commercetools, Shopify Plus — welche Kosten bringt MACH-Flexibilität in der Praxis? Was akzeptierst du in Production?","2026-06-07",[21,22,23,24,25],"composable-commerce","mach-architektur","headless-commerce","shopify-plus","bigcommerce",9,"Roibase",{"type":29,"children":30,"toc":1144},"root",[31,39,46,51,62,72,82,88,93,103,113,120,766,771,777,782,791,800,810,816,821,831,849,859,865,1076,1082,1087,1097,1107,1117,1127,1133,1138],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Composable Commerce wird seit 2024 als \"neue Spielregel\" des Markts verkauft. MACH-Prinzipien (Microservices, API-first, Cloud-native, Headless) sollen monolithische Plattformen ersetzen. In Production sieht es anders aus: BigCommerce Catalyst-Bundle 850kB, commercetools Minimum-Integration $120k, Shopify Plus' Composable-Features kommen mit Hydrogen 2.0 Migration-Aufwand. Vor einer Entscheidung musst du die Tradeoffs in Zahlen sprechen.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"die-echte-rechnung-des-mach-versprechens",[44],{"type":37,"value":45},"Die echte Rechnung des MACH-Versprechens",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Das Kernversprechen der Composable-Architektur ist Flexibilität: Frontend, Backend, Payment, Search — jeder läuft unabhängig. Du kannst tauschen, wenn nötig. In Production wird diese Flexibilität zu drei Kostenblöcken.",{"type":32,"tag":33,"props":52,"children":53},{},[54,60],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Erste Kosten: Integration-Startzeit.",{"type":37,"value":61}," Bei API-only-Plattformen wie commercetools baust du vom Frontend bis zum Checkout alles selbst. Durchschnittliche MVP: 16–20 Wochen. Bei Shopify Plus läuft dieselbe Erfahrung in 4 Wochen. BigCommerce Catalyst ist ein Mittelweg: Next.js + GraphQL Storefront API sind vorkonfiguriert, aber alle Components — Product Listing, Cart State — musst du customizen (8–12 Wochen).",{"type":32,"tag":33,"props":63,"children":64},{},[65,70],{"type":32,"tag":55,"props":66,"children":67},{},[68],{"type":37,"value":69},"Zweite Kosten: Backend-Orchestrierung.",{"type":37,"value":71}," In MACH-Umgebungen läuft jeder Service isoliert — aber die State-Synchronisierung zwischen ihnen liegt bei dir. Beispiel: Inventory Service (Fluent Commerce), Pricing (Pimcore), Promotions (Talon.One) sind separate Endpoints. Für Echtzeit-Koordination brauchst du einen Event Bus (Kafka \u002F AWS EventBridge). Mittleres E-Commerce-Setup: mindestens 3 Engineer-Months für Orchestration.",{"type":32,"tag":33,"props":73,"children":74},{},[75,80],{"type":32,"tag":55,"props":76,"children":77},{},[78],{"type":37,"value":79},"Dritte Kosten: Bundle-Größe.",{"type":37,"value":81}," Headless = Custom-Frontend-Code. BigCommerce Catalyst: 850kB JavaScript (nach gzip ~240kB). Shopify Hydrogen 2.0: nutzt React Server Components, durchschnittlich 320kB. Beispiel-Next.js-Frontend von commercetools: 950kB (mit Client-Side Cart State). Zum Vergleich: Shopify Liquid Theme 120–180kB. Weil der HTML Server-seitig gerendert wird, JavaScript minimal.",{"type":32,"tag":40,"props":83,"children":85},{"id":84},"bigcommerce-catalyst-der-mittelweg-kompromiss",[86],{"type":37,"value":87},"BigCommerce Catalyst: Der Mittelweg-Kompromiss",{"type":32,"tag":33,"props":89,"children":90},{},[91],{"type":37,"value":92},"BigCommerce führte 2023 Catalyst ein: Next.js-basiert, GraphQL Storefront API schon integriert. Das Unternehmen bewirbt es als \"best of both worlds\" — Monolith-Geschwindigkeit + Headless-Flexibilität.",{"type":32,"tag":33,"props":94,"children":95},{},[96,101],{"type":32,"tag":55,"props":97,"children":98},{},[99],{"type":37,"value":100},"Stärken:",{"type":37,"value":102}," Catalyst hat vorkonfigurierte PLP (Product Listing Page), PDP, Cart, Checkout Components. Das GraphQL-Schema ist mit der Storefront API synchron. Das heißt: der Frontend-Entwickler schreibt keine Cart-Logik, konzentriert sich auf UI. Deployment: auf Vercel\u002FNetlify pushen, BigCommerce-Webhooks triggern den Build. MVP-Zeit: 8 Wochen — die Hälfte von commercetools.",{"type":32,"tag":33,"props":104,"children":105},{},[106,111],{"type":32,"tag":55,"props":107,"children":108},{},[109],{"type":37,"value":110},"Schwächen:",{"type":37,"value":112}," Flexibilität bleibt begrenzt. Wenn du den Checkout vollständig customizen willst, bist du an BigCommerce' Checkout SDK gebunden. Third-Party-Payment-Integration (Adyen) funktioniert über REST API + BigCommerce Control Panel — keine React-Component-Ebene. Das Bundle-Size-Problem besteht: Catalyst Standard-Setup 850kB. Wenn Core Web Vitals LCP-Ziel 2,5s ist, kann dieses Bundle auf 3G zu 4,2s führen (Lighthouse-Simulation).",{"type":32,"tag":114,"props":115,"children":117},"h3",{"id":116},"code-beispiel-catalyst-plp-optimierung",[118],{"type":37,"value":119},"Code-Beispiel: Catalyst PLP-Optimierung",{"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 Standard lädt 48 Produkte eager\n\u002F\u002F Wir reduzieren auf 12 + defer Pagination\n\nexport default async function CategoryPage({ params }) {\n  const products = await getProducts({\n    categoryId: params.slug,\n    first: 12, \u002F\u002F 48 → 12 reduziert\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}>Mehr laden\u003C\u002Fbutton>;\n}\n","javascript",[127],{"type":32,"tag":128,"props":129,"children":130},"code",{"__ignoreMap":16},[131,143,152,161,171,219,254,263,287,295,303,317,337,365,392,409,418,427,435,444,459,489,535,544,567,618,654,700,709,717,758],{"type":32,"tag":132,"props":133,"children":136},"span",{"class":134,"line":135},"line",1,[137],{"type":32,"tag":132,"props":138,"children":140},{"style":139},"--shiki-default:#6A737D",[141],{"type":37,"value":142},"\u002F\u002F app\u002F[locale]\u002F(default)\u002Fcategory\u002F[slug]\u002Fpage.tsx\n",{"type":32,"tag":132,"props":144,"children":146},{"class":134,"line":145},2,[147],{"type":32,"tag":132,"props":148,"children":149},{"style":139},[150],{"type":37,"value":151},"\u002F\u002F Catalyst Standard lädt 48 Produkte eager\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 Wir reduzieren auf 12 + defer 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":266},{"class":134,"line":265},8,[267,272,277,282],{"type":32,"tag":132,"props":268,"children":269},{"style":204},[270],{"type":37,"value":271},"    first: ",{"type":32,"tag":132,"props":273,"children":274},{"style":230},[275],{"type":37,"value":276},"12",{"type":32,"tag":132,"props":278,"children":279},{"style":204},[280],{"type":37,"value":281},", ",{"type":32,"tag":132,"props":283,"children":284},{"style":139},[285],{"type":37,"value":286},"\u002F\u002F 48 → 12 reduziert\n",{"type":32,"tag":132,"props":288,"children":289},{"class":134,"line":26},[290],{"type":32,"tag":132,"props":291,"children":292},{"style":204},[293],{"type":37,"value":294},"  });\n",{"type":32,"tag":132,"props":296,"children":298},{"class":134,"line":297},10,[299],{"type":32,"tag":132,"props":300,"children":301},{"emptyLinePlaceholder":167},[302],{"type":37,"value":170},{"type":32,"tag":132,"props":304,"children":306},{"class":134,"line":305},11,[307,312],{"type":32,"tag":132,"props":308,"children":309},{"style":177},[310],{"type":37,"value":311},"  return",{"type":32,"tag":132,"props":313,"children":314},{"style":204},[315],{"type":37,"value":316}," (\n",{"type":32,"tag":132,"props":318,"children":320},{"class":134,"line":319},12,[321,326,332],{"type":32,"tag":132,"props":322,"children":323},{"style":204},[324],{"type":37,"value":325},"    \u003C",{"type":32,"tag":132,"props":327,"children":329},{"style":328},"--shiki-default:#85E89D",[330],{"type":37,"value":331},"div",{"type":32,"tag":132,"props":333,"children":334},{"style":204},[335],{"type":37,"value":336},">\n",{"type":32,"tag":132,"props":338,"children":340},{"class":134,"line":339},13,[341,346,351,355,360],{"type":32,"tag":132,"props":342,"children":343},{"style":204},[344],{"type":37,"value":345},"      \u003C",{"type":32,"tag":132,"props":347,"children":348},{"style":230},[349],{"type":37,"value":350},"ProductGrid",{"type":32,"tag":132,"props":352,"children":353},{"style":198},[354],{"type":37,"value":233},{"type":32,"tag":132,"props":356,"children":357},{"style":177},[358],{"type":37,"value":359},"=",{"type":32,"tag":132,"props":361,"children":362},{"style":204},[363],{"type":37,"value":364},"{products.edges} \u002F>\n",{"type":32,"tag":132,"props":366,"children":368},{"class":134,"line":367},14,[369,373,378,383,387],{"type":32,"tag":132,"props":370,"children":371},{"style":204},[372],{"type":37,"value":345},{"type":32,"tag":132,"props":374,"children":375},{"style":230},[376],{"type":37,"value":377},"LoadMoreButton",{"type":32,"tag":132,"props":379,"children":380},{"style":198},[381],{"type":37,"value":382}," cursor",{"type":32,"tag":132,"props":384,"children":385},{"style":177},[386],{"type":37,"value":359},{"type":32,"tag":132,"props":388,"children":389},{"style":204},[390],{"type":37,"value":391},"{products.pageInfo.endCursor} \u002F>\n",{"type":32,"tag":132,"props":393,"children":395},{"class":134,"line":394},15,[396,401,405],{"type":32,"tag":132,"props":397,"children":398},{"style":204},[399],{"type":37,"value":400},"    \u003C\u002F",{"type":32,"tag":132,"props":402,"children":403},{"style":328},[404],{"type":37,"value":331},{"type":32,"tag":132,"props":406,"children":407},{"style":204},[408],{"type":37,"value":336},{"type":32,"tag":132,"props":410,"children":412},{"class":134,"line":411},16,[413],{"type":32,"tag":132,"props":414,"children":415},{"style":204},[416],{"type":37,"value":417},"  );\n",{"type":32,"tag":132,"props":419,"children":421},{"class":134,"line":420},17,[422],{"type":32,"tag":132,"props":423,"children":424},{"style":204},[425],{"type":37,"value":426},"}\n",{"type":32,"tag":132,"props":428,"children":430},{"class":134,"line":429},18,[431],{"type":32,"tag":132,"props":432,"children":433},{"emptyLinePlaceholder":167},[434],{"type":37,"value":170},{"type":32,"tag":132,"props":436,"children":438},{"class":134,"line":437},19,[439],{"type":32,"tag":132,"props":440,"children":441},{"style":139},[442],{"type":37,"value":443},"\u002F\u002F Client Component: LoadMoreButton\n",{"type":32,"tag":132,"props":445,"children":447},{"class":134,"line":446},20,[448,454],{"type":32,"tag":132,"props":449,"children":451},{"style":450},"--shiki-default:#9ECBFF",[452],{"type":37,"value":453},"'use client'",{"type":32,"tag":132,"props":455,"children":456},{"style":204},[457],{"type":37,"value":458},";\n",{"type":32,"tag":132,"props":460,"children":462},{"class":134,"line":461},21,[463,467,471,476,480,485],{"type":32,"tag":132,"props":464,"children":465},{"style":177},[466],{"type":37,"value":180},{"type":32,"tag":132,"props":468,"children":469},{"style":177},[470],{"type":37,"value":195},{"type":32,"tag":132,"props":472,"children":473},{"style":198},[474],{"type":37,"value":475}," LoadMoreButton",{"type":32,"tag":132,"props":477,"children":478},{"style":204},[479],{"type":37,"value":207},{"type":32,"tag":132,"props":481,"children":482},{"style":210},[483],{"type":37,"value":484},"cursor",{"type":32,"tag":132,"props":486,"children":487},{"style":204},[488],{"type":37,"value":218},{"type":32,"tag":132,"props":490,"children":492},{"class":134,"line":491},22,[493,497,502,507,511,516,521,525,530],{"type":32,"tag":132,"props":494,"children":495},{"style":177},[496],{"type":37,"value":227},{"type":32,"tag":132,"props":498,"children":499},{"style":204},[500],{"type":37,"value":501}," [",{"type":32,"tag":132,"props":503,"children":504},{"style":230},[505],{"type":37,"value":506},"items",{"type":32,"tag":132,"props":508,"children":509},{"style":204},[510],{"type":37,"value":281},{"type":32,"tag":132,"props":512,"children":513},{"style":230},[514],{"type":37,"value":515},"setItems",{"type":32,"tag":132,"props":517,"children":518},{"style":204},[519],{"type":37,"value":520},"] ",{"type":32,"tag":132,"props":522,"children":523},{"style":177},[524],{"type":37,"value":359},{"type":32,"tag":132,"props":526,"children":527},{"style":198},[528],{"type":37,"value":529}," useState",{"type":32,"tag":132,"props":531,"children":532},{"style":204},[533],{"type":37,"value":534},"([]);\n",{"type":32,"tag":132,"props":536,"children":538},{"class":134,"line":537},23,[539],{"type":32,"tag":132,"props":540,"children":541},{"style":204},[542],{"type":37,"value":543},"  \n",{"type":32,"tag":132,"props":545,"children":547},{"class":134,"line":546},24,[548,553,557,562],{"type":32,"tag":132,"props":549,"children":550},{"style":177},[551],{"type":37,"value":552},"  async",{"type":32,"tag":132,"props":554,"children":555},{"style":177},[556],{"type":37,"value":195},{"type":32,"tag":132,"props":558,"children":559},{"style":198},[560],{"type":37,"value":561}," loadMore",{"type":32,"tag":132,"props":563,"children":564},{"style":204},[565],{"type":37,"value":566},"() {\n",{"type":32,"tag":132,"props":568,"children":570},{"class":134,"line":569},25,[571,576,581,585,589,594,599,604,608,613],{"type":32,"tag":132,"props":572,"children":573},{"style":177},[574],{"type":37,"value":575},"    const",{"type":32,"tag":132,"props":577,"children":578},{"style":230},[579],{"type":37,"value":580}," res",{"type":32,"tag":132,"props":582,"children":583},{"style":177},[584],{"type":37,"value":238},{"type":32,"tag":132,"props":586,"children":587},{"style":177},[588],{"type":37,"value":243},{"type":32,"tag":132,"props":590,"children":591},{"style":198},[592],{"type":37,"value":593}," fetch",{"type":32,"tag":132,"props":595,"children":596},{"style":204},[597],{"type":37,"value":598},"(",{"type":32,"tag":132,"props":600,"children":601},{"style":450},[602],{"type":37,"value":603},"`\u002Fapi\u002Fproducts?after=${",{"type":32,"tag":132,"props":605,"children":606},{"style":204},[607],{"type":37,"value":484},{"type":32,"tag":132,"props":609,"children":610},{"style":450},[611],{"type":37,"value":612},"}&first=12`",{"type":32,"tag":132,"props":614,"children":615},{"style":204},[616],{"type":37,"value":617},");\n",{"type":32,"tag":132,"props":619,"children":621},{"class":134,"line":620},26,[622,626,631,635,639,644,649],{"type":32,"tag":132,"props":623,"children":624},{"style":177},[625],{"type":37,"value":575},{"type":32,"tag":132,"props":627,"children":628},{"style":230},[629],{"type":37,"value":630}," data",{"type":32,"tag":132,"props":632,"children":633},{"style":177},[634],{"type":37,"value":238},{"type":32,"tag":132,"props":636,"children":637},{"style":177},[638],{"type":37,"value":243},{"type":32,"tag":132,"props":640,"children":641},{"style":204},[642],{"type":37,"value":643}," res.",{"type":32,"tag":132,"props":645,"children":646},{"style":198},[647],{"type":37,"value":648},"json",{"type":32,"tag":132,"props":650,"children":651},{"style":204},[652],{"type":37,"value":653},"();\n",{"type":32,"tag":132,"props":655,"children":657},{"class":134,"line":656},27,[658,663,667,672,677,681,686,691,695],{"type":32,"tag":132,"props":659,"children":660},{"style":198},[661],{"type":37,"value":662},"    setItems",{"type":32,"tag":132,"props":664,"children":665},{"style":204},[666],{"type":37,"value":598},{"type":32,"tag":132,"props":668,"children":669},{"style":210},[670],{"type":37,"value":671},"prev",{"type":32,"tag":132,"props":673,"children":674},{"style":177},[675],{"type":37,"value":676}," =>",{"type":32,"tag":132,"props":678,"children":679},{"style":204},[680],{"type":37,"value":501},{"type":32,"tag":132,"props":682,"children":683},{"style":177},[684],{"type":37,"value":685},"...",{"type":32,"tag":132,"props":687,"children":688},{"style":204},[689],{"type":37,"value":690},"prev, ",{"type":32,"tag":132,"props":692,"children":693},{"style":177},[694],{"type":37,"value":685},{"type":32,"tag":132,"props":696,"children":697},{"style":204},[698],{"type":37,"value":699},"data.edges]);\n",{"type":32,"tag":132,"props":701,"children":703},{"class":134,"line":702},28,[704],{"type":32,"tag":132,"props":705,"children":706},{"style":204},[707],{"type":37,"value":708},"  }\n",{"type":32,"tag":132,"props":710,"children":712},{"class":134,"line":711},29,[713],{"type":32,"tag":132,"props":714,"children":715},{"emptyLinePlaceholder":167},[716],{"type":37,"value":170},{"type":32,"tag":132,"props":718,"children":720},{"class":134,"line":719},30,[721,725,730,735,740,744,749,753],{"type":32,"tag":132,"props":722,"children":723},{"style":177},[724],{"type":37,"value":311},{"type":32,"tag":132,"props":726,"children":727},{"style":204},[728],{"type":37,"value":729}," \u003C",{"type":32,"tag":132,"props":731,"children":732},{"style":328},[733],{"type":37,"value":734},"button",{"type":32,"tag":132,"props":736,"children":737},{"style":198},[738],{"type":37,"value":739}," onClick",{"type":32,"tag":132,"props":741,"children":742},{"style":177},[743],{"type":37,"value":359},{"type":32,"tag":132,"props":745,"children":746},{"style":204},[747],{"type":37,"value":748},"{loadMore}>Mehr laden\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},"Diese Änderung reduziert das initiale Bundle von 850kB auf 620kB (27% Reduktion). LCP 4,2s → 2,9s. Trotzdem schwerer als Shopify Liquid.",{"type":32,"tag":40,"props":772,"children":774},{"id":773},"commercetools-maximale-flexibilität-maximale-last",[775],{"type":37,"value":776},"commercetools: Maximale Flexibilität, maximale Last",{"type":32,"tag":33,"props":778,"children":779},{},[780],{"type":37,"value":781},"commercetools positioniert sich als \"true headless\". API-only-Backend, keine UI-Components. Du baust alles — Next.js, Vue, Svelte sind offen.",{"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}," Volle Flexibilität. Du schreibst Custom-Cart-Logik, den gesamten Checkout kontrollierst du. Beispiel: Multi-Currency + regionalisierte Tax-Berechnung, Server-seitig personalisierte Pricing (für B2B kritisch) — alles läuft über commercetools API Requests. GraphQL und REST werden parallel unterstützt — nutze den performantesten Endpoint.",{"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}," Hohe Startkosten. Implementation Partners von commercetools verlangen durchschnittlich $120k–$180k für MVP (6 Monate). Die Hälfte der Zeit: Backend-Setup (Product Catalog Import, Pricing Rules, Inventory Sync), die andere Hälfte: Frontend. Außerdem laufende Kosten: commercetools-Lizenz ist transaktionsbasiert, aber nicht an Volumen gekoppelt — Platform Fee ab $50k\u002FJahr (Mid-Market). Frontend-Hosting + CDN separat (Vercel Enterprise: $2k\u002FMo).",{"type":32,"tag":33,"props":801,"children":802},{},[803,808],{"type":32,"tag":55,"props":804,"children":805},{},[806],{"type":37,"value":807},"Performance-Realität:",{"type":37,"value":809}," commercetools API Response Time durchschnittlich 120–180ms (aus Europas Rechenzentrum, Cache-Miss). Das kannst du Edge-seitig cachen (Cloudflare Workers KV \u002F Vercel Edge Config), aber Invalidations-Logik musst du selbst schreiben. Beispiel: Produktpreis ändert sich → commercetools Webhook → Cloudflare Workers → KV purge. Dieses Pipeline ist für jedes Projekt Custom.",{"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 ist mit Hydrogen 2.0 in die Composable-Welt getreten. Aber der Ansatz ist anders: Liquid Themes werden weiter unterstützt, Hydrogen optional. Also hybrid: Wenn nötig headless, sonst schnell mit Liquid.",{"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 Plus:",{"type":37,"value":830}," Nutzt React Server Components — das balanciert Server-Side Rendering + Client-Side Interactivity gut. Beispiel: Product-Page Hero Image wird Server-seitig gerendert (als HTML), \"Add to Cart\" Button ist Client Component (JavaScript). Ergebnis: Initial Bundle 320kB, aber LCP 1,8s (Shopify CDN ist schnell, RSC-Overhead niedrig).",{"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 Minus:",{"type":37,"value":840}," Migration-Aufwand. Wenn du einen bestehenden Shopify Plus Store hast und ein Liquid Theme nutzt, bedeutet Hydrogen-Migration ein neues Frontend. Liquid → React Konvertierung: 12–16 Wochen. Außerdem: Hydrogen 2.0 braucht Storefront API 2024 — einige alte Liquid-Variablen (z.B. ",{"type":32,"tag":128,"props":842,"children":844},{"className":843},[],[845],{"type":37,"value":846},"product.metafields",{"type":37,"value":848},") haben andere 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 Vorteil:",{"type":37,"value":858}," Immer noch die schnellste Option. Weil HTML Server-seitig gerendert wird, JavaScript minimal. Beispiel: Shopify Dawn Theme (Standard Liquid Theme): 120kB Bundle, LCP 1,2s. Ist die Flexibilität von Headless diesen Speed wert? Kommt auf den Use Case an. Wenn du Checkout customizen musst (z.B. B2B Approval Workflow), macht Hydrogen Sinn. Wenn Standard-E-Commerce reicht, gewinnt Liquid immer noch.",{"type":32,"tag":114,"props":860,"children":862},{"id":861},"tradeoff-tabelle",[863],{"type":37,"value":864},"Tradeoff-Tabelle",{"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},"Kriterium",{"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-Zeit",{"type":32,"tag":911,"props":917,"children":918},{},[919],{"type":37,"value":920},"4 Wochen",{"type":32,"tag":911,"props":922,"children":923},{},[924],{"type":37,"value":925},"12 Wochen",{"type":32,"tag":911,"props":927,"children":928},{},[929],{"type":37,"value":930},"8 Wochen",{"type":32,"tag":911,"props":932,"children":933},{},[934],{"type":37,"value":935},"24 Wochen",{"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-Größe",{"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 (optimiert)",{"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 (gecacht)",{"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-Flexibilität",{"type":32,"tag":911,"props":1001,"children":1002},{},[1003],{"type":37,"value":1004},"Niedrig (Shopify SDK)",{"type":32,"tag":911,"props":1006,"children":1007},{},[1008],{"type":37,"value":1009},"Mittel (Hydrogen Checkout)",{"type":32,"tag":911,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Mittel (SDK)",{"type":32,"tag":911,"props":1016,"children":1017},{},[1018],{"type":37,"value":1019},"Vollständig",{"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},"Startkosten",{"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},"Jährliche 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},"wie-du-die-entscheidung-triffst",[1080],{"type":37,"value":1081},"Wie du die Entscheidung triffst",{"type":32,"tag":33,"props":1083,"children":1084},{},[1085],{"type":37,"value":1086},"Composable Commerce wird als \"Zukunft\" verkauft — passt aber nicht überall. Entscheidungskriterien muss man an konkreten Szenarien diskutieren.",{"type":32,"tag":33,"props":1088,"children":1089},{},[1090,1095],{"type":32,"tag":55,"props":1091,"children":1092},{},[1093],{"type":37,"value":1094},"Szenario 1: Standard B2C E-Commerce, 500k–2M Jahresorders.",{"type":37,"value":1096}," Liquid gewinnt. Bundle-Größe niedrig, LCP erfüllt, Checkout mit Shopify Payments integriert. Headless Wechsel erhöht Bundle 2,5x, LCP steigt von 1,2s auf 1,8s (Conversion Impact: 0,2–0,5% Verlust). Wenn keine Flexibilität nötig ist, ist der Switch Overengineering.",{"type":32,"tag":33,"props":1098,"children":1099},{},[1100,1105],{"type":32,"tag":55,"props":1101,"children":1102},{},[1103],{"type":37,"value":1104},"Szenario 2: B2B Wholesale, Custom Approval Workflow, regionale Pricing.",{"type":37,"value":1106}," commercetools macht Sinn. Weil Shopify Plus' B2B Feature (B2B on Shopify) Approval-Logik begrenzt. Bei commercetools baust du eine Custom Cart Rule Engine: \"Über 10k USD Orders brauchen Procurement-Genehmigung.\" API-Flexibilität rechtfertigt ROI bei diesem Use Case.",{"type":32,"tag":33,"props":1108,"children":1109},{},[1110,1115],{"type":32,"tag":55,"props":1111,"children":1112},{},[1113],{"type":37,"value":1114},"Szenario 3: Bestehendes Shopify Store, Checkout-Customization nötig.",{"type":37,"value":1116}," Hydrogen 2.0. Weil du im Shopify-Ökosystem bleibst (App-Integrationen erhalten), aber den Checkout als React Component kontrollierst. Migration 12 Wochen — die Hälfte von commercetools. Platform Fee ändert sich nicht (Shopify Plus zahlst du ohnehin).",{"type":32,"tag":33,"props":1118,"children":1119},{},[1120,1125],{"type":32,"tag":55,"props":1121,"children":1122},{},[1123],{"type":37,"value":1124},"Szenario 4: Multi-Channel (E-Commerce + Mobile App + Marketplace), Headless erzwungen.",{"type":37,"value":1126}," BigCommerce Catalyst als Mittelweg. Weil GraphQL Storefront API Web und App beide versorgt, aber Integration kostet nicht so viel wie commercetools. Mobile App React Native? Catalyst Components können teilweise adaptiert werden (Web → Native Code Sharing).",{"type":32,"tag":40,"props":1128,"children":1130},{"id":1129},"fazit-akzeptiere-die-rechnung-der-flexibilität",[1131],{"type":37,"value":1132},"Fazit: Akzeptiere die Rechnung der Flexibilität",{"type":32,"tag":33,"props":1134,"children":1135},{},[1136],{"type":37,"value":1137},"MACH-Architektur bringt Flexibilität, aber diese Flexibilität kehrt als Bundle-Größe, Initial-Kosten, Integration-Aufwand zurück. Shopify Liquid bleibt Production-schnellste Option — wenn der Use Case Liquid abdeckt, ist Headless nicht Optimierung, sondern Overengineering. BigCommerce Catalyst ist Mittelweg: vorkonfigurierte Components + GraphQL Flexibilität, aber Checkout hat Grenzen. commercetools ist volle Flexibilität: $120k Start + laufende Orchestration-Last. Hydrogen 2.0 ist Headless im Shopify-Ökosystem — aber schwerer als Liquid. Triff die Entscheidung danach, ob dein Use Case die Tradeoffs rechtfertigt. In Production sprechen Zahlen lauter als Versprechen.",{"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:de:tech:composable-commerce-mach-produktion.md","content","de\u002Ftech\u002Fcomposable-commerce-mach-produktion.md","de\u002Ftech\u002Fcomposable-commerce-mach-produktion","md",1782079489541]