[{"data":1,"prerenderedAt":1657},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fcommerce-composable-mach-architecture-production":11},{"i18nKey":4,"paths":5},"tech-005-2026-07",{"en":6,"es":7,"fr":8,"it":9,"ru":10},"\u002Fen\u002Ftech\u002Fcomposable-commerce-mach-production-reality","\u002Fes\u002Ftech\u002Farquitectura-mach-realidad-produccion","\u002Ffr\u002Ftech\u002Fcommerce-composable-mach-architecture-production","\u002Fit\u002Ftech\u002Fcomposable-commerce-mach-architettura-realta-produzione","\u002Fru\u002Ftech\u002Fcomposable-commerce-mach-realizm-2026",{"_path":8,"_dir":12,"_draft":13,"_partial":13,"_locale":14,"title":15,"description":16,"publishedAt":17,"modifiedAt":17,"category":12,"i18nKey":4,"tags":18,"readingTime":24,"author":25,"body":26,"_type":1651,"_id":1652,"_source":1653,"_file":1654,"_stem":1655,"_extension":1656},"tech",false,"","Composable Commerce: Realité de Production de l'Architecture MACH","Shopify Hydrogen, commercetools, BigCommerce Catalyst : comparaison des compromis d'architecture MACH, coûts d'intégration et guide numérique pour le choix headless en 2026.","2026-07-14",[19,20,21,22,23],"composable-commerce","mach-architecture","headless-commerce","shopify-plus","bigcommerce",9,"Roibase",{"type":27,"children":28,"toc":1642},"root",[29,37,44,49,54,90,95,101,106,125,426,431,441,451,467,473,478,487,521,526,1023,1028,1037,1046,1052,1057,1066,1342,1347,1356,1365,1371,1395,1500,1505,1511,1523,1528,1558,1563,1569,1574,1636],{"type":30,"tag":31,"props":32,"children":33},"element","p",{},[34],{"type":35,"value":36},"text","Mi-2026, le « hype cycle » du commerce composable a dépassé son pic. Au cours des 3 dernières années, nous avons migré plus de 40 marques enterprise de Shopify Liquid vers du headless, de plateformes monolithiques vers l'architecture MACH. Résultats : dans certains projets, le TTI est passé de 6 secondes à 1,2 seconde ; dans d'autres, le coût d'intégration a dépassé le budget de 230 %. Maintenant, en 2026 — après que Shopify Hydrogen 2.5, commercetools Composable Commerce API v3 et BigCommerce Catalyst aient atteint la maturité — le choix de l'architecture dépend entièrement de votre scénario de production. Cet article compare trois grandes plateformes headless avec rigueur d'ingénierie : durée de mise en place, coût d'exécution, charge d'intégration et impact transformationnel.",{"type":30,"tag":38,"props":39,"children":41},"h2",{"id":40},"quest-ce-que-mach-et-que-cela-signifie-en-production",[42],{"type":35,"value":43},"Qu'est-ce que MACH et que cela signifie en Production",{"type":30,"tag":31,"props":45,"children":46},{},[47],{"type":35,"value":48},"L'architecture MACH (Microservices, API-first, Cloud-native, Headless) a été commercialisée début 2020 avec la promesse « pas de verrouillage fournisseur, liberté totale ». La réalité 2026 : la liberté existe, mais son coût réside dans l'ingénierie d'intégration. Sur une plateforme monolithique (Shopify Plus, WooCommerce), le paiement, l'inventaire et le checkout converger vers une seule API. En MACH, vous les divisez en services distincts : panier commercetools, paiement Stripe, recherche Algolia, CMS Contentful. Chaque service est « best-of-breed » — mais vous écrivez le code de liaison.",{"type":30,"tag":31,"props":50,"children":51},{},[52],{"type":35,"value":53},"En production, 3 facteurs de coût critique émergent :",{"type":30,"tag":55,"props":56,"children":57},"ol",{},[58,70,80],{"type":30,"tag":59,"props":60,"children":61},"li",{},[62,68],{"type":30,"tag":63,"props":64,"children":65},"strong",{},[66],{"type":35,"value":67},"Surcharge d'intégration",{"type":35,"value":69}," : chaque microservice a une authentification différente, des limites de débit différentes, une gestion d'erreurs différente. Un projet médian utilisant 6 microservices requiert 2400 lignes de code d'intégration (donnée interne Roibase 2025).",{"type":30,"tag":59,"props":71,"children":72},{},[73,78],{"type":30,"tag":63,"props":74,"children":75},{},[76],{"type":35,"value":77},"Cascade de latence à l'exécution",{"type":35,"value":79}," : si vous envoyez 4 requêtes API en série (ex : produit → tarification → inventaire → disponibilité), le temps de réponse total monte à 1200 ms. Avec optimisation de requêtes parallèles, il redescend à 320 ms — mais vous devez implémenter une stratégie de cache en edge.",{"type":30,"tag":59,"props":81,"children":82},{},[83,88],{"type":30,"tag":63,"props":84,"children":85},{},[86],{"type":35,"value":87},"Complexité DevOps",{"type":35,"value":89}," : sur plateforme monolithique, le déploiement est un bouton. En MACH, frontend, BFF (Backend for Frontend) et 6 microservices ont des pipelines de déploiement distincts. Avec maturité DevOps faible, un projet de 3 mois s'étire à 8 mois.",{"type":30,"tag":31,"props":91,"children":92},{},[93],{"type":35,"value":94},"Ces 3 facteurs en tête, comparons Shopify Hydrogen, BigCommerce Catalyst et commercetools.",{"type":30,"tag":38,"props":96,"children":98},{"id":97},"shopify-hydrogen-pont-entre-simplicité-gérée-et-mach",[99],{"type":35,"value":100},"Shopify Hydrogen : Pont entre Simplicité Gérée et MACH",{"type":30,"tag":31,"props":102,"children":103},{},[104],{"type":35,"value":105},"Shopify Hydrogen 2.5 (release 2026 Q1) n'est pas vraiment MACH pur — disons plutôt « composable hybride ». Le backend Shopify reste monolithique (panier, checkout, paiement dans Shopify Admin), mais le frontend s'ouvre en headless via le framework Remix. Cette approche hybride offre des avantages en production :",{"type":30,"tag":31,"props":107,"children":108},{},[109,114,116,123],{"type":30,"tag":63,"props":110,"children":111},{},[112],{"type":35,"value":113},"Durée de mise en place",{"type":35,"value":115}," : en moyenne 6 semaines (design + développement + staging). L'API Shopify Admin est déjà stable ; l'authentification OAuth se configure en 2 heures. Avec Hydrogen, la fonction ",{"type":30,"tag":117,"props":118,"children":120},"code",{"className":119},[],[121],{"type":35,"value":122},"createStorefrontClient()",{"type":35,"value":124}," se connecte à l'API Storefront, et les mutations de panier sont intégrées. Exemple de code :",{"type":30,"tag":126,"props":127,"children":131},"pre",{"className":128,"code":129,"language":130,"meta":14,"style":14},"language-typescript shiki shiki-themes github-dark","\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nimport { useLoaderData } from '@remix-run\u002Freact';\nimport { json, type LoaderFunctionArgs } from '@shopify\u002Fremix-oxygen';\n\nexport async function loader({ params, context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  const { product } = await storefront.query(PRODUCT_QUERY, {\n    variables: { handle: params.handle }\n  });\n  return json({ product });\n}\n","typescript",[132],{"type":30,"tag":117,"props":133,"children":134},{"__ignoreMap":14},[135,147,179,215,225,291,326,381,390,398,417],{"type":30,"tag":136,"props":137,"children":140},"span",{"class":138,"line":139},"line",1,[141],{"type":30,"tag":136,"props":142,"children":144},{"style":143},"--shiki-default:#6A737D",[145],{"type":35,"value":146},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":30,"tag":136,"props":148,"children":150},{"class":138,"line":149},2,[151,157,163,168,174],{"type":30,"tag":136,"props":152,"children":154},{"style":153},"--shiki-default:#F97583",[155],{"type":35,"value":156},"import",{"type":30,"tag":136,"props":158,"children":160},{"style":159},"--shiki-default:#E1E4E8",[161],{"type":35,"value":162}," { useLoaderData } ",{"type":30,"tag":136,"props":164,"children":165},{"style":153},[166],{"type":35,"value":167},"from",{"type":30,"tag":136,"props":169,"children":171},{"style":170},"--shiki-default:#9ECBFF",[172],{"type":35,"value":173}," '@remix-run\u002Freact'",{"type":30,"tag":136,"props":175,"children":176},{"style":159},[177],{"type":35,"value":178},";\n",{"type":30,"tag":136,"props":180,"children":182},{"class":138,"line":181},3,[183,187,192,197,202,206,211],{"type":30,"tag":136,"props":184,"children":185},{"style":153},[186],{"type":35,"value":156},{"type":30,"tag":136,"props":188,"children":189},{"style":159},[190],{"type":35,"value":191}," { json, ",{"type":30,"tag":136,"props":193,"children":194},{"style":153},[195],{"type":35,"value":196},"type",{"type":30,"tag":136,"props":198,"children":199},{"style":159},[200],{"type":35,"value":201}," LoaderFunctionArgs } ",{"type":30,"tag":136,"props":203,"children":204},{"style":153},[205],{"type":35,"value":167},{"type":30,"tag":136,"props":207,"children":208},{"style":170},[209],{"type":35,"value":210}," '@shopify\u002Fremix-oxygen'",{"type":30,"tag":136,"props":212,"children":213},{"style":159},[214],{"type":35,"value":178},{"type":30,"tag":136,"props":216,"children":218},{"class":138,"line":217},4,[219],{"type":30,"tag":136,"props":220,"children":222},{"emptyLinePlaceholder":221},true,[223],{"type":35,"value":224},"\n",{"type":30,"tag":136,"props":226,"children":228},{"class":138,"line":227},5,[229,234,239,244,250,255,261,266,271,276,281,286],{"type":30,"tag":136,"props":230,"children":231},{"style":153},[232],{"type":35,"value":233},"export",{"type":30,"tag":136,"props":235,"children":236},{"style":153},[237],{"type":35,"value":238}," async",{"type":30,"tag":136,"props":240,"children":241},{"style":153},[242],{"type":35,"value":243}," function",{"type":30,"tag":136,"props":245,"children":247},{"style":246},"--shiki-default:#B392F0",[248],{"type":35,"value":249}," loader",{"type":30,"tag":136,"props":251,"children":252},{"style":159},[253],{"type":35,"value":254},"({ ",{"type":30,"tag":136,"props":256,"children":258},{"style":257},"--shiki-default:#FFAB70",[259],{"type":35,"value":260},"params",{"type":30,"tag":136,"props":262,"children":263},{"style":159},[264],{"type":35,"value":265},", ",{"type":30,"tag":136,"props":267,"children":268},{"style":257},[269],{"type":35,"value":270},"context",{"type":30,"tag":136,"props":272,"children":273},{"style":159},[274],{"type":35,"value":275}," }",{"type":30,"tag":136,"props":277,"children":278},{"style":153},[279],{"type":35,"value":280},":",{"type":30,"tag":136,"props":282,"children":283},{"style":246},[284],{"type":35,"value":285}," LoaderFunctionArgs",{"type":30,"tag":136,"props":287,"children":288},{"style":159},[289],{"type":35,"value":290},") {\n",{"type":30,"tag":136,"props":292,"children":294},{"class":138,"line":293},6,[295,300,305,311,316,321],{"type":30,"tag":136,"props":296,"children":297},{"style":153},[298],{"type":35,"value":299},"  const",{"type":30,"tag":136,"props":301,"children":302},{"style":159},[303],{"type":35,"value":304}," { ",{"type":30,"tag":136,"props":306,"children":308},{"style":307},"--shiki-default:#79B8FF",[309],{"type":35,"value":310},"storefront",{"type":30,"tag":136,"props":312,"children":313},{"style":159},[314],{"type":35,"value":315}," } ",{"type":30,"tag":136,"props":317,"children":318},{"style":153},[319],{"type":35,"value":320},"=",{"type":30,"tag":136,"props":322,"children":323},{"style":159},[324],{"type":35,"value":325}," context;\n",{"type":30,"tag":136,"props":327,"children":329},{"class":138,"line":328},7,[330,334,338,343,347,351,356,361,366,371,376],{"type":30,"tag":136,"props":331,"children":332},{"style":153},[333],{"type":35,"value":299},{"type":30,"tag":136,"props":335,"children":336},{"style":159},[337],{"type":35,"value":304},{"type":30,"tag":136,"props":339,"children":340},{"style":307},[341],{"type":35,"value":342},"product",{"type":30,"tag":136,"props":344,"children":345},{"style":159},[346],{"type":35,"value":315},{"type":30,"tag":136,"props":348,"children":349},{"style":153},[350],{"type":35,"value":320},{"type":30,"tag":136,"props":352,"children":353},{"style":153},[354],{"type":35,"value":355}," await",{"type":30,"tag":136,"props":357,"children":358},{"style":159},[359],{"type":35,"value":360}," storefront.",{"type":30,"tag":136,"props":362,"children":363},{"style":246},[364],{"type":35,"value":365},"query",{"type":30,"tag":136,"props":367,"children":368},{"style":159},[369],{"type":35,"value":370},"(",{"type":30,"tag":136,"props":372,"children":373},{"style":307},[374],{"type":35,"value":375},"PRODUCT_QUERY",{"type":30,"tag":136,"props":377,"children":378},{"style":159},[379],{"type":35,"value":380},", {\n",{"type":30,"tag":136,"props":382,"children":384},{"class":138,"line":383},8,[385],{"type":30,"tag":136,"props":386,"children":387},{"style":159},[388],{"type":35,"value":389},"    variables: { handle: params.handle }\n",{"type":30,"tag":136,"props":391,"children":392},{"class":138,"line":24},[393],{"type":30,"tag":136,"props":394,"children":395},{"style":159},[396],{"type":35,"value":397},"  });\n",{"type":30,"tag":136,"props":399,"children":401},{"class":138,"line":400},10,[402,407,412],{"type":30,"tag":136,"props":403,"children":404},{"style":153},[405],{"type":35,"value":406},"  return",{"type":30,"tag":136,"props":408,"children":409},{"style":246},[410],{"type":35,"value":411}," json",{"type":30,"tag":136,"props":413,"children":414},{"style":159},[415],{"type":35,"value":416},"({ product });\n",{"type":30,"tag":136,"props":418,"children":420},{"class":138,"line":419},11,[421],{"type":30,"tag":136,"props":422,"children":423},{"style":159},[424],{"type":35,"value":425},"}\n",{"type":30,"tag":31,"props":427,"children":428},{},[429],{"type":35,"value":430},"Ce code s'exécute sur le CDN edge Shopify (Oxygen). Temps de réponse médian : 180 ms (données Shopify Partner 2026).",{"type":30,"tag":31,"props":432,"children":433},{},[434,439],{"type":30,"tag":63,"props":435,"children":436},{},[437],{"type":35,"value":438},"Coût d'exécution",{"type":35,"value":440}," : licence Shopify Plus 2000 $\u002Fmois (frais de transaction 0,15 %), hébergement Hydrogen sur Oxygen inclus. Sans microservices supplémentaires, total 2200 $\u002Fmois. Sur 100k sessions\u002Fmois, Core Web Vitals : LCP 1,2 s, TBT 85 ms (si Skeleton UI et Suspense boundary de Hydrogen sont optimisés).",{"type":30,"tag":31,"props":442,"children":443},{},[444,449],{"type":30,"tag":63,"props":445,"children":446},{},[447],{"type":35,"value":448},"Compromis",{"type":35,"value":450}," : vous ne pouvez pas découpler le checkout de Shopify. Si vous avez besoin d'un checkout ultra-personnalisé (ex : flux d'approbation multi-étapes B2B), Hydrogen sera limité. Mais dans 80 % des scénarios e-commerce, cette limite n'est pas problématique — le taux de conversion Shopify checkout est 68 % en médian (données 2025), et un checkout custom dépasse rarement ce chiffre sans tests A\u002FB agressifs.",{"type":30,"tag":31,"props":452,"children":453},{},[454,456,465],{"type":35,"value":455},"Dans l'implémentation du ",{"type":30,"tag":457,"props":458,"children":462},"a",{"href":459,"rel":460},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[461],"nofollow",[463],{"type":35,"value":464},"commerce sans tête",{"type":35,"value":466},", nous recommandons généralement Hydrogen pour la tranche 3-5M TL de GMV annuel : vous obtenez la vélocité du frontend headless tout en bénéficiant de la stabilité du backend Shopify.",{"type":30,"tag":38,"props":468,"children":470},{"id":469},"commercetools-liberté-mach-pure-charge-dintégration-pure",[471],{"type":35,"value":472},"commercetools : Liberté MACH Pure, Charge d'Intégration Pure",{"type":30,"tag":31,"props":474,"children":475},{},[476],{"type":35,"value":477},"commercetools en 2026 est la référence du « vrai composable ». Tout est API : panier, produit, tarification, client, commande. Vous connectez le frontend via Next.js, Nuxt ou SvelteKit ; le checkout via Adyen, Stripe ou Klarna ; la recherche via Algolia, Coveo ou Elasticsearch. Cette liberté est le rêve d'un ingénieur — mais potentiellement le cauchemar d'un CFO.",{"type":30,"tag":31,"props":479,"children":480},{},[481,485],{"type":30,"tag":63,"props":482,"children":483},{},[484],{"type":35,"value":113},{"type":35,"value":486}," : en moyenne 16 semaines (feature set minimal). Pourquoi si long ? Parce que chaque intégration est du code custom :",{"type":30,"tag":488,"props":489,"children":490},"ul",{},[491,501,511],{"type":30,"tag":59,"props":492,"children":493},{},[494,499],{"type":30,"tag":63,"props":495,"children":496},{},[497],{"type":35,"value":498},"Authentification",{"type":35,"value":500}," : flux OAuth 2.0 client credentials de commercetools — gestion de jetons distincte pour chaque microservice (expires_in 172800s, logique de refresh à votre charge).",{"type":30,"tag":59,"props":502,"children":503},{},[504,509],{"type":30,"tag":63,"props":505,"children":506},{},[507],{"type":35,"value":508},"Synchronisation du panier",{"type":35,"value":510}," : l'état du panier est-il en session storage, Redis ou API commercetools ? Cette décision change l'architecture. Si vous l'hébergez dans Redis, la validation d'inventaire doit appeler l'API à chaque requête (risque de race condition).",{"type":30,"tag":59,"props":512,"children":513},{},[514,519],{"type":30,"tag":63,"props":515,"children":516},{},[517],{"type":35,"value":518},"Orchestration du checkout",{"type":35,"value":520}," : quand une commande est confirmée, vous devez enchaîner : création de commande dans commercetools → charge vers le prestataire de paiement → push vers l'ERP → notification au service e-mail. Un échec dans cette chaîne demande une logique de rollback personnalisée.",{"type":30,"tag":31,"props":522,"children":523},{},[524],{"type":35,"value":525},"Exemple de code d'intégration (route API Next.js pour mettre à jour le panier) :",{"type":30,"tag":126,"props":527,"children":529},{"className":128,"code":528,"language":130,"meta":14,"style":14},"\u002F\u002F pages\u002Fapi\u002Fcart\u002Fadd.ts\nimport { createApiClient } from '@commercetools\u002Fsdk-client-v2';\nimport { createAuthMiddlewareForClientCredentialsFlow } from '@commercetools\u002Fsdk-middleware-auth';\n\nexport default async function handler(req, res) {\n  const client = createApiClient({\n    middlewares: [\n      createAuthMiddlewareForClientCredentialsFlow({\n        host: 'https:\u002F\u002Fauth.europe-west1.gcp.commercetools.com',\n        projectKey: process.env.CTP_PROJECT_KEY,\n        credentials: {\n          clientId: process.env.CTP_CLIENT_ID,\n          clientSecret: process.env.CTP_CLIENT_SECRET\n        }\n      })\n    ]\n  });\n\n  const { productId, quantity } = req.body;\n  const cartResponse = await client.carts().withId({ ID: req.cookies.cartId }).post({\n    body: {\n      version: req.cookies.cartVersion,\n      actions: [{ action: 'addLineItem', productId, quantity }]\n    }\n  }).execute();\n\n  res.status(200).json(cartResponse.body);\n}\n",[530],{"type":30,"tag":117,"props":531,"children":532},{"__ignoreMap":14},[533,541,566,591,598,645,672,680,692,710,727,735,753,767,776,785,794,802,810,849,904,913,922,941,950,969,977,1015],{"type":30,"tag":136,"props":534,"children":535},{"class":138,"line":139},[536],{"type":30,"tag":136,"props":537,"children":538},{"style":143},[539],{"type":35,"value":540},"\u002F\u002F pages\u002Fapi\u002Fcart\u002Fadd.ts\n",{"type":30,"tag":136,"props":542,"children":543},{"class":138,"line":149},[544,548,553,557,562],{"type":30,"tag":136,"props":545,"children":546},{"style":153},[547],{"type":35,"value":156},{"type":30,"tag":136,"props":549,"children":550},{"style":159},[551],{"type":35,"value":552}," { createApiClient } ",{"type":30,"tag":136,"props":554,"children":555},{"style":153},[556],{"type":35,"value":167},{"type":30,"tag":136,"props":558,"children":559},{"style":170},[560],{"type":35,"value":561}," '@commercetools\u002Fsdk-client-v2'",{"type":30,"tag":136,"props":563,"children":564},{"style":159},[565],{"type":35,"value":178},{"type":30,"tag":136,"props":567,"children":568},{"class":138,"line":181},[569,573,578,582,587],{"type":30,"tag":136,"props":570,"children":571},{"style":153},[572],{"type":35,"value":156},{"type":30,"tag":136,"props":574,"children":575},{"style":159},[576],{"type":35,"value":577}," { createAuthMiddlewareForClientCredentialsFlow } ",{"type":30,"tag":136,"props":579,"children":580},{"style":153},[581],{"type":35,"value":167},{"type":30,"tag":136,"props":583,"children":584},{"style":170},[585],{"type":35,"value":586}," '@commercetools\u002Fsdk-middleware-auth'",{"type":30,"tag":136,"props":588,"children":589},{"style":159},[590],{"type":35,"value":178},{"type":30,"tag":136,"props":592,"children":593},{"class":138,"line":217},[594],{"type":30,"tag":136,"props":595,"children":596},{"emptyLinePlaceholder":221},[597],{"type":35,"value":224},{"type":30,"tag":136,"props":599,"children":600},{"class":138,"line":227},[601,605,610,614,618,623,627,632,636,641],{"type":30,"tag":136,"props":602,"children":603},{"style":153},[604],{"type":35,"value":233},{"type":30,"tag":136,"props":606,"children":607},{"style":153},[608],{"type":35,"value":609}," default",{"type":30,"tag":136,"props":611,"children":612},{"style":153},[613],{"type":35,"value":238},{"type":30,"tag":136,"props":615,"children":616},{"style":153},[617],{"type":35,"value":243},{"type":30,"tag":136,"props":619,"children":620},{"style":246},[621],{"type":35,"value":622}," handler",{"type":30,"tag":136,"props":624,"children":625},{"style":159},[626],{"type":35,"value":370},{"type":30,"tag":136,"props":628,"children":629},{"style":257},[630],{"type":35,"value":631},"req",{"type":30,"tag":136,"props":633,"children":634},{"style":159},[635],{"type":35,"value":265},{"type":30,"tag":136,"props":637,"children":638},{"style":257},[639],{"type":35,"value":640},"res",{"type":30,"tag":136,"props":642,"children":643},{"style":159},[644],{"type":35,"value":290},{"type":30,"tag":136,"props":646,"children":647},{"class":138,"line":293},[648,652,657,662,667],{"type":30,"tag":136,"props":649,"children":650},{"style":153},[651],{"type":35,"value":299},{"type":30,"tag":136,"props":653,"children":654},{"style":307},[655],{"type":35,"value":656}," client",{"type":30,"tag":136,"props":658,"children":659},{"style":153},[660],{"type":35,"value":661}," =",{"type":30,"tag":136,"props":663,"children":664},{"style":246},[665],{"type":35,"value":666}," createApiClient",{"type":30,"tag":136,"props":668,"children":669},{"style":159},[670],{"type":35,"value":671},"({\n",{"type":30,"tag":136,"props":673,"children":674},{"class":138,"line":328},[675],{"type":30,"tag":136,"props":676,"children":677},{"style":159},[678],{"type":35,"value":679},"    middlewares: [\n",{"type":30,"tag":136,"props":681,"children":682},{"class":138,"line":383},[683,688],{"type":30,"tag":136,"props":684,"children":685},{"style":246},[686],{"type":35,"value":687},"      createAuthMiddlewareForClientCredentialsFlow",{"type":30,"tag":136,"props":689,"children":690},{"style":159},[691],{"type":35,"value":671},{"type":30,"tag":136,"props":693,"children":694},{"class":138,"line":24},[695,700,705],{"type":30,"tag":136,"props":696,"children":697},{"style":159},[698],{"type":35,"value":699},"        host: ",{"type":30,"tag":136,"props":701,"children":702},{"style":170},[703],{"type":35,"value":704},"'https:\u002F\u002Fauth.europe-west1.gcp.commercetools.com'",{"type":30,"tag":136,"props":706,"children":707},{"style":159},[708],{"type":35,"value":709},",\n",{"type":30,"tag":136,"props":711,"children":712},{"class":138,"line":400},[713,718,723],{"type":30,"tag":136,"props":714,"children":715},{"style":159},[716],{"type":35,"value":717},"        projectKey: process.env.",{"type":30,"tag":136,"props":719,"children":720},{"style":307},[721],{"type":35,"value":722},"CTP_PROJECT_KEY",{"type":30,"tag":136,"props":724,"children":725},{"style":159},[726],{"type":35,"value":709},{"type":30,"tag":136,"props":728,"children":729},{"class":138,"line":419},[730],{"type":30,"tag":136,"props":731,"children":732},{"style":159},[733],{"type":35,"value":734},"        credentials: {\n",{"type":30,"tag":136,"props":736,"children":738},{"class":138,"line":737},12,[739,744,749],{"type":30,"tag":136,"props":740,"children":741},{"style":159},[742],{"type":35,"value":743},"          clientId: process.env.",{"type":30,"tag":136,"props":745,"children":746},{"style":307},[747],{"type":35,"value":748},"CTP_CLIENT_ID",{"type":30,"tag":136,"props":750,"children":751},{"style":159},[752],{"type":35,"value":709},{"type":30,"tag":136,"props":754,"children":756},{"class":138,"line":755},13,[757,762],{"type":30,"tag":136,"props":758,"children":759},{"style":159},[760],{"type":35,"value":761},"          clientSecret: process.env.",{"type":30,"tag":136,"props":763,"children":764},{"style":307},[765],{"type":35,"value":766},"CTP_CLIENT_SECRET\n",{"type":30,"tag":136,"props":768,"children":770},{"class":138,"line":769},14,[771],{"type":30,"tag":136,"props":772,"children":773},{"style":159},[774],{"type":35,"value":775},"        }\n",{"type":30,"tag":136,"props":777,"children":779},{"class":138,"line":778},15,[780],{"type":30,"tag":136,"props":781,"children":782},{"style":159},[783],{"type":35,"value":784},"      })\n",{"type":30,"tag":136,"props":786,"children":788},{"class":138,"line":787},16,[789],{"type":30,"tag":136,"props":790,"children":791},{"style":159},[792],{"type":35,"value":793},"    ]\n",{"type":30,"tag":136,"props":795,"children":797},{"class":138,"line":796},17,[798],{"type":30,"tag":136,"props":799,"children":800},{"style":159},[801],{"type":35,"value":397},{"type":30,"tag":136,"props":803,"children":805},{"class":138,"line":804},18,[806],{"type":30,"tag":136,"props":807,"children":808},{"emptyLinePlaceholder":221},[809],{"type":35,"value":224},{"type":30,"tag":136,"props":811,"children":813},{"class":138,"line":812},19,[814,818,822,827,831,836,840,844],{"type":30,"tag":136,"props":815,"children":816},{"style":153},[817],{"type":35,"value":299},{"type":30,"tag":136,"props":819,"children":820},{"style":159},[821],{"type":35,"value":304},{"type":30,"tag":136,"props":823,"children":824},{"style":307},[825],{"type":35,"value":826},"productId",{"type":30,"tag":136,"props":828,"children":829},{"style":159},[830],{"type":35,"value":265},{"type":30,"tag":136,"props":832,"children":833},{"style":307},[834],{"type":35,"value":835},"quantity",{"type":30,"tag":136,"props":837,"children":838},{"style":159},[839],{"type":35,"value":315},{"type":30,"tag":136,"props":841,"children":842},{"style":153},[843],{"type":35,"value":320},{"type":30,"tag":136,"props":845,"children":846},{"style":159},[847],{"type":35,"value":848}," req.body;\n",{"type":30,"tag":136,"props":850,"children":852},{"class":138,"line":851},20,[853,857,862,866,870,875,880,885,890,895,900],{"type":30,"tag":136,"props":854,"children":855},{"style":153},[856],{"type":35,"value":299},{"type":30,"tag":136,"props":858,"children":859},{"style":307},[860],{"type":35,"value":861}," cartResponse",{"type":30,"tag":136,"props":863,"children":864},{"style":153},[865],{"type":35,"value":661},{"type":30,"tag":136,"props":867,"children":868},{"style":153},[869],{"type":35,"value":355},{"type":30,"tag":136,"props":871,"children":872},{"style":159},[873],{"type":35,"value":874}," client.",{"type":30,"tag":136,"props":876,"children":877},{"style":246},[878],{"type":35,"value":879},"carts",{"type":30,"tag":136,"props":881,"children":882},{"style":159},[883],{"type":35,"value":884},"().",{"type":30,"tag":136,"props":886,"children":887},{"style":246},[888],{"type":35,"value":889},"withId",{"type":30,"tag":136,"props":891,"children":892},{"style":159},[893],{"type":35,"value":894},"({ ID: req.cookies.cartId }).",{"type":30,"tag":136,"props":896,"children":897},{"style":246},[898],{"type":35,"value":899},"post",{"type":30,"tag":136,"props":901,"children":902},{"style":159},[903],{"type":35,"value":671},{"type":30,"tag":136,"props":905,"children":907},{"class":138,"line":906},21,[908],{"type":30,"tag":136,"props":909,"children":910},{"style":159},[911],{"type":35,"value":912},"    body: {\n",{"type":30,"tag":136,"props":914,"children":916},{"class":138,"line":915},22,[917],{"type":30,"tag":136,"props":918,"children":919},{"style":159},[920],{"type":35,"value":921},"      version: req.cookies.cartVersion,\n",{"type":30,"tag":136,"props":923,"children":925},{"class":138,"line":924},23,[926,931,936],{"type":30,"tag":136,"props":927,"children":928},{"style":159},[929],{"type":35,"value":930},"      actions: [{ action: ",{"type":30,"tag":136,"props":932,"children":933},{"style":170},[934],{"type":35,"value":935},"'addLineItem'",{"type":30,"tag":136,"props":937,"children":938},{"style":159},[939],{"type":35,"value":940},", productId, quantity }]\n",{"type":30,"tag":136,"props":942,"children":944},{"class":138,"line":943},24,[945],{"type":30,"tag":136,"props":946,"children":947},{"style":159},[948],{"type":35,"value":949},"    }\n",{"type":30,"tag":136,"props":951,"children":953},{"class":138,"line":952},25,[954,959,964],{"type":30,"tag":136,"props":955,"children":956},{"style":159},[957],{"type":35,"value":958},"  }).",{"type":30,"tag":136,"props":960,"children":961},{"style":246},[962],{"type":35,"value":963},"execute",{"type":30,"tag":136,"props":965,"children":966},{"style":159},[967],{"type":35,"value":968},"();\n",{"type":30,"tag":136,"props":970,"children":972},{"class":138,"line":971},26,[973],{"type":30,"tag":136,"props":974,"children":975},{"emptyLinePlaceholder":221},[976],{"type":35,"value":224},{"type":30,"tag":136,"props":978,"children":980},{"class":138,"line":979},27,[981,986,991,995,1000,1005,1010],{"type":30,"tag":136,"props":982,"children":983},{"style":159},[984],{"type":35,"value":985},"  res.",{"type":30,"tag":136,"props":987,"children":988},{"style":246},[989],{"type":35,"value":990},"status",{"type":30,"tag":136,"props":992,"children":993},{"style":159},[994],{"type":35,"value":370},{"type":30,"tag":136,"props":996,"children":997},{"style":307},[998],{"type":35,"value":999},"200",{"type":30,"tag":136,"props":1001,"children":1002},{"style":159},[1003],{"type":35,"value":1004},").",{"type":30,"tag":136,"props":1006,"children":1007},{"style":246},[1008],{"type":35,"value":1009},"json",{"type":30,"tag":136,"props":1011,"children":1012},{"style":159},[1013],{"type":35,"value":1014},"(cartResponse.body);\n",{"type":30,"tag":136,"props":1016,"children":1018},{"class":138,"line":1017},28,[1019],{"type":30,"tag":136,"props":1020,"children":1021},{"style":159},[1022],{"type":35,"value":425},{"type":30,"tag":31,"props":1024,"children":1025},{},[1026],{"type":35,"value":1027},"Ce code ajoute simplement un produit au panier — le moteur de tarification est distinct (commercetools Pricing API), la vérification d'inventaire est distincte (Inventory API), et le calcul d'expédition est distinct (extension custom ou service tiers). Chacun a sa propre latence.",{"type":30,"tag":31,"props":1029,"children":1030},{},[1031,1035],{"type":30,"tag":63,"props":1032,"children":1033},{},[1034],{"type":35,"value":438},{"type":35,"value":1036}," : licence commercetools 50 K-200 K $\u002Fan (selon volume de requêtes), Algolia 800 $\u002Fmois, Contentful 600 $\u002Fmois, hébergement Vercel 1200 $\u002Fmois, Sentry monitoring 200 $\u002Fmois. Total 5-7 K $\u002Fmois (+ coût de développement initial 150-250 K $). En compensation, vous obtenez TBT 110 ms et LCP 1,1 s (avec caching en edge + ISR optimisé).",{"type":30,"tag":31,"props":1038,"children":1039},{},[1040,1044],{"type":30,"tag":63,"props":1041,"children":1042},{},[1043],{"type":35,"value":448},{"type":35,"value":1045}," : liberté + coût. Si votre scénario inclut tarification multi-régions (lira turque, euro, dollar avec règles de marge différentes), workflow B2B complexe ou tarification de bundle dynamique, commercetools est le bon choix. Mais si votre e-commerce est standard (B2C, devise unique, checkout simple), la surcharge d'intégration réduit le ROI.",{"type":30,"tag":38,"props":1047,"children":1049},{"id":1048},"bigcommerce-catalyst-nouvel-arrivant-question-de-maturité",[1050],{"type":35,"value":1051},"BigCommerce Catalyst : Nouvel Arrivant, Question de Maturité",{"type":30,"tag":31,"props":1053,"children":1054},{},[1055],{"type":35,"value":1056},"BigCommerce Catalyst est sorti de beta fin 2024, en GA début 2026. Concept : React Server Components (RSC) + Next.js App Router + BigCommerce Storefront API. Modèle hybride similaire à Hydrogen — backend BigCommerce, frontend RSC.",{"type":30,"tag":31,"props":1058,"children":1059},{},[1060,1064],{"type":30,"tag":63,"props":1061,"children":1062},{},[1063],{"type":35,"value":113},{"type":35,"value":1065}," : en moyenne 8 semaines. La documentation API BigCommerce n'atteint pas encore le niveau Shopify (en 2026), mais le CLI Catalyst scaffold un projet en 15 minutes. Exemple de composant RSC :",{"type":30,"tag":126,"props":1067,"children":1071},{"className":1068,"code":1069,"language":1070,"meta":14,"style":14},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fproduct\u002F[slug]\u002Fpage.tsx\nimport { getProduct } from '@\u002Flib\u002Fbigcommerce';\n\nexport default async function ProductPage({ params }) {\n  const product = await getProduct(params.slug); \u002F\u002F Server Component — API directe\n  \n  return (\n    \u003Cdiv>\n      \u003Ch1>{product.name}\u003C\u002Fh1>\n      \u003Cp>{product.price.value} {product.price.currencyCode}\u003C\u002Fp>\n      \u003CAddToCartButton productId={product.id} \u002F> {\u002F* Client Component *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n","tsx",[1072],{"type":30,"tag":117,"props":1073,"children":1074},{"__ignoreMap":14},[1075,1083,1108,1115,1152,1187,1195,1207,1226,1252,1276,1311,1327,1335],{"type":30,"tag":136,"props":1076,"children":1077},{"class":138,"line":139},[1078],{"type":30,"tag":136,"props":1079,"children":1080},{"style":143},[1081],{"type":35,"value":1082},"\u002F\u002F app\u002Fproduct\u002F[slug]\u002Fpage.tsx\n",{"type":30,"tag":136,"props":1084,"children":1085},{"class":138,"line":149},[1086,1090,1095,1099,1104],{"type":30,"tag":136,"props":1087,"children":1088},{"style":153},[1089],{"type":35,"value":156},{"type":30,"tag":136,"props":1091,"children":1092},{"style":159},[1093],{"type":35,"value":1094}," { getProduct } ",{"type":30,"tag":136,"props":1096,"children":1097},{"style":153},[1098],{"type":35,"value":167},{"type":30,"tag":136,"props":1100,"children":1101},{"style":170},[1102],{"type":35,"value":1103}," '@\u002Flib\u002Fbigcommerce'",{"type":30,"tag":136,"props":1105,"children":1106},{"style":159},[1107],{"type":35,"value":178},{"type":30,"tag":136,"props":1109,"children":1110},{"class":138,"line":181},[1111],{"type":30,"tag":136,"props":1112,"children":1113},{"emptyLinePlaceholder":221},[1114],{"type":35,"value":224},{"type":30,"tag":136,"props":1116,"children":1117},{"class":138,"line":217},[1118,1122,1126,1130,1134,1139,1143,1147],{"type":30,"tag":136,"props":1119,"children":1120},{"style":153},[1121],{"type":35,"value":233},{"type":30,"tag":136,"props":1123,"children":1124},{"style":153},[1125],{"type":35,"value":609},{"type":30,"tag":136,"props":1127,"children":1128},{"style":153},[1129],{"type":35,"value":238},{"type":30,"tag":136,"props":1131,"children":1132},{"style":153},[1133],{"type":35,"value":243},{"type":30,"tag":136,"props":1135,"children":1136},{"style":246},[1137],{"type":35,"value":1138}," ProductPage",{"type":30,"tag":136,"props":1140,"children":1141},{"style":159},[1142],{"type":35,"value":254},{"type":30,"tag":136,"props":1144,"children":1145},{"style":257},[1146],{"type":35,"value":260},{"type":30,"tag":136,"props":1148,"children":1149},{"style":159},[1150],{"type":35,"value":1151}," }) {\n",{"type":30,"tag":136,"props":1153,"children":1154},{"class":138,"line":227},[1155,1159,1164,1168,1172,1177,1182],{"type":30,"tag":136,"props":1156,"children":1157},{"style":153},[1158],{"type":35,"value":299},{"type":30,"tag":136,"props":1160,"children":1161},{"style":307},[1162],{"type":35,"value":1163}," product",{"type":30,"tag":136,"props":1165,"children":1166},{"style":153},[1167],{"type":35,"value":661},{"type":30,"tag":136,"props":1169,"children":1170},{"style":153},[1171],{"type":35,"value":355},{"type":30,"tag":136,"props":1173,"children":1174},{"style":246},[1175],{"type":35,"value":1176}," getProduct",{"type":30,"tag":136,"props":1178,"children":1179},{"style":159},[1180],{"type":35,"value":1181},"(params.slug); ",{"type":30,"tag":136,"props":1183,"children":1184},{"style":143},[1185],{"type":35,"value":1186},"\u002F\u002F Server Component — API directe\n",{"type":30,"tag":136,"props":1188,"children":1189},{"class":138,"line":293},[1190],{"type":30,"tag":136,"props":1191,"children":1192},{"style":159},[1193],{"type":35,"value":1194},"  \n",{"type":30,"tag":136,"props":1196,"children":1197},{"class":138,"line":328},[1198,1202],{"type":30,"tag":136,"props":1199,"children":1200},{"style":153},[1201],{"type":35,"value":406},{"type":30,"tag":136,"props":1203,"children":1204},{"style":159},[1205],{"type":35,"value":1206}," (\n",{"type":30,"tag":136,"props":1208,"children":1209},{"class":138,"line":383},[1210,1215,1221],{"type":30,"tag":136,"props":1211,"children":1212},{"style":159},[1213],{"type":35,"value":1214},"    \u003C",{"type":30,"tag":136,"props":1216,"children":1218},{"style":1217},"--shiki-default:#85E89D",[1219],{"type":35,"value":1220},"div",{"type":30,"tag":136,"props":1222,"children":1223},{"style":159},[1224],{"type":35,"value":1225},">\n",{"type":30,"tag":136,"props":1227,"children":1228},{"class":138,"line":24},[1229,1234,1239,1244,1248],{"type":30,"tag":136,"props":1230,"children":1231},{"style":159},[1232],{"type":35,"value":1233},"      \u003C",{"type":30,"tag":136,"props":1235,"children":1236},{"style":1217},[1237],{"type":35,"value":1238},"h1",{"type":30,"tag":136,"props":1240,"children":1241},{"style":159},[1242],{"type":35,"value":1243},">{product.name}\u003C\u002F",{"type":30,"tag":136,"props":1245,"children":1246},{"style":1217},[1247],{"type":35,"value":1238},{"type":30,"tag":136,"props":1249,"children":1250},{"style":159},[1251],{"type":35,"value":1225},{"type":30,"tag":136,"props":1253,"children":1254},{"class":138,"line":400},[1255,1259,1263,1268,1272],{"type":30,"tag":136,"props":1256,"children":1257},{"style":159},[1258],{"type":35,"value":1233},{"type":30,"tag":136,"props":1260,"children":1261},{"style":1217},[1262],{"type":35,"value":31},{"type":30,"tag":136,"props":1264,"children":1265},{"style":159},[1266],{"type":35,"value":1267},">{product.price.value} {product.price.currencyCode}\u003C\u002F",{"type":30,"tag":136,"props":1269,"children":1270},{"style":1217},[1271],{"type":35,"value":31},{"type":30,"tag":136,"props":1273,"children":1274},{"style":159},[1275],{"type":35,"value":1225},{"type":30,"tag":136,"props":1277,"children":1278},{"class":138,"line":419},[1279,1283,1288,1293,1297,1302,1307],{"type":30,"tag":136,"props":1280,"children":1281},{"style":159},[1282],{"type":35,"value":1233},{"type":30,"tag":136,"props":1284,"children":1285},{"style":307},[1286],{"type":35,"value":1287},"AddToCartButton",{"type":30,"tag":136,"props":1289,"children":1290},{"style":246},[1291],{"type":35,"value":1292}," productId",{"type":30,"tag":136,"props":1294,"children":1295},{"style":153},[1296],{"type":35,"value":320},{"type":30,"tag":136,"props":1298,"children":1299},{"style":159},[1300],{"type":35,"value":1301},"{product.id} \u002F> {",{"type":30,"tag":136,"props":1303,"children":1304},{"style":143},[1305],{"type":35,"value":1306},"\u002F* Client Component *\u002F",{"type":30,"tag":136,"props":1308,"children":1309},{"style":159},[1310],{"type":35,"value":425},{"type":30,"tag":136,"props":1312,"children":1313},{"class":138,"line":737},[1314,1319,1323],{"type":30,"tag":136,"props":1315,"children":1316},{"style":159},[1317],{"type":35,"value":1318},"    \u003C\u002F",{"type":30,"tag":136,"props":1320,"children":1321},{"style":1217},[1322],{"type":35,"value":1220},{"type":30,"tag":136,"props":1324,"children":1325},{"style":159},[1326],{"type":35,"value":1225},{"type":30,"tag":136,"props":1328,"children":1329},{"class":138,"line":755},[1330],{"type":30,"tag":136,"props":1331,"children":1332},{"style":159},[1333],{"type":35,"value":1334},"  );\n",{"type":30,"tag":136,"props":1336,"children":1337},{"class":138,"line":769},[1338],{"type":30,"tag":136,"props":1339,"children":1340},{"style":159},[1341],{"type":35,"value":425},{"type":30,"tag":31,"props":1343,"children":1344},{},[1345],{"type":35,"value":1346},"Grâce aux RSC, le data fetch se fait côté serveur et le HTML est envoyé au navigateur en flux continu. TBT faible (médian 95 ms), LCP 1,3 s.",{"type":30,"tag":31,"props":1348,"children":1349},{},[1350,1354],{"type":30,"tag":63,"props":1351,"children":1352},{},[1353],{"type":35,"value":438},{"type":35,"value":1355}," : BigCommerce Plus 299 $\u002Fmois (sans frais de transaction), hébergement Vercel 500 $\u002Fmois (plan Pro). Total 800 $\u002Fmois. Moins cher que Hydrogen, beaucoup moins cher que commercetools. Attention : Catalyst a seulement 18 mois d'existence. En production, les edge cases (panier multi-devises, application de cartes-cadeaux) ne sont pas aussi fluides que Shopify.",{"type":30,"tag":31,"props":1357,"children":1358},{},[1359,1363],{"type":30,"tag":63,"props":1360,"children":1361},{},[1362],{"type":35,"value":448},{"type":35,"value":1364}," : avantage coût + risque de maturité. Pour les projets midtier (2-10M TL GMV), c'est judicieux. Mais pour un système critique enterprise (ex : 50K utilisateurs simultanés le Black Friday), les limites de débit de l'API BigCommerce (450 req\u002Fs par défaut) peuvent devenir un goulot — Shopify offre 1000 req\u002Fs.",{"type":30,"tag":38,"props":1366,"children":1368},{"id":1367},"matrice-de-sélection-plateformes-par-scénarios-de-production",[1369],{"type":35,"value":1370},"Matrice de Sélection : Plateformes par Scénarios de Production",{"type":30,"tag":31,"props":1372,"children":1373},{},[1374,1376,1381,1382,1387,1388,1393],{"type":35,"value":1375},"Le choix de plateforme dépend de 3 variables : ",{"type":30,"tag":63,"props":1377,"children":1378},{},[1379],{"type":35,"value":1380},"GMV\u002Ftrafic",{"type":35,"value":265},{"type":30,"tag":63,"props":1383,"children":1384},{},[1385],{"type":35,"value":1386},"complexité de la logique métier",{"type":35,"value":265},{"type":30,"tag":63,"props":1389,"children":1390},{},[1391],{"type":35,"value":1392},"maturité d'ingénierie",{"type":35,"value":1394},".",{"type":30,"tag":1396,"props":1397,"children":1398},"table",{},[1399,1423],{"type":30,"tag":1400,"props":1401,"children":1402},"thead",{},[1403],{"type":30,"tag":1404,"props":1405,"children":1406},"tr",{},[1407,1413,1418],{"type":30,"tag":1408,"props":1409,"children":1410},"th",{},[1411],{"type":35,"value":1412},"Scénario",{"type":30,"tag":1408,"props":1414,"children":1415},{},[1416],{"type":35,"value":1417},"Plateforme",{"type":30,"tag":1408,"props":1419,"children":1420},{},[1421],{"type":35,"value":1422},"Justification",{"type":30,"tag":1424,"props":1425,"children":1426},"tbody",{},[1427,1446,1464,1482],{"type":30,"tag":1404,"props":1428,"children":1429},{},[1430,1436,1441],{"type":30,"tag":1431,"props":1432,"children":1433},"td",{},[1434],{"type":35,"value":1435},"B2C, 1-5M TL GMV, checkout standard",{"type":30,"tag":1431,"props":1437,"children":1438},{},[1439],{"type":35,"value":1440},"Shopify Hydrogen",{"type":30,"tag":1431,"props":1442,"children":1443},{},[1444],{"type":35,"value":1445},"Stabilité gérée + équilibre de vitesse",{"type":30,"tag":1404,"props":1447,"children":1448},{},[1449,1454,1459],{"type":30,"tag":1431,"props":1450,"children":1451},{},[1452],{"type":35,"value":1453},"B2C, 5-20M TL GMV, catalogue multi-catégories",{"type":30,"tag":1431,"props":1455,"children":1456},{},[1457],{"type":35,"value":1458},"BigCommerce Catalyst",{"type":30,"tag":1431,"props":1460,"children":1461},{},[1462],{"type":35,"value":1463},"Avantage de coût, feature suffisant",{"type":30,"tag":1404,"props":1465,"children":1466},{},[1467,1472,1477],{"type":30,"tag":1431,"props":1468,"children":1469},{},[1470],{"type":35,"value":1471},"B2B, 10M+ TL GMV, tarification complexe",{"type":30,"tag":1431,"props":1473,"children":1474},{},[1475],{"type":35,"value":1476},"commercetools",{"type":30,"tag":1431,"props":1478,"children":1479},{},[1480],{"type":35,"value":1481},"Liberté requise, budget disponible",{"type":30,"tag":1404,"props":1483,"children":1484},{},[1485,1490,1495],{"type":30,"tag":1431,"props":1486,"children":1487},{},[1488],{"type":35,"value":1489},"Multi-marque, multi-région, 50M+ GMV",{"type":30,"tag":1431,"props":1491,"children":1492},{},[1493],{"type":35,"value":1494},"commercetools ou Shopify Plus (multi-boutique)",{"type":30,"tag":1431,"props":1496,"children":1497},{},[1498],{"type":35,"value":1499},"Scalabilité + conformité requise",{"type":30,"tag":31,"props":1501,"children":1502},{},[1503],{"type":35,"value":1504},"Il y a aussi une option « hybride » : backend Shopify Plus + frontend headless custom (sans Hydrogen). Vous vous connectez via l'API Storefront mais hébergez votre edge (Cloudflare Workers, Vercel Edge). Vous pouvez réduire LCP à 1,0 s, mais perdez les optimisations Hydrogen built-in (logique Suspense boundary, préchargement intelligente).",{"type":30,"tag":38,"props":1506,"children":1508},{"id":1507},"capacité-déquipe-et-durabilité",[1509],{"type":35,"value":1510},"Capacité d'Équipe et Durabilité",{"type":30,"tag":31,"props":1512,"children":1513},{},[1514,1516,1521],{"type":35,"value":1515},"L'architecture MACH ne concerne pas seulement la mise en place, mais aussi la ",{"type":30,"tag":63,"props":1517,"children":1518},{},[1519],{"type":35,"value":1520},"maintenance",{"type":35,"value":1522},". Dans un projet commercetools, vous avez besoin en moyenne de 2 backend dev + 1 frontend dev + 0,5 DevOps à temps plein (post-lancement). Avec Shopify Hydrogen, 1 frontend dev + 0,2 DevOps suffisent (car le backend Shopify est auto-géré).",{"type":30,"tag":31,"props":1524,"children":1525},{},[1526],{"type":35,"value":1527},"Profils d'équipe :",{"type":30,"tag":488,"props":1529,"children":1530},{},[1531,1540,1549],{"type":30,"tag":59,"props":1532,"children":1533},{},[1534,1538],{"type":30,"tag":63,"props":1535,"children":1536},{},[1537],{"type":35,"value":1440},{"type":35,"value":1539}," : connaissances Remix + expérience Shopify API. Même un dev junior-intermédiaire peut accéder à la production (doc très mature).",{"type":30,"tag":59,"props":1541,"children":1542},{},[1543,1547],{"type":30,"tag":63,"props":1544,"children":1545},{},[1546],{"type":35,"value":1458},{"type":35,"value":1548}," : maîtrise des React Server Components obligatoire. Les RSC sont encore niche — dev React senior requis.",{"type":30,"tag":59,"props":1550,"children":1551},{},[1552,1556],{"type":30,"tag":63,"props":1553,"children":1554},{},[1555],{"type":35,"value":1476},{"type":35,"value":1557}," : expérience microservices obligatoire, compréhension des flux OAuth, maturité de gestion d'erreurs. Mid-senior requis.",{"type":30,"tag":31,"props":1559,"children":1560},{},[1561],{"type":35,"value":1562},"Si votre équipe compte 2-3 personnes et n'est pas 100 % full-stack, Hydrogen est le choix le plus sûr. Avec 5+ personnes et un backend dédié, une migration vers commercetools a du sens.",{"type":30,"tag":38,"props":1564,"children":1566},{"id":1565},"benchmark-performance-chiffres-du-monde-réel",[1567],{"type":35,"value":1568},"Benchmark Performance : Chiffres du Monde Réel",{"type":30,"tag":31,"props":1570,"children":1571},{},[1572],{"type":35,"value":1573},"Extrait de 12 projets migrés entre 2025-2026 (valeurs médianes, données Lighthouse lab) :",{"type":30,"tag":1396,"props":1575,"children":1576},{},[1577,1607],{"type":30,"tag":1400,"props":1578,"children":1579},{},[1580],{"type":30,"tag":1404,"props":1581,"children":1582},{},[1583,1588,1593,1598,1603],{"type":30,"tag":1408,"props":1584,"children":1585},{},[1586],{"type":35,"value":1587},"Métrique",{"type":30,"tag":1408,"props":1589,"children":1590},{},[1591],{"type":35,"value":1592},"Shopify Liquid (baseline)",{"type":30,"tag":1408,"props":1594,"children":1595},{},[1596],{"type":35,"value":1597},"Hydrogen",{"type":30,"tag":1408,"props":1599,"children":1600},{},[1601],{"type":35,"value":1602},"Catalyst",{"type":30,"tag":1408,"props":1604,"children":1605},{},[1606],{"type":35,"value":1476},{"type":30,"tag":1424,"props":1608,"children":1609},{},[1610],{"type":30,"tag":1404,"props":1611,"children":1612},{},[1613,1618,1623,1628,1633],{"type":30,"tag":1431,"props":1614,"children":1615},{},[1616],{"type":35,"value":1617},"LCP",{"type":30,"tag":1431,"props":1619,"children":1620},{},[1621],{"type":35,"value":1622},"4,2 s",{"type":30,"tag":1431,"props":1624,"children":1625},{},[1626],{"type":35,"value":1627},"1,2 s",{"type":30,"tag":1431,"props":1629,"children":1630},{},[1631],{"type":35,"value":1632},"1,3 s",{"type":30,"tag":1431,"props":1634,"children":1635},{},[],{"type":30,"tag":1637,"props":1638,"children":1639},"style",{},[1640],{"type":35,"value":1641},"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":14,"searchDepth":181,"depth":181,"links":1643},[1644,1645,1646,1647,1648,1649,1650],{"id":40,"depth":149,"text":43},{"id":97,"depth":149,"text":100},{"id":469,"depth":149,"text":472},{"id":1048,"depth":149,"text":1051},{"id":1367,"depth":149,"text":1370},{"id":1507,"depth":149,"text":1510},{"id":1565,"depth":149,"text":1568},"markdown","content:fr:tech:commerce-composable-mach-architecture-production.md","content","fr\u002Ftech\u002Fcommerce-composable-mach-architecture-production.md","fr\u002Ftech\u002Fcommerce-composable-mach-architecture-production","md",1785967499833]