[{"data":1,"prerenderedAt":1067},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision":13},{"i18nKey":4,"paths":5},"tech-002-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metrics-driven-decision","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriche-decisionali","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-reshenie-na-osnove-metriki","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":9,"_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":1061,"_id":1062,"_source":1063,"_file":1064,"_stem":1065,"_extension":1066},"tech",false,"","Shopify Hydrogen vs Liquid : Nos Décisions Basées sur les Chiffres","TTFB, temps de build, vélocité dev, coût de migration — Comment nous avons choisi entre Hydrogen et Liquid avec des métriques concrètes. Analyse des tradeoffs et benchmarks réels.","2026-06-18",[21,22,23,24,25],"shopify-hydrogen","liquid","headless-commerce","web-performance","ttfb",9,"Roibase",{"type":29,"children":30,"toc":1048},"root",[31,39,46,51,60,80,88,195,200,207,212,218,223,231,244,252,265,287,292,298,311,319,399,404,417,423,428,436,454,462,480,488,506,518,523,529,534,539,545,550,558,571,579,592,597,610,615,902,907,913,918,962,967,1010,1015,1021,1037,1042],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Après 2024, prendre une décision architecturale sur les projets Shopify n'est plus une question de « moderne ou pas ». La vraie question est : quels chiffres justifient le projet ? Entre l'architecture React Server Components d'Hydrogen et l'approche monolithique de Liquid, nous partageons ici les données numériques collectées sur 6 projets différents. Pas de comparaison théorique de frameworks dans cet article — seulement une analyse fondée sur les preuves autour du TTFB, du temps de build, de la vélocité développeur et du coût de migration.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-edge-ssr-vs-server-side-render",[44],{"type":37,"value":45},"TTFB : Edge SSR vs Server-Side Render",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Notre première métrique : Time to First Byte. Sur les projets Hydrogen, nous avons testé entre Oxygen (le runtime edge de Shopify) et Cloudflare Workers. Les thèmes Liquid utilisent le pipeline de rendu par défaut de Shopify.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":32,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":37,"value":59},"Configuration du benchmark :",{"type":32,"tag":61,"props":62,"children":63},"ul",{},[64,70,75],{"type":32,"tag":65,"props":66,"children":67},"li",{},[68],{"type":37,"value":69},"Hydrogen : Remix 2.x + Oxygen, 8 routes, bundle moyen de 120 ko",{"type":32,"tag":65,"props":71,"children":72},{},[73],{"type":37,"value":74},"Liquid : Dawn 15.0, paramètres de cache par défaut",{"type":32,"tag":65,"props":76,"children":77},{},[78],{"type":37,"value":79},"Test : WebPageTest, localisation Virginie, connexion 3G Fast, moyenne sur 9 exécutions",{"type":32,"tag":33,"props":81,"children":82},{},[83],{"type":32,"tag":55,"props":84,"children":85},{},[86],{"type":37,"value":87},"Résultats :",{"type":32,"tag":89,"props":90,"children":91},"table",{},[92,121],{"type":32,"tag":93,"props":94,"children":95},"thead",{},[96],{"type":32,"tag":97,"props":98,"children":99},"tr",{},[100,106,111,116],{"type":32,"tag":101,"props":102,"children":103},"th",{},[104],{"type":37,"value":105},"Architecture",{"type":32,"tag":101,"props":107,"children":108},{},[109],{"type":37,"value":110},"TTFB (p50)",{"type":32,"tag":101,"props":112,"children":113},{},[114],{"type":37,"value":115},"TTFB (p95)",{"type":32,"tag":101,"props":117,"children":118},{},[119],{"type":37,"value":120},"LCP",{"type":32,"tag":122,"props":123,"children":124},"tbody",{},[125,149,172],{"type":32,"tag":97,"props":126,"children":127},{},[128,134,139,144],{"type":32,"tag":129,"props":130,"children":131},"td",{},[132],{"type":37,"value":133},"Liquid (Dawn)",{"type":32,"tag":129,"props":135,"children":136},{},[137],{"type":37,"value":138},"420 ms",{"type":32,"tag":129,"props":140,"children":141},{},[142],{"type":37,"value":143},"680 ms",{"type":32,"tag":129,"props":145,"children":146},{},[147],{"type":37,"value":148},"2,1 s",{"type":32,"tag":97,"props":150,"children":151},{},[152,157,162,167],{"type":32,"tag":129,"props":153,"children":154},{},[155],{"type":37,"value":156},"Hydrogen (Oxygen)",{"type":32,"tag":129,"props":158,"children":159},{},[160],{"type":37,"value":161},"180 ms",{"type":32,"tag":129,"props":163,"children":164},{},[165],{"type":37,"value":166},"310 ms",{"type":32,"tag":129,"props":168,"children":169},{},[170],{"type":37,"value":171},"1,4 s",{"type":32,"tag":97,"props":173,"children":174},{},[175,180,185,190],{"type":32,"tag":129,"props":176,"children":177},{},[178],{"type":37,"value":179},"Hydrogen (CF Workers)",{"type":32,"tag":129,"props":181,"children":182},{},[183],{"type":37,"value":184},"140 ms",{"type":32,"tag":129,"props":186,"children":187},{},[188],{"type":37,"value":189},"240 ms",{"type":32,"tag":129,"props":191,"children":192},{},[193],{"type":37,"value":194},"1,2 s",{"type":32,"tag":33,"props":196,"children":197},{},[198],{"type":37,"value":199},"Avec Hydrogen sur edge SSR et une stratégie de cache bien configurée, le TTFB baisse de 58 %. Mais cela vaut seulement pour les routes statiques — sur les routes personnalisées comme le panier ou le checkout, l'écart se réduit à 30 % puisque le cache est contourné.",{"type":32,"tag":201,"props":202,"children":204},"h3",{"id":203},"personnalisation-tradeoff-de-latence",[205],{"type":37,"value":206},"Personnalisation : Tradeoff de Latence",{"type":32,"tag":33,"props":208,"children":209},{},[210],{"type":37,"value":211},"La latence de personnalisation dans Hydrogen fonctionne ainsi : pour chaque utilisateur, la requête du panier aboutit à l'API Storefront, ce qui ajoute un roundtrip de ~80-120 ms même à la edge. Dans Liquid, cette requête est résolue directement dans le template côté serveur, sans roundtrip supplémentaire. Donc si votre nombre de pages personnalisées est élevé (par exemple, les PDP qui affichent de nombreuses variantes), le gain de TTFB diminue. Sur un projet cosmétique avec 240 SKU, la PDP en Hydrogen affichait 290 ms tandis qu'en Liquid c'était 380 ms — une différence de 23 %.",{"type":32,"tag":40,"props":213,"children":215},{"id":214},"temps-de-build-vitesse-ditération-dev",[216],{"type":37,"value":217},"Temps de Build : Vitesse d'Itération Dev",{"type":32,"tag":33,"props":219,"children":220},{},[221],{"type":37,"value":222},"Notre deuxième métrique : durée du lancement local et du build production. Pour Hydrogen, nous utilisons Vite ; pour Liquid, c'est Theme Kit ou Shopify CLI.",{"type":32,"tag":33,"props":224,"children":225},{},[226],{"type":32,"tag":55,"props":227,"children":228},{},[229],{"type":37,"value":230},"Démarrage du serveur dev :",{"type":32,"tag":61,"props":232,"children":233},{},[234,239],{"type":32,"tag":65,"props":235,"children":236},{},[237],{"type":37,"value":238},"Liquid (Theme Kit) : ~4 s",{"type":32,"tag":65,"props":240,"children":241},{},[242],{"type":37,"value":243},"Hydrogen (Vite dev) : ~1,8 s",{"type":32,"tag":33,"props":245,"children":246},{},[247],{"type":32,"tag":55,"props":248,"children":249},{},[250],{"type":37,"value":251},"Build production :",{"type":32,"tag":61,"props":253,"children":254},{},[255,260],{"type":32,"tag":65,"props":256,"children":257},{},[258],{"type":37,"value":259},"Liquid : 0 s (pas de build, Shopify effectue le rendu directement)",{"type":32,"tag":65,"props":261,"children":262},{},[263],{"type":37,"value":264},"Hydrogen : 12-18 s (génération du bundle + SSR output)",{"type":32,"tag":33,"props":266,"children":267},{},[268,270,277,279,285],{"type":37,"value":269},"Avec Liquid, l'absence de phase de build simplifie le pipeline CI\u002FCD. Pour Hydrogen, il y a une étape ",{"type":32,"tag":271,"props":272,"children":274},"code",{"className":273},[],[275],{"type":37,"value":276},"npm run build",{"type":37,"value":278}," qui ajoute 12 s, même pour les petites modifications. Cependant, le Hot Module Replacement (HMR) d'Hydrogen est beaucoup plus rapide — quand un fichier ",{"type":32,"tag":271,"props":280,"children":282},{"className":281},[],[283],{"type":37,"value":284},".liquid",{"type":37,"value":286}," change, Theme Kit doit se resynchroniser (~2-3 s), tandis que le HMR de Vite s'applique instantanément (\u003C200 ms).",{"type":32,"tag":33,"props":288,"children":289},{},[290],{"type":37,"value":291},"Pour les équipes effectuant 50+ modifications par jour, cette différence impacte directement la vélocité. Sur un projet de marque de mode, la migration vers Hydrogen a augmenté la vélocité du sprint de 18 % — la raison étant que les développeurs restaient en mode flux au lieu d'attendre les synchronisations.",{"type":32,"tag":40,"props":293,"children":295},{"id":294},"vélocité-développeur-typescript-outillage",[296],{"type":37,"value":297},"Vélocité Développeur : TypeScript + Outillage",{"type":32,"tag":33,"props":299,"children":300},{},[301,303,309],{"type":37,"value":302},"Notre troisième métrique : couverture TypeScript, linting et test. Liquid se gère avec JavaScript (balises ",{"type":32,"tag":271,"props":304,"children":306},{"className":305},[],[307],{"type":37,"value":308},"\u003Cscript>",{"type":37,"value":310}," dans Liquid), Hydrogen utilise TypeScript complètement.",{"type":32,"tag":33,"props":312,"children":313},{},[314],{"type":32,"tag":55,"props":315,"children":316},{},[317],{"type":37,"value":318},"Taux de capture d'erreurs :",{"type":32,"tag":89,"props":320,"children":321},{},[322,343],{"type":32,"tag":93,"props":323,"children":324},{},[325],{"type":32,"tag":97,"props":326,"children":327},{},[328,333,338],{"type":32,"tag":101,"props":329,"children":330},{},[331],{"type":37,"value":332},"Outil",{"type":32,"tag":101,"props":334,"children":335},{},[336],{"type":37,"value":337},"Liquid",{"type":32,"tag":101,"props":339,"children":340},{},[341],{"type":37,"value":342},"Hydrogen",{"type":32,"tag":122,"props":344,"children":345},{},[346,364,381],{"type":32,"tag":97,"props":347,"children":348},{},[349,354,359],{"type":32,"tag":129,"props":350,"children":351},{},[352],{"type":37,"value":353},"Erreur TypeScript compile-time",{"type":32,"tag":129,"props":355,"children":356},{},[357],{"type":37,"value":358},"0",{"type":32,"tag":129,"props":360,"children":361},{},[362],{"type":37,"value":363},"124\u002Fsprint",{"type":32,"tag":97,"props":365,"children":366},{},[367,372,377],{"type":32,"tag":129,"props":368,"children":369},{},[370],{"type":37,"value":371},"Avertissement ESLint runtime",{"type":32,"tag":129,"props":373,"children":374},{},[375],{"type":37,"value":376},"8\u002Fsprint",{"type":32,"tag":129,"props":378,"children":379},{},[380],{"type":37,"value":358},{"type":32,"tag":97,"props":382,"children":383},{},[384,389,394],{"type":32,"tag":129,"props":385,"children":386},{},[387],{"type":37,"value":388},"Couverture des tests unitaires",{"type":32,"tag":129,"props":390,"children":391},{},[392],{"type":37,"value":393},"12 %",{"type":32,"tag":129,"props":395,"children":396},{},[397],{"type":37,"value":398},"68 %",{"type":32,"tag":33,"props":400,"children":401},{},[402],{"type":37,"value":403},"Avec Hydrogen, les réponses de l'API Storefront arrivent avec des définitions de type TypeScript. Si le contrat API change, le build échoue — pas d'erreur runtime, mais une erreur au moment de la compilation. Avec Liquid, ces changements ne sont visibles qu'en production.",{"type":32,"tag":33,"props":405,"children":406},{},[407,409,415],{"type":37,"value":408},"Un exemple concret : l'API Storefront a changé la structure de la réponse ",{"type":32,"tag":271,"props":410,"children":412},{"className":411},[],[413],{"type":37,"value":414},"product.metafields",{"type":37,"value":416}," (Q2 2025). Sur les projets Hydrogen, TypeScript a levé une erreur, le déploiement a échoué et a été corrigé. Sur les projets Liquid, cela s'est manifesté par une erreur console en production, découverte trois jours plus tard. Cette différence de risque est critique pour les gros sites de commerce.",{"type":32,"tag":40,"props":418,"children":420},{"id":419},"coût-de-migration-effort-de-refactorisation",[421],{"type":37,"value":422},"Coût de Migration : Effort de Refactorisation",{"type":32,"tag":33,"props":424,"children":425},{},[426],{"type":37,"value":427},"Notre quatrième métrique : le coût de migrer un thème Liquid existant vers Hydrogen. Voici les données d'effort sur trois projets différents :",{"type":32,"tag":33,"props":429,"children":430},{},[431],{"type":32,"tag":55,"props":432,"children":433},{},[434],{"type":37,"value":435},"Projet A (mode, 80 SKU) :",{"type":32,"tag":61,"props":437,"children":438},{},[439,444,449],{"type":32,"tag":65,"props":440,"children":441},{},[442],{"type":37,"value":443},"Liquid LOC : ~4 200",{"type":32,"tag":65,"props":445,"children":446},{},[447],{"type":37,"value":448},"Migration Hydrogen : 18 jours développeur",{"type":32,"tag":65,"props":450,"children":451},{},[452],{"type":37,"value":453},"Nombre de composants : 32 composants React",{"type":32,"tag":33,"props":455,"children":456},{},[457],{"type":32,"tag":55,"props":458,"children":459},{},[460],{"type":37,"value":461},"Projet B (électronique, 1 200 SKU) :",{"type":32,"tag":61,"props":463,"children":464},{},[465,470,475],{"type":32,"tag":65,"props":466,"children":467},{},[468],{"type":37,"value":469},"Liquid LOC : ~9 800",{"type":32,"tag":65,"props":471,"children":472},{},[473],{"type":37,"value":474},"Migration Hydrogen : 42 jours développeur",{"type":32,"tag":65,"props":476,"children":477},{},[478],{"type":37,"value":479},"Nombre de composants : 78 composants React",{"type":32,"tag":33,"props":481,"children":482},{},[483],{"type":32,"tag":55,"props":484,"children":485},{},[486],{"type":37,"value":487},"Projet C (cosmétiques, 240 SKU) :",{"type":32,"tag":61,"props":489,"children":490},{},[491,496,501],{"type":32,"tag":65,"props":492,"children":493},{},[494],{"type":37,"value":495},"Liquid LOC : ~6 100",{"type":32,"tag":65,"props":497,"children":498},{},[499],{"type":37,"value":500},"Migration Hydrogen : 28 jours développeur",{"type":32,"tag":65,"props":502,"children":503},{},[504],{"type":37,"value":505},"Nombre de composants : 51 composants React",{"type":32,"tag":33,"props":507,"children":508},{},[509,511,516],{"type":37,"value":510},"Coût moyen de migration : ",{"type":32,"tag":55,"props":512,"children":513},{},[514],{"type":37,"value":515},"1 LOC Liquid = 0,004 jours développeur",{"type":37,"value":517},". Donc un thème Liquid de 5 000 lignes demande ~20 jours développeur pour passer à Hydrogen. Ce temps exclut les tests et l'AQ, c'est uniquement le développement.",{"type":32,"tag":33,"props":519,"children":520},{},[521],{"type":37,"value":522},"L'aspect qui consomme le plus de temps lors de la migration : le flux panier\u002Fcheckout (natif dans Shopify pour Liquid, mais implémentation personnalisée requise pour Hydrogen). Sur le Projet B, la logique de remise dynamique a nécessité 12 jours supplémentaires puisqu'elle devait être réévaluée en passant de Liquid à React.",{"type":32,"tag":201,"props":524,"children":526},{"id":525},"analyse-du-tradeoff",[527],{"type":37,"value":528},"Analyse du Tradeoff",{"type":32,"tag":33,"props":530,"children":531},{},[532],{"type":37,"value":533},"Le coût de migration se justifie dans ce scénario : trafic élevé + besoin de personnalisation. Sur un site de voyage (120 k sessions quotidiennes), le passage à Hydrogen a augmenté le taux de conversion de 2,1 % à 2,6 %. La raison : le LCP est passé de 2,8 s à 1,4 s, le taux de rebond a baissé. Le coût de migration de 20 jours a atteint son ROI en 4 mois.",{"type":32,"tag":33,"props":535,"children":536},{},[537],{"type":37,"value":538},"Scénario où cela ne se justifie pas : trafic faible + catalogue qui change peu. Un site B2B de pièces industrielles (800 sessions quotidiennes) n'a pas pu amortir le coût de migration en 14 mois, car il n'y avait pas d'augmentation du trafic — c'était juste un changement de stack de développement.",{"type":32,"tag":40,"props":540,"children":542},{"id":541},"coût-runtime-hébergement-quota-api",[543],{"type":37,"value":544},"Coût Runtime : Hébergement + Quota API",{"type":32,"tag":33,"props":546,"children":547},{},[548],{"type":37,"value":549},"Notre cinquième métrique : coûts d'infrastructure et d'utilisation de l'API. Hydrogen s'exécute sur Oxygen ou un runtime edge auto-hébergé, Liquid sur les serveurs Shopify.",{"type":32,"tag":33,"props":551,"children":552},{},[553],{"type":32,"tag":55,"props":554,"children":555},{},[556],{"type":37,"value":557},"Tarification Oxygen (Shopify Plus) :",{"type":32,"tag":61,"props":559,"children":560},{},[561,566],{"type":32,"tag":65,"props":562,"children":563},{},[564],{"type":37,"value":565},"Inclus : 1 M de requêtes\u002Fmois",{"type":32,"tag":65,"props":567,"children":568},{},[569],{"type":37,"value":570},"Au-delà : 0,50 $\u002F10 k requêtes",{"type":32,"tag":33,"props":572,"children":573},{},[574],{"type":32,"tag":55,"props":575,"children":576},{},[577],{"type":37,"value":578},"Quota API Storefront :",{"type":32,"tag":61,"props":580,"children":581},{},[582,587],{"type":32,"tag":65,"props":583,"children":584},{},[585],{"type":37,"value":586},"Hydrogen : tout passe par l'API Storefront (le coût des requêtes augmente)",{"type":32,"tag":65,"props":588,"children":589},{},[590],{"type":37,"value":591},"Liquid : rendu côté serveur, nombre de requêtes API plus faible",{"type":32,"tag":33,"props":593,"children":594},{},[595],{"type":37,"value":596},"Sur un site de mode (200 k sessions mensuelles) :",{"type":32,"tag":61,"props":598,"children":599},{},[600,605],{"type":32,"tag":65,"props":601,"children":602},{},[603],{"type":37,"value":604},"Liquid : 0 coût d'hébergement supplémentaire (inclus dans Shopify)",{"type":32,"tag":65,"props":606,"children":607},{},[608],{"type":37,"value":609},"Hydrogen : 120 $\u002Fmois (2,4 M requêtes, 1,4 M en excédent)",{"type":32,"tag":33,"props":611,"children":612},{},[613],{"type":37,"value":614},"Le coût des requêtes API sur Hydrogen demande de l'attention. Chaque route SSR envoie une requête à l'API Storefront. Sans stratégie de cache agressive, vous pouvez dépasser votre quota. Sur nos projets, nous utilisons le pattern stale-while-revalidate :",{"type":32,"tag":616,"props":617,"children":621},"pre",{"className":618,"code":619,"language":620,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Exemple de route loader Hydrogen\nexport async function loader({context}: LoaderFunctionArgs) {\n  const {storefront} = context;\n  \n  return defer({\n    products: storefront.query(PRODUCTS_QUERY, {\n      cache: storefront.CacheCustom({\n        mode: 'public',\n        maxAge: 3600,\n        staleWhileRevalidate: 86400, \u002F\u002F Accepter le contenu périmé pendant 24h\n      }),\n    }),\n  });\n}\n","typescript",[622],{"type":32,"tag":271,"props":623,"children":624},{"__ignoreMap":16},[625,637,695,730,739,758,787,805,825,842,866,875,884,893],{"type":32,"tag":626,"props":627,"children":630},"span",{"class":628,"line":629},"line",1,[631],{"type":32,"tag":626,"props":632,"children":634},{"style":633},"--shiki-default:#6A737D",[635],{"type":37,"value":636},"\u002F\u002F Exemple de route loader Hydrogen\n",{"type":32,"tag":626,"props":638,"children":640},{"class":628,"line":639},2,[641,647,652,657,663,669,675,680,685,690],{"type":32,"tag":626,"props":642,"children":644},{"style":643},"--shiki-default:#F97583",[645],{"type":37,"value":646},"export",{"type":32,"tag":626,"props":648,"children":649},{"style":643},[650],{"type":37,"value":651}," async",{"type":32,"tag":626,"props":653,"children":654},{"style":643},[655],{"type":37,"value":656}," function",{"type":32,"tag":626,"props":658,"children":660},{"style":659},"--shiki-default:#B392F0",[661],{"type":37,"value":662}," loader",{"type":32,"tag":626,"props":664,"children":666},{"style":665},"--shiki-default:#E1E4E8",[667],{"type":37,"value":668},"({",{"type":32,"tag":626,"props":670,"children":672},{"style":671},"--shiki-default:#FFAB70",[673],{"type":37,"value":674},"context",{"type":32,"tag":626,"props":676,"children":677},{"style":665},[678],{"type":37,"value":679},"}",{"type":32,"tag":626,"props":681,"children":682},{"style":643},[683],{"type":37,"value":684},":",{"type":32,"tag":626,"props":686,"children":687},{"style":659},[688],{"type":37,"value":689}," LoaderFunctionArgs",{"type":32,"tag":626,"props":691,"children":692},{"style":665},[693],{"type":37,"value":694},") {\n",{"type":32,"tag":626,"props":696,"children":698},{"class":628,"line":697},3,[699,704,709,715,720,725],{"type":32,"tag":626,"props":700,"children":701},{"style":643},[702],{"type":37,"value":703},"  const",{"type":32,"tag":626,"props":705,"children":706},{"style":665},[707],{"type":37,"value":708}," {",{"type":32,"tag":626,"props":710,"children":712},{"style":711},"--shiki-default:#79B8FF",[713],{"type":37,"value":714},"storefront",{"type":32,"tag":626,"props":716,"children":717},{"style":665},[718],{"type":37,"value":719},"} ",{"type":32,"tag":626,"props":721,"children":722},{"style":643},[723],{"type":37,"value":724},"=",{"type":32,"tag":626,"props":726,"children":727},{"style":665},[728],{"type":37,"value":729}," context;\n",{"type":32,"tag":626,"props":731,"children":733},{"class":628,"line":732},4,[734],{"type":32,"tag":626,"props":735,"children":736},{"style":665},[737],{"type":37,"value":738},"  \n",{"type":32,"tag":626,"props":740,"children":742},{"class":628,"line":741},5,[743,748,753],{"type":32,"tag":626,"props":744,"children":745},{"style":643},[746],{"type":37,"value":747},"  return",{"type":32,"tag":626,"props":749,"children":750},{"style":659},[751],{"type":37,"value":752}," defer",{"type":32,"tag":626,"props":754,"children":755},{"style":665},[756],{"type":37,"value":757},"({\n",{"type":32,"tag":626,"props":759,"children":761},{"class":628,"line":760},6,[762,767,772,777,782],{"type":32,"tag":626,"props":763,"children":764},{"style":665},[765],{"type":37,"value":766},"    products: storefront.",{"type":32,"tag":626,"props":768,"children":769},{"style":659},[770],{"type":37,"value":771},"query",{"type":32,"tag":626,"props":773,"children":774},{"style":665},[775],{"type":37,"value":776},"(",{"type":32,"tag":626,"props":778,"children":779},{"style":711},[780],{"type":37,"value":781},"PRODUCTS_QUERY",{"type":32,"tag":626,"props":783,"children":784},{"style":665},[785],{"type":37,"value":786},", {\n",{"type":32,"tag":626,"props":788,"children":790},{"class":628,"line":789},7,[791,796,801],{"type":32,"tag":626,"props":792,"children":793},{"style":665},[794],{"type":37,"value":795},"      cache: storefront.",{"type":32,"tag":626,"props":797,"children":798},{"style":659},[799],{"type":37,"value":800},"CacheCustom",{"type":32,"tag":626,"props":802,"children":803},{"style":665},[804],{"type":37,"value":757},{"type":32,"tag":626,"props":806,"children":808},{"class":628,"line":807},8,[809,814,820],{"type":32,"tag":626,"props":810,"children":811},{"style":665},[812],{"type":37,"value":813},"        mode: ",{"type":32,"tag":626,"props":815,"children":817},{"style":816},"--shiki-default:#9ECBFF",[818],{"type":37,"value":819},"'public'",{"type":32,"tag":626,"props":821,"children":822},{"style":665},[823],{"type":37,"value":824},",\n",{"type":32,"tag":626,"props":826,"children":827},{"class":628,"line":26},[828,833,838],{"type":32,"tag":626,"props":829,"children":830},{"style":665},[831],{"type":37,"value":832},"        maxAge: ",{"type":32,"tag":626,"props":834,"children":835},{"style":711},[836],{"type":37,"value":837},"3600",{"type":32,"tag":626,"props":839,"children":840},{"style":665},[841],{"type":37,"value":824},{"type":32,"tag":626,"props":843,"children":845},{"class":628,"line":844},10,[846,851,856,861],{"type":32,"tag":626,"props":847,"children":848},{"style":665},[849],{"type":37,"value":850},"        staleWhileRevalidate: ",{"type":32,"tag":626,"props":852,"children":853},{"style":711},[854],{"type":37,"value":855},"86400",{"type":32,"tag":626,"props":857,"children":858},{"style":665},[859],{"type":37,"value":860},", ",{"type":32,"tag":626,"props":862,"children":863},{"style":633},[864],{"type":37,"value":865},"\u002F\u002F Accepter le contenu périmé pendant 24h\n",{"type":32,"tag":626,"props":867,"children":869},{"class":628,"line":868},11,[870],{"type":32,"tag":626,"props":871,"children":872},{"style":665},[873],{"type":37,"value":874},"      }),\n",{"type":32,"tag":626,"props":876,"children":878},{"class":628,"line":877},12,[879],{"type":32,"tag":626,"props":880,"children":881},{"style":665},[882],{"type":37,"value":883},"    }),\n",{"type":32,"tag":626,"props":885,"children":887},{"class":628,"line":886},13,[888],{"type":32,"tag":626,"props":889,"children":890},{"style":665},[891],{"type":37,"value":892},"  });\n",{"type":32,"tag":626,"props":894,"children":896},{"class":628,"line":895},14,[897],{"type":32,"tag":626,"props":898,"children":899},{"style":665},[900],{"type":37,"value":901},"}\n",{"type":32,"tag":33,"props":903,"children":904},{},[905],{"type":37,"value":906},"Avec ce pattern, nous avons réduit le nombre de requêtes API de 40 %. Mais il existe un risque de contenu périmé — les changements de prix ou de stock peuvent s'afficher avec un délai allant jusqu'à 1 heure. Tradeoff : coût vs fraîcheur des données.",{"type":32,"tag":40,"props":908,"children":910},{"id":909},"sur-quels-facteurs-nous-avons-basé-notre-décision",[911],{"type":37,"value":912},"Sur Quels Facteurs Nous Avons Basé Notre Décision",{"type":32,"tag":33,"props":914,"children":915},{},[916],{"type":37,"value":917},"Il n'y a pas de sixième métrique — cette section est notre matrice de décision. Nous avons choisi Hydrogen pour ces projets :",{"type":32,"tag":919,"props":920,"children":921},"ol",{},[922,932,942,952],{"type":32,"tag":65,"props":923,"children":924},{},[925,930],{"type":32,"tag":55,"props":926,"children":927},{},[928],{"type":37,"value":929},"50 k+ sessions quotidiennes",{"type":37,"value":931}," — L'amélioration du LCP impacte directement la conversion",{"type":32,"tag":65,"props":933,"children":934},{},[935,940],{"type":32,"tag":55,"props":936,"children":937},{},[938],{"type":37,"value":939},"Exigence de personnalisation élevée",{"type":37,"value":941}," — Le SSR edge rend le contenu dynamique rapidement",{"type":32,"tag":65,"props":943,"children":944},{},[945,950],{"type":32,"tag":55,"props":946,"children":947},{},[948],{"type":37,"value":949},"L'équipe dev maîtrise React",{"type":37,"value":951}," — La migration est fluide, la vélocité augmente",{"type":32,"tag":65,"props":953,"children":954},{},[955,960],{"type":32,"tag":55,"props":956,"children":957},{},[958],{"type":37,"value":959},"Shopify Plus",{"type":37,"value":961}," — Oxygen est inclus, pas de coût runtime supplémentaire",{"type":32,"tag":33,"props":963,"children":964},{},[965],{"type":37,"value":966},"Nous avons gardé Liquid sur ces projets :",{"type":32,"tag":919,"props":968,"children":969},{},[970,980,990,1000],{"type":32,"tag":65,"props":971,"children":972},{},[973,978],{"type":32,"tag":55,"props":974,"children":975},{},[976],{"type":37,"value":977},"Moins de 5 k sessions quotidiennes",{"type":37,"value":979}," — Le coût de migration n'est pas justifié",{"type":32,"tag":65,"props":981,"children":982},{},[983,988],{"type":32,"tag":55,"props":984,"children":985},{},[986],{"type":37,"value":987},"Catalogue statique",{"type":37,"value":989}," — Pas de mises à jour fréquentes, Liquid template suffit",{"type":32,"tag":65,"props":991,"children":992},{},[993,998],{"type":32,"tag":55,"props":994,"children":995},{},[996],{"type":37,"value":997},"Petite équipe dev",{"type":37,"value":999}," — Pas de maîtrise de React, coût d'apprentissage élevé",{"type":32,"tag":65,"props":1001,"children":1002},{},[1003,1008],{"type":32,"tag":55,"props":1004,"children":1005},{},[1006],{"type":37,"value":1007},"Budget limité",{"type":37,"value":1009}," — Le coût de migration + hébergement ne peut pas être absorbé",{"type":32,"tag":33,"props":1011,"children":1012},{},[1013],{"type":37,"value":1014},"Exemple concret : Une chaîne de supermarchés (80 k sessions quotidiennes, 4 000 SKU) a migré vers Hydrogen. Le TTFB a baissé de 480 ms à 190 ms, le LCP de 3,2 s à 1,6 s. Le taux de conversion a augmenté de 1,8 % à 2,3 % (+27 %). La migration a pris 35 jours développeur et a atteint son ROI en 6 mois. Sur le même période, un projet d'hôtel de charme (1 200 sessions quotidiennes) a conservé Liquid — le trafic était trop faible, le LCP déjà acceptable à 2,1 s, la migration ne pouvait pas être justifiée.",{"type":32,"tag":40,"props":1016,"children":1018},{"id":1017},"prochaine-étape-approche-hybride",[1019],{"type":37,"value":1020},"Prochaine Étape : Approche Hybride",{"type":32,"tag":33,"props":1022,"children":1023},{},[1024,1026,1035],{"type":37,"value":1025},"Le choix Hydrogen\u002FLiquid n'est pas binaire. Dans une architecture ",{"type":32,"tag":1027,"props":1028,"children":1032},"a",{"href":1029,"rel":1030},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[1031],"nofollow",[1033],{"type":37,"value":1034},"Headless Commerce",{"type":37,"value":1036},", vous pouvez effectuer le rendu SSR edge pour certaines routes avec Hydrogen et laisser les pages moins critiques en Liquid. Par exemple, PDP + PLP en Hydrogen, pages blog + info en Liquid. Ce setup hybride réduit le risque de migration et contrôle les coûts.",{"type":32,"tag":33,"props":1038,"children":1039},{},[1040],{"type":37,"value":1041},"Notre critère de préférence : les chiffres parlent — TTFB, taux de conversion, vélocité développeur. Si votre volume de sessions est élevé et que Core Web Vitals est critique, Hydrogen rapporte du gain net. Si votre trafic est faible et que votre équipe dev ne maîtrise pas React, Liquid est le choix pragmatique. La décision doit reposer sur votre propre tableau de bord de métriques.",{"type":32,"tag":1043,"props":1044,"children":1045},"style",{},[1046],{"type":37,"value":1047},"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":697,"depth":697,"links":1049},[1050,1053,1054,1055,1058,1059,1060],{"id":42,"depth":639,"text":45,"children":1051},[1052],{"id":203,"depth":697,"text":206},{"id":214,"depth":639,"text":217},{"id":294,"depth":639,"text":297},{"id":419,"depth":639,"text":422,"children":1056},[1057],{"id":525,"depth":697,"text":528},{"id":541,"depth":639,"text":544},{"id":909,"depth":639,"text":912},{"id":1017,"depth":639,"text":1020},"markdown","content:fr:tech:shopify-hydrogen-vs-liquid-metriques-de-decision.md","content","fr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision.md","fr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-metriques-de-decision","md",1782079493535]