[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\u002Ftech\u002Fcomposable-commerce-realnost-production":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":11,"_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-архитектуры в production","BigCommerce, commercetools, Shopify Plus — какие скрытые затраты стоят за гибкостью MACH? Что вы рискуете принять в production'е?","2026-06-07",[21,22,23,24,25],"composable-commerce","mach-architecture","headless-commerce","shopify-plus","bigcommerce",8,"Roibase",{"type":29,"children":30,"toc":1144},"root",[31,39,46,51,62,72,82,88,93,103,113,120,766,771,777,782,791,800,810,816,821,831,849,859,865,1076,1082,1087,1097,1107,1117,1127,1133,1138],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Composable commerce с 2024 года позиционируется как \"новые правила рынка\". MACH-принципы (Microservices, API-first, Cloud-native, Headless) должны заменить монолитные платформы. Но в production картина иная: BigCommerce Catalyst bundle составляет 850kB, commercetools требует минимум $120k на интеграцию, Shopify Plus предлагает composable-возможности через мучительную миграцию Hydrogen 2.0. Перед принятием решения нужно говорить о tradeoff'ах цифрами.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"истинная-стоимость-mach-обещания",[44],{"type":37,"value":45},"Истинная Стоимость MACH-обещания",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Ядро composable-архитектуры — гибкость: frontend, backend, payment, search работают независимо и могут заменяться по необходимости. Но эта гибкость оборачивается тремя пакетами затрат.",{"type":32,"tag":33,"props":52,"children":53},{},[54,60],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Первая затрата: время интеграции.",{"type":37,"value":61}," На API-only платформах вроде commercetools весь опыт с frontend'а до checkout'а строишь сам. Средний MVP: 16-20 недель. На Shopify Plus тот же функционал запускается за 4 недели. BigCommerce Catalyst занимает среднее положение: есть предустановленный Next.js + GraphQL Storefront API, но product listing page, cart state — все требует кастомизации (8-12 недель).",{"type":32,"tag":33,"props":63,"children":64},{},[65,70],{"type":32,"tag":55,"props":66,"children":67},{},[68],{"type":37,"value":69},"Вторая затрата: координация между сервисами.",{"type":37,"value":71}," В MACH-окружении каждый сервис независим — синхронизация состояния между ними лежит на тебе. Пример: inventory (Fluent Commerce), pricing (Pimcore), промо (Talon.One) — отдельные endpoints. Real-time синхронизация требует event bus (Kafka \u002F AWS EventBridge). Для среднего e-commerce: минимум 3 engineer-months на эту оркестрацию.",{"type":32,"tag":33,"props":73,"children":74},{},[75,80],{"type":32,"tag":55,"props":76,"children":77},{},[78],{"type":37,"value":79},"Третья затрата: размер бандла.",{"type":37,"value":81}," Headless = кастомный фронтенд-код. BigCommerce Catalyst: 850kB JavaScript (после gzip ~240kB). Shopify Hydrogen 2.0 использует React Server Components, но всё равно среднее значение 320kB. Пример Next.js фронтенда для commercetools: 950kB (плюс управление состоянием корзины на клиенте). Сравнение: Shopify Liquid theme — 120-180kB. Причина: HTML рендерится на сервере, JavaScript минимален.",{"type":32,"tag":40,"props":83,"children":85},{"id":84},"bigcommerce-catalyst-компромисс-на-пути-к-середине",[86],{"type":37,"value":87},"BigCommerce Catalyst: Компромисс на Пути к Середине",{"type":32,"tag":33,"props":89,"children":90},{},[91],{"type":37,"value":92},"BigCommerce представил Catalyst в 2023 году: Next.js-база, прединтегрированный GraphQL Storefront API. Компания позиционирует это как \"лучшее из обоих миров\" — скорость монолита + гибкость headless.",{"type":32,"tag":33,"props":94,"children":95},{},[96,101],{"type":32,"tag":55,"props":97,"children":98},{},[99],{"type":37,"value":100},"Сильная сторона:",{"type":37,"value":102}," В Catalyst'е готовы PLP (product listing page), PDP, cart, checkout компоненты. GraphQL schema синхронизирован со Storefront API. Это означает, что фронтенд-разработчик может сосредоточиться на UI вместо того, чтобы писать логику корзины с нуля. Развёртывание: push на Vercel \u002F Netlify, BigCommerce webhook'и триггерят rebuild. MVP за 8 недель — это половина времени commercetools.",{"type":32,"tag":33,"props":104,"children":105},{},[106,111],{"type":32,"tag":55,"props":107,"children":108},{},[109],{"type":37,"value":110},"Слабая сторона:",{"type":37,"value":112}," гибкость остаётся ограниченной. Полная кастомизация checkout'а привязывает тебя к Checkout SDK от BigCommerce. Интеграция с третьесторонними платежами (Adyen) происходит через REST API + BigCommerce control panel — управления на уровне React-компонента нет. Проблема размера бандла не решена: стандартная установка Catalyst составляет 850kB. Если Core Web Vitals требует LCP 2.5s, этот бандл на 3G доводит до 4.2s (по Lighthouse simulation).",{"type":32,"tag":114,"props":115,"children":117},"h3",{"id":116},"пример-кода-оптимизация-plp-в-catalyst",[118],{"type":37,"value":119},"Пример кода: Оптимизация PLP в Catalyst",{"type":32,"tag":121,"props":122,"children":126},"pre",{"className":123,"code":124,"language":125,"meta":16,"style":16},"language-javascript shiki shiki-themes github-dark","\u002F\u002F app\u002F[locale]\u002F(default)\u002Fcategory\u002F[slug]\u002Fpage.tsx\n\u002F\u002F Catalyst по умолчанию eagerly load'ит 48 продуктов\n\u002F\u002F Снизим до 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\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}>Загрузить ещё\u003C\u002Fbutton>;\n}\n","javascript",[127],{"type":32,"tag":128,"props":129,"children":130},"code",{"__ignoreMap":16},[131,143,152,161,171,219,254,263,286,295,303,317,337,365,392,409,418,427,435,444,459,489,535,544,567,618,654,700,709,717,758],{"type":32,"tag":132,"props":133,"children":136},"span",{"class":134,"line":135},"line",1,[137],{"type":32,"tag":132,"props":138,"children":140},{"style":139},"--shiki-default:#6A737D",[141],{"type":37,"value":142},"\u002F\u002F app\u002F[locale]\u002F(default)\u002Fcategory\u002F[slug]\u002Fpage.tsx\n",{"type":32,"tag":132,"props":144,"children":146},{"class":134,"line":145},2,[147],{"type":32,"tag":132,"props":148,"children":149},{"style":139},[150],{"type":37,"value":151},"\u002F\u002F Catalyst по умолчанию eagerly load'ит 48 продуктов\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 Снизим до 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":265},{"class":134,"line":26},[266,271,276,281],{"type":32,"tag":132,"props":267,"children":268},{"style":204},[269],{"type":37,"value":270},"    first: ",{"type":32,"tag":132,"props":272,"children":273},{"style":230},[274],{"type":37,"value":275},"12",{"type":32,"tag":132,"props":277,"children":278},{"style":204},[279],{"type":37,"value":280},", ",{"type":32,"tag":132,"props":282,"children":283},{"style":139},[284],{"type":37,"value":285},"\u002F\u002F 48 → 12\n",{"type":32,"tag":132,"props":287,"children":289},{"class":134,"line":288},9,[290],{"type":32,"tag":132,"props":291,"children":292},{"style":204},[293],{"type":37,"value":294},"  });\n",{"type":32,"tag":132,"props":296,"children":298},{"class":134,"line":297},10,[299],{"type":32,"tag":132,"props":300,"children":301},{"emptyLinePlaceholder":167},[302],{"type":37,"value":170},{"type":32,"tag":132,"props":304,"children":306},{"class":134,"line":305},11,[307,312],{"type":32,"tag":132,"props":308,"children":309},{"style":177},[310],{"type":37,"value":311},"  return",{"type":32,"tag":132,"props":313,"children":314},{"style":204},[315],{"type":37,"value":316}," (\n",{"type":32,"tag":132,"props":318,"children":320},{"class":134,"line":319},12,[321,326,332],{"type":32,"tag":132,"props":322,"children":323},{"style":204},[324],{"type":37,"value":325},"    \u003C",{"type":32,"tag":132,"props":327,"children":329},{"style":328},"--shiki-default:#85E89D",[330],{"type":37,"value":331},"div",{"type":32,"tag":132,"props":333,"children":334},{"style":204},[335],{"type":37,"value":336},">\n",{"type":32,"tag":132,"props":338,"children":340},{"class":134,"line":339},13,[341,346,351,355,360],{"type":32,"tag":132,"props":342,"children":343},{"style":204},[344],{"type":37,"value":345},"      \u003C",{"type":32,"tag":132,"props":347,"children":348},{"style":230},[349],{"type":37,"value":350},"ProductGrid",{"type":32,"tag":132,"props":352,"children":353},{"style":198},[354],{"type":37,"value":233},{"type":32,"tag":132,"props":356,"children":357},{"style":177},[358],{"type":37,"value":359},"=",{"type":32,"tag":132,"props":361,"children":362},{"style":204},[363],{"type":37,"value":364},"{products.edges} \u002F>\n",{"type":32,"tag":132,"props":366,"children":368},{"class":134,"line":367},14,[369,373,378,383,387],{"type":32,"tag":132,"props":370,"children":371},{"style":204},[372],{"type":37,"value":345},{"type":32,"tag":132,"props":374,"children":375},{"style":230},[376],{"type":37,"value":377},"LoadMoreButton",{"type":32,"tag":132,"props":379,"children":380},{"style":198},[381],{"type":37,"value":382}," cursor",{"type":32,"tag":132,"props":384,"children":385},{"style":177},[386],{"type":37,"value":359},{"type":32,"tag":132,"props":388,"children":389},{"style":204},[390],{"type":37,"value":391},"{products.pageInfo.endCursor} \u002F>\n",{"type":32,"tag":132,"props":393,"children":395},{"class":134,"line":394},15,[396,401,405],{"type":32,"tag":132,"props":397,"children":398},{"style":204},[399],{"type":37,"value":400},"    \u003C\u002F",{"type":32,"tag":132,"props":402,"children":403},{"style":328},[404],{"type":37,"value":331},{"type":32,"tag":132,"props":406,"children":407},{"style":204},[408],{"type":37,"value":336},{"type":32,"tag":132,"props":410,"children":412},{"class":134,"line":411},16,[413],{"type":32,"tag":132,"props":414,"children":415},{"style":204},[416],{"type":37,"value":417},"  );\n",{"type":32,"tag":132,"props":419,"children":421},{"class":134,"line":420},17,[422],{"type":32,"tag":132,"props":423,"children":424},{"style":204},[425],{"type":37,"value":426},"}\n",{"type":32,"tag":132,"props":428,"children":430},{"class":134,"line":429},18,[431],{"type":32,"tag":132,"props":432,"children":433},{"emptyLinePlaceholder":167},[434],{"type":37,"value":170},{"type":32,"tag":132,"props":436,"children":438},{"class":134,"line":437},19,[439],{"type":32,"tag":132,"props":440,"children":441},{"style":139},[442],{"type":37,"value":443},"\u002F\u002F client component: LoadMoreButton\n",{"type":32,"tag":132,"props":445,"children":447},{"class":134,"line":446},20,[448,454],{"type":32,"tag":132,"props":449,"children":451},{"style":450},"--shiki-default:#9ECBFF",[452],{"type":37,"value":453},"'use client'",{"type":32,"tag":132,"props":455,"children":456},{"style":204},[457],{"type":37,"value":458},";\n",{"type":32,"tag":132,"props":460,"children":462},{"class":134,"line":461},21,[463,467,471,476,480,485],{"type":32,"tag":132,"props":464,"children":465},{"style":177},[466],{"type":37,"value":180},{"type":32,"tag":132,"props":468,"children":469},{"style":177},[470],{"type":37,"value":195},{"type":32,"tag":132,"props":472,"children":473},{"style":198},[474],{"type":37,"value":475}," LoadMoreButton",{"type":32,"tag":132,"props":477,"children":478},{"style":204},[479],{"type":37,"value":207},{"type":32,"tag":132,"props":481,"children":482},{"style":210},[483],{"type":37,"value":484},"cursor",{"type":32,"tag":132,"props":486,"children":487},{"style":204},[488],{"type":37,"value":218},{"type":32,"tag":132,"props":490,"children":492},{"class":134,"line":491},22,[493,497,502,507,511,516,521,525,530],{"type":32,"tag":132,"props":494,"children":495},{"style":177},[496],{"type":37,"value":227},{"type":32,"tag":132,"props":498,"children":499},{"style":204},[500],{"type":37,"value":501}," [",{"type":32,"tag":132,"props":503,"children":504},{"style":230},[505],{"type":37,"value":506},"items",{"type":32,"tag":132,"props":508,"children":509},{"style":204},[510],{"type":37,"value":280},{"type":32,"tag":132,"props":512,"children":513},{"style":230},[514],{"type":37,"value":515},"setItems",{"type":32,"tag":132,"props":517,"children":518},{"style":204},[519],{"type":37,"value":520},"] ",{"type":32,"tag":132,"props":522,"children":523},{"style":177},[524],{"type":37,"value":359},{"type":32,"tag":132,"props":526,"children":527},{"style":198},[528],{"type":37,"value":529}," useState",{"type":32,"tag":132,"props":531,"children":532},{"style":204},[533],{"type":37,"value":534},"([]);\n",{"type":32,"tag":132,"props":536,"children":538},{"class":134,"line":537},23,[539],{"type":32,"tag":132,"props":540,"children":541},{"style":204},[542],{"type":37,"value":543},"  \n",{"type":32,"tag":132,"props":545,"children":547},{"class":134,"line":546},24,[548,553,557,562],{"type":32,"tag":132,"props":549,"children":550},{"style":177},[551],{"type":37,"value":552},"  async",{"type":32,"tag":132,"props":554,"children":555},{"style":177},[556],{"type":37,"value":195},{"type":32,"tag":132,"props":558,"children":559},{"style":198},[560],{"type":37,"value":561}," loadMore",{"type":32,"tag":132,"props":563,"children":564},{"style":204},[565],{"type":37,"value":566},"() {\n",{"type":32,"tag":132,"props":568,"children":570},{"class":134,"line":569},25,[571,576,581,585,589,594,599,604,608,613],{"type":32,"tag":132,"props":572,"children":573},{"style":177},[574],{"type":37,"value":575},"    const",{"type":32,"tag":132,"props":577,"children":578},{"style":230},[579],{"type":37,"value":580}," res",{"type":32,"tag":132,"props":582,"children":583},{"style":177},[584],{"type":37,"value":238},{"type":32,"tag":132,"props":586,"children":587},{"style":177},[588],{"type":37,"value":243},{"type":32,"tag":132,"props":590,"children":591},{"style":198},[592],{"type":37,"value":593}," fetch",{"type":32,"tag":132,"props":595,"children":596},{"style":204},[597],{"type":37,"value":598},"(",{"type":32,"tag":132,"props":600,"children":601},{"style":450},[602],{"type":37,"value":603},"`\u002Fapi\u002Fproducts?after=${",{"type":32,"tag":132,"props":605,"children":606},{"style":204},[607],{"type":37,"value":484},{"type":32,"tag":132,"props":609,"children":610},{"style":450},[611],{"type":37,"value":612},"}&first=12`",{"type":32,"tag":132,"props":614,"children":615},{"style":204},[616],{"type":37,"value":617},");\n",{"type":32,"tag":132,"props":619,"children":621},{"class":134,"line":620},26,[622,626,631,635,639,644,649],{"type":32,"tag":132,"props":623,"children":624},{"style":177},[625],{"type":37,"value":575},{"type":32,"tag":132,"props":627,"children":628},{"style":230},[629],{"type":37,"value":630}," data",{"type":32,"tag":132,"props":632,"children":633},{"style":177},[634],{"type":37,"value":238},{"type":32,"tag":132,"props":636,"children":637},{"style":177},[638],{"type":37,"value":243},{"type":32,"tag":132,"props":640,"children":641},{"style":204},[642],{"type":37,"value":643}," res.",{"type":32,"tag":132,"props":645,"children":646},{"style":198},[647],{"type":37,"value":648},"json",{"type":32,"tag":132,"props":650,"children":651},{"style":204},[652],{"type":37,"value":653},"();\n",{"type":32,"tag":132,"props":655,"children":657},{"class":134,"line":656},27,[658,663,667,672,677,681,686,691,695],{"type":32,"tag":132,"props":659,"children":660},{"style":198},[661],{"type":37,"value":662},"    setItems",{"type":32,"tag":132,"props":664,"children":665},{"style":204},[666],{"type":37,"value":598},{"type":32,"tag":132,"props":668,"children":669},{"style":210},[670],{"type":37,"value":671},"prev",{"type":32,"tag":132,"props":673,"children":674},{"style":177},[675],{"type":37,"value":676}," =>",{"type":32,"tag":132,"props":678,"children":679},{"style":204},[680],{"type":37,"value":501},{"type":32,"tag":132,"props":682,"children":683},{"style":177},[684],{"type":37,"value":685},"...",{"type":32,"tag":132,"props":687,"children":688},{"style":204},[689],{"type":37,"value":690},"prev, ",{"type":32,"tag":132,"props":692,"children":693},{"style":177},[694],{"type":37,"value":685},{"type":32,"tag":132,"props":696,"children":697},{"style":204},[698],{"type":37,"value":699},"data.edges]);\n",{"type":32,"tag":132,"props":701,"children":703},{"class":134,"line":702},28,[704],{"type":32,"tag":132,"props":705,"children":706},{"style":204},[707],{"type":37,"value":708},"  }\n",{"type":32,"tag":132,"props":710,"children":712},{"class":134,"line":711},29,[713],{"type":32,"tag":132,"props":714,"children":715},{"emptyLinePlaceholder":167},[716],{"type":37,"value":170},{"type":32,"tag":132,"props":718,"children":720},{"class":134,"line":719},30,[721,725,730,735,740,744,749,753],{"type":32,"tag":132,"props":722,"children":723},{"style":177},[724],{"type":37,"value":311},{"type":32,"tag":132,"props":726,"children":727},{"style":204},[728],{"type":37,"value":729}," \u003C",{"type":32,"tag":132,"props":731,"children":732},{"style":328},[733],{"type":37,"value":734},"button",{"type":32,"tag":132,"props":736,"children":737},{"style":198},[738],{"type":37,"value":739}," onClick",{"type":32,"tag":132,"props":741,"children":742},{"style":177},[743],{"type":37,"value":359},{"type":32,"tag":132,"props":745,"children":746},{"style":204},[747],{"type":37,"value":748},"{loadMore}>Загрузить ещё\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},"Это изменение снижает начальный бандл с 850kB до 620kB (27% сокращение). LCP: 4.2s → 2.9s. Но всё ещё тяжелее Shopify Liquid.",{"type":32,"tag":40,"props":772,"children":774},{"id":773},"commercetools-максимальная-гибкость-максимальная-нагрузка",[775],{"type":37,"value":776},"commercetools: Максимальная Гибкость, Максимальная Нагрузка",{"type":32,"tag":33,"props":778,"children":779},{},[780],{"type":37,"value":781},"commercetools позиционирует себя как \"true headless\". API-only backend, никаких UI-компонентов. Весь фронтенд строишь сам — Next.js, Vue, Svelte на выбор.",{"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}," гибкость полная. Логику корзины пишешь как хочешь, flow checkout'а полностью в твоих руках. Пример: multi-currency + региональный tax расчёт, server-side персонализированное ценообразование (критично для B2B) — всё это через запросы к API commercetools. Плюс GraphQL и REST поддерживаются параллельно — выбирай, какой endpoint быстрее.",{"type":32,"tag":33,"props":792,"children":793},{},[794,798],{"type":32,"tag":55,"props":795,"children":796},{},[797],{"type":37,"value":100},{"type":37,"value":799}," Высокая начальная стоимость. Средняя цена внедрения через commercetools partner'ов: $120k-$180k (6 месяцев). Половина этого времени — backend setup (импорт каталога, pricing rules, inventory sync), другая половина — фронтенд. К тому же ongoing cost: коммерческие лицензии commercetools не transaction-based, это платформенский fee — начинается с $50k\u002Fгод (mid-market). Хостинг фронтенда + CDN отдельно (Vercel Enterprise: $2k\u002Fмесяц).",{"type":32,"tag":33,"props":801,"children":802},{},[803,808],{"type":32,"tag":55,"props":804,"children":805},{},[806],{"type":37,"value":807},"Performance реальность:",{"type":37,"value":809}," среднее время ответа API commercetools 120-180ms (с европейских серверов, при cache miss). Можно кешировать на Edge (Cloudflare Workers KV \u002F Vercel Edge Config), но логику инвалидации пишешь сам. Пример pipeline: цена продукта изменилась → webhook от commercetools → Cloudflare Workers → KV purge. Для каждого проекта это кастомно.",{"type":32,"tag":40,"props":811,"children":813},{"id":812},"shopify-plus-гибридная-composability",[814],{"type":37,"value":815},"Shopify Plus: Гибридная Composability",{"type":32,"tag":33,"props":817,"children":818},{},[819],{"type":37,"value":820},"Shopify с Hydrogen 2.0 вошла в composable-мир, но по-своему: Liquid theme'ы по-прежнему поддерживаются, Hydrogen опционален. То есть гибрид: нужна headless — берёшь её, не нужна — используешь 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:",{"type":37,"value":830}," использует React Server Components — хороший баланс между server-side rendering и client-side интерактивностью. Пример: hero image product page рендерится на сервере (HTML), кнопка \"добавить в корзину\" — client component (JavaScript). Итог: начальный бандл 320kB, LCP 1.8s (Shopify CDN быстрый, overhead RSC низкий).",{"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:",{"type":37,"value":840}," сложность миграции. Если есть существующий Shopify Plus store с Liquid theme, переход на Hydrogen — это новый фронтенд. Перевод Liquid → React: 12-16 недель. Плюс Hydrogen требует Storefront API 2024 — некоторые старые Liquid переменные (например ",{"type":32,"tag":128,"props":842,"children":844},{"className":843},[],[845],{"type":37,"value":846},"product.metafields",{"type":37,"value":848},") в GraphQL требуют другого паттерна запроса.",{"type":32,"tag":33,"props":850,"children":851},{},[852,857],{"type":32,"tag":55,"props":853,"children":854},{},[855],{"type":37,"value":856},"Преимущество Liquid:",{"type":37,"value":858}," всё ещё самый быстрый вариант. Потому что HTML рендерится на сервере, JavaScript минимален. Пример: Shopify Dawn theme (стандартный Liquid): 120kB бандл, LCP 1.2s. Стоит ли esneklelik от headless этой скорости? Зависит от use case. Если нужна полная кастомизация checkout'а (например B2B с workflow'ом согласования), то Hydrogen имеет смысл. Если стандартный e-commerce опыт достаточен — Liquid выигрывает.",{"type":32,"tag":114,"props":860,"children":862},{"id":861},"таблица-tradeoffов",[863],{"type":37,"value":864},"Таблица Tradeoff'ов",{"type":32,"tag":866,"props":867,"children":868},"table",{},[869,903],{"type":32,"tag":870,"props":871,"children":872},"thead",{},[873],{"type":32,"tag":874,"props":875,"children":876},"tr",{},[877,883,888,893,898],{"type":32,"tag":878,"props":879,"children":880},"th",{},[881],{"type":37,"value":882},"Критерий",{"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",{"type":32,"tag":911,"props":917,"children":918},{},[919],{"type":37,"value":920},"4 недели",{"type":32,"tag":911,"props":922,"children":923},{},[924],{"type":37,"value":925},"12 недель",{"type":32,"tag":911,"props":927,"children":928},{},[929],{"type":37,"value":930},"8 недель",{"type":32,"tag":911,"props":932,"children":933},{},[934],{"type":37,"value":935},"24 недели",{"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},"Размер бандла",{"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 (опт.)",{"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 (кешир.)",{"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",{"type":32,"tag":911,"props":1001,"children":1002},{},[1003],{"type":37,"value":1004},"Низкая (SDK)",{"type":32,"tag":911,"props":1006,"children":1007},{},[1008],{"type":37,"value":1009},"Средняя (Hydrogen)",{"type":32,"tag":911,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Средняя (SDK)",{"type":32,"tag":911,"props":1016,"children":1017},{},[1018],{"type":37,"value":1019},"Полная",{"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},"Начальная стоимость",{"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},"Годовой платёж",{"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},"на-что-ориентироваться-при-выборе",[1080],{"type":37,"value":1081},"На Что Ориентироваться При Выборе",{"type":32,"tag":33,"props":1083,"children":1084},{},[1085],{"type":37,"value":1086},"Composable commerce позиционируется как \"будущее\", но подходит не везде. Критерии выбора нужно обсуждать на конкретных сценариях.",{"type":32,"tag":33,"props":1088,"children":1089},{},[1090,1095],{"type":32,"tag":55,"props":1091,"children":1092},{},[1093],{"type":37,"value":1094},"Сценарий 1: Стандартный B2C e-commerce, 500k-2M заказов в год.",{"type":37,"value":1096}," Liquid выигрывает. Потому что бандл маленький, LCP в целевом диапазоне, checkout интегрирован с Shopify Payments. Переход на headless добавляет 2.5x к размеру бандла, LCP 1.2s → 1.8s (impact на conversion: 0.2-0.5% потерь). Если гибкость не требуется — переходить нет причин.",{"type":32,"tag":33,"props":1098,"children":1099},{},[1100,1105],{"type":32,"tag":55,"props":1101,"children":1102},{},[1103],{"type":37,"value":1104},"Сценарий 2: B2B wholesale, кастомный workflow согласования, региональное ценообразование.",{"type":37,"value":1106}," commercetools имеет смысл. Потому что встроенная B2B функция Shopify (B2B on Shopify) имеет ограничения. На commercetools можно построить кастомный engine правил: \"заказы выше $10k требуют согласования procurement\" — это возможно. API гибкость оправдывает ROI в этом сценарии.",{"type":32,"tag":33,"props":1108,"children":1109},{},[1110,1115],{"type":32,"tag":55,"props":1111,"children":1112},{},[1113],{"type":37,"value":1114},"Сценарий 3: Существующий Shopify store, требуется кастомизация checkout'а.",{"type":37,"value":1116}," Hydrogen 2.0. Потому что остаёшься в экосистеме Shopify (app интеграции сохраняются), но checkout становится React компонентом под твоим контролем. Время миграции 12 недель — в два раза меньше, чем commercetools. Платёж за платформу не меняется (Shopify Plus уже платишь).",{"type":32,"tag":33,"props":1118,"children":1119},{},[1120,1125],{"type":32,"tag":55,"props":1121,"children":1122},{},[1123],{"type":37,"value":1124},"Сценарий 4: Multi-channel (e-commerce + мобильное приложение + маркетплейс), headless обязателен.",{"type":37,"value":1126}," BigCommerce Catalyst может быть средним путём. Потому что GraphQL Storefront API используется для веба и приложения одновременно, но integration cost ниже, чем commercetools. Если мобильное приложение React Native — компоненты Catalyst можно адаптировать (web → native code sharing).",{"type":32,"tag":40,"props":1128,"children":1130},{"id":1129},"финал-принимай-фактуру-за-гибкость",[1131],{"type":37,"value":1132},"Финал: Принимай Фактуру за Гибкость",{"type":32,"tag":33,"props":1134,"children":1135},{},[1136],{"type":37,"value":1137},"MACH-архитектура даёт гибкость, но эта гибкость оборачивается размером бандла, начальной стоимостью, сложностью интеграции. Shopify Liquid остаётся самым быстрым production-решением — если сценарий подходит, headless — это не оптимизация, а overengineering. BigCommerce Catalyst занимает середину: предбилты компоненты + GraphQL гибкость, но ограничения в checkout'е. commercetools — полная гибкость: $120k старт + ongoing orchestration. Hydrogen 2.0 — headless в экосистеме Shopify, но тяжелее Liquid. Решение принимай, исходя из того, оправдывают ли tradeoff'ы твой сценарий. В production цифры говорят раньше обещаний.",{"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:ru:tech:composable-commerce-realnost-production.md","content","ru\u002Ftech\u002Fcomposable-commerce-realnost-production.md","ru\u002Ftech\u002Fcomposable-commerce-realnost-production","md",1782079495428]