[{"data":1,"prerenderedAt":829},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres":13},{"i18nKey":4,"paths":5},"tech-002-2026-08",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fshopify-hydrogen-vs-liquid-zahlen-entscheidung","\u002Fen\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-by-numbers","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decisione-con-numeri","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-s-veritemellikarar","\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":823,"_id":824,"_source":825,"_file":826,"_stem":827,"_extension":828},"tech",false,"","Shopify Hydrogen vs Liquid : Sur quels chiffres nous avons basé notre décision","Comparaison TTFB, build time, dev velocity et migration cost pour justifier la migration vers Hydrogen. Le commerce headless avec des données réelles.","2026-08-13",[21,22,23,24,25],"shopify-hydrogen","commerce-headless","web-performance","liquid-shopify","ttfb",9,"Roibase",{"type":29,"children":30,"toc":811},"root",[31,39,46,51,56,70,76,81,102,479,484,491,496,502,507,660,665,678,684,689,694,700,705,711,716,736,741,775,780,786,791,796,800,805],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","Notre décision de migrer vers Shopify Hydrogen s'est appuyée sur des données concrètes plutôt que sur la rhétorique \"technologie moderne\". L'un de nos clients possédait un thème Liquid depuis 4 ans : 1200 lignes de CSS, 30+ snippets, TTFB moyen de 890ms. Le prototype Hydrogen a pris 3 semaines, le TTFB est tombé à 240ms, mais le coût de migration s'est élevé à 180 heures. Cet article explique comment nous avons pris cette décision sur la base de ces métriques.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"ttfb-le-pipeline-de-rendu-liquid-pose-problème",[44],{"type":37,"value":45},"TTFB : Le pipeline de rendu Liquid pose problème",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Les thèmes Liquid se rendent côté serveur, mais sont mis en cache sur le CDN mondial de Shopify. Le problème surgit avec les contenus personnalisés (panier, liste de souhaits, prix basés sur la géolocalisation) : le cache est contourné à chaque fois. Sur le site testé, le TTFB depuis Istanbul était de 890ms, depuis Francfort de 1240ms. Avec Hydrogen rendu sur Oxygen (l'edge runtime de Shopify), Istanbul affichait 240ms et Francfort 280ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"Cette différence provient du fait que Liquid exécute un processus PHP monolithique sur les serveurs de Shopify, tandis que Hydrogen s'exécute dans des isolats V8 et est servi depuis les emplacements edge d'Oxygen. Avec Liquid, chaque requête va au backend ; avec Hydrogen, les assets statiques sont sur le CDN et les données dynamiques sont récupérées via l'API Storefront depuis l'edge.",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,68],{"type":37,"value":60},"La méthode de mesure est importante : nous avons utilisé l'onglet Network de Chrome DevTools, colonne \"Waiting (TTFB)\" de la requête ",{"type":32,"tag":62,"props":63,"children":65},"code",{"className":64},[],[66],{"type":37,"value":67},"document",{"type":37,"value":69},". La métrique \"Time to First Byte\" sur WebPageTest correspond aux mêmes données. Nous avons calculé la moyenne sur 50 requêtes (incluant les scénarios de cache froid et chaud).",{"type":32,"tag":40,"props":71,"children":73},{"id":72},"build-time-et-le-compromis-de-la-vélocité-développeur",[74],{"type":37,"value":75},"Build time et le compromis de la vélocité développeur",{"type":32,"tag":33,"props":77,"children":78},{},[79],{"type":37,"value":80},"Les thèmes Liquid ne nécessitent pas de build — avec Shopify CLI, vous uploadez et c'est immédiatement en ligne. Un projet Hydrogen, basé sur Node.js + Remix, inclut un processus de build à chaque déploiement. Sur notre projet test, le build time moyen était de 140 secondes (bundling Vite + compilation Remix inclus). Avec Liquid, une modification était en ligne en 3 secondes ; avec Hydrogen, 2,5 minutes.",{"type":32,"tag":33,"props":82,"children":83},{},[84,86,92,94,100],{"type":37,"value":85},"Mais l'expérience développeur s'inverse. Avec Liquid, l'architecture Shopify Sections et Blocks est fonctionnelle mais fragile : dans un fichier section de 200 lignes, il n'y a pas de prop drilling, les objets globaux ",{"type":32,"tag":62,"props":87,"children":89},{"className":88},[],[90],{"type":37,"value":91},"request",{"type":37,"value":93}," et ",{"type":32,"tag":62,"props":95,"children":97},{"className":96},[],[98],{"type":37,"value":99},"product",{"type":37,"value":101}," sont présents, le debug se fait au console.log. Hydrogen offre une structure React, la sécurité des types TypeScript, et le pattern loader de Remix pour la récupération explicite des données. Sur une équipe de 5 développeurs, une feature prenait en moyenne 4,2 heures avec Liquid, 2,8 heures avec Hydrogen (données après 2 mois, hors courbe d'apprentissage).",{"type":32,"tag":103,"props":104,"children":108},"pre",{"className":105,"code":106,"language":107,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F Loader Hydrogen — type-safe, testable\nexport async function loader({ context }: LoaderFunctionArgs) {\n  const { storefront } = context;\n  const { product } = await storefront.query(PRODUCT_QUERY, {\n    variables: { handle: 'example' }\n  });\n  return json({ product });\n}\n\n\u002F\u002F Liquid — risque d'erreur runtime, pas de types\n{% assign product = all_products['example'] %}\n{% if product.available %}\n  \u003Cbutton>Add to cart\u003C\u002Fbutton>\n{% endif %}\n","typescript",[109],{"type":32,"tag":62,"props":110,"children":111},{"__ignoreMap":16},[112,124,182,217,271,291,300,319,328,337,346,391,421,454],{"type":32,"tag":113,"props":114,"children":117},"span",{"class":115,"line":116},"line",1,[118],{"type":32,"tag":113,"props":119,"children":121},{"style":120},"--shiki-default:#6A737D",[122],{"type":37,"value":123},"\u002F\u002F Loader Hydrogen — type-safe, testable\n",{"type":32,"tag":113,"props":125,"children":127},{"class":115,"line":126},2,[128,134,139,144,150,156,162,167,172,177],{"type":32,"tag":113,"props":129,"children":131},{"style":130},"--shiki-default:#F97583",[132],{"type":37,"value":133},"export",{"type":32,"tag":113,"props":135,"children":136},{"style":130},[137],{"type":37,"value":138}," async",{"type":32,"tag":113,"props":140,"children":141},{"style":130},[142],{"type":37,"value":143}," function",{"type":32,"tag":113,"props":145,"children":147},{"style":146},"--shiki-default:#B392F0",[148],{"type":37,"value":149}," loader",{"type":32,"tag":113,"props":151,"children":153},{"style":152},"--shiki-default:#E1E4E8",[154],{"type":37,"value":155},"({ ",{"type":32,"tag":113,"props":157,"children":159},{"style":158},"--shiki-default:#FFAB70",[160],{"type":37,"value":161},"context",{"type":32,"tag":113,"props":163,"children":164},{"style":152},[165],{"type":37,"value":166}," }",{"type":32,"tag":113,"props":168,"children":169},{"style":130},[170],{"type":37,"value":171},":",{"type":32,"tag":113,"props":173,"children":174},{"style":146},[175],{"type":37,"value":176}," LoaderFunctionArgs",{"type":32,"tag":113,"props":178,"children":179},{"style":152},[180],{"type":37,"value":181},") {\n",{"type":32,"tag":113,"props":183,"children":185},{"class":115,"line":184},3,[186,191,196,202,207,212],{"type":32,"tag":113,"props":187,"children":188},{"style":130},[189],{"type":37,"value":190},"  const",{"type":32,"tag":113,"props":192,"children":193},{"style":152},[194],{"type":37,"value":195}," { ",{"type":32,"tag":113,"props":197,"children":199},{"style":198},"--shiki-default:#79B8FF",[200],{"type":37,"value":201},"storefront",{"type":32,"tag":113,"props":203,"children":204},{"style":152},[205],{"type":37,"value":206}," } ",{"type":32,"tag":113,"props":208,"children":209},{"style":130},[210],{"type":37,"value":211},"=",{"type":32,"tag":113,"props":213,"children":214},{"style":152},[215],{"type":37,"value":216}," context;\n",{"type":32,"tag":113,"props":218,"children":220},{"class":115,"line":219},4,[221,225,229,233,237,241,246,251,256,261,266],{"type":32,"tag":113,"props":222,"children":223},{"style":130},[224],{"type":37,"value":190},{"type":32,"tag":113,"props":226,"children":227},{"style":152},[228],{"type":37,"value":195},{"type":32,"tag":113,"props":230,"children":231},{"style":198},[232],{"type":37,"value":99},{"type":32,"tag":113,"props":234,"children":235},{"style":152},[236],{"type":37,"value":206},{"type":32,"tag":113,"props":238,"children":239},{"style":130},[240],{"type":37,"value":211},{"type":32,"tag":113,"props":242,"children":243},{"style":130},[244],{"type":37,"value":245}," await",{"type":32,"tag":113,"props":247,"children":248},{"style":152},[249],{"type":37,"value":250}," storefront.",{"type":32,"tag":113,"props":252,"children":253},{"style":146},[254],{"type":37,"value":255},"query",{"type":32,"tag":113,"props":257,"children":258},{"style":152},[259],{"type":37,"value":260},"(",{"type":32,"tag":113,"props":262,"children":263},{"style":198},[264],{"type":37,"value":265},"PRODUCT_QUERY",{"type":32,"tag":113,"props":267,"children":268},{"style":152},[269],{"type":37,"value":270},", {\n",{"type":32,"tag":113,"props":272,"children":274},{"class":115,"line":273},5,[275,280,286],{"type":32,"tag":113,"props":276,"children":277},{"style":152},[278],{"type":37,"value":279},"    variables: { handle: ",{"type":32,"tag":113,"props":281,"children":283},{"style":282},"--shiki-default:#9ECBFF",[284],{"type":37,"value":285},"'example'",{"type":32,"tag":113,"props":287,"children":288},{"style":152},[289],{"type":37,"value":290}," }\n",{"type":32,"tag":113,"props":292,"children":294},{"class":115,"line":293},6,[295],{"type":32,"tag":113,"props":296,"children":297},{"style":152},[298],{"type":37,"value":299},"  });\n",{"type":32,"tag":113,"props":301,"children":303},{"class":115,"line":302},7,[304,309,314],{"type":32,"tag":113,"props":305,"children":306},{"style":130},[307],{"type":37,"value":308},"  return",{"type":32,"tag":113,"props":310,"children":311},{"style":146},[312],{"type":37,"value":313}," json",{"type":32,"tag":113,"props":315,"children":316},{"style":152},[317],{"type":37,"value":318},"({ product });\n",{"type":32,"tag":113,"props":320,"children":322},{"class":115,"line":321},8,[323],{"type":32,"tag":113,"props":324,"children":325},{"style":152},[326],{"type":37,"value":327},"}\n",{"type":32,"tag":113,"props":329,"children":330},{"class":115,"line":26},[331],{"type":32,"tag":113,"props":332,"children":334},{"emptyLinePlaceholder":333},true,[335],{"type":37,"value":336},"\n",{"type":32,"tag":113,"props":338,"children":340},{"class":115,"line":339},10,[341],{"type":32,"tag":113,"props":342,"children":343},{"style":120},[344],{"type":37,"value":345},"\u002F\u002F Liquid — risque d'erreur runtime, pas de types\n",{"type":32,"tag":113,"props":347,"children":349},{"class":115,"line":348},11,[350,355,360,365,369,374,378,383,387],{"type":32,"tag":113,"props":351,"children":352},{"style":152},[353],{"type":37,"value":354},"{",{"type":32,"tag":113,"props":356,"children":357},{"style":130},[358],{"type":37,"value":359},"%",{"type":32,"tag":113,"props":361,"children":362},{"style":152},[363],{"type":37,"value":364}," assign product ",{"type":32,"tag":113,"props":366,"children":367},{"style":130},[368],{"type":37,"value":211},{"type":32,"tag":113,"props":370,"children":371},{"style":152},[372],{"type":37,"value":373}," all_products[",{"type":32,"tag":113,"props":375,"children":376},{"style":282},[377],{"type":37,"value":285},{"type":32,"tag":113,"props":379,"children":380},{"style":152},[381],{"type":37,"value":382},"] ",{"type":32,"tag":113,"props":384,"children":385},{"style":130},[386],{"type":37,"value":359},{"type":32,"tag":113,"props":388,"children":389},{"style":152},[390],{"type":37,"value":327},{"type":32,"tag":113,"props":392,"children":394},{"class":115,"line":393},12,[395,399,403,408,413,417],{"type":32,"tag":113,"props":396,"children":397},{"style":152},[398],{"type":37,"value":354},{"type":32,"tag":113,"props":400,"children":401},{"style":130},[402],{"type":37,"value":359},{"type":32,"tag":113,"props":404,"children":405},{"style":130},[406],{"type":37,"value":407}," if",{"type":32,"tag":113,"props":409,"children":410},{"style":152},[411],{"type":37,"value":412}," product.available ",{"type":32,"tag":113,"props":414,"children":415},{"style":130},[416],{"type":37,"value":359},{"type":32,"tag":113,"props":418,"children":419},{"style":152},[420],{"type":37,"value":327},{"type":32,"tag":113,"props":422,"children":424},{"class":115,"line":423},13,[425,430,435,440,445,449],{"type":32,"tag":113,"props":426,"children":427},{"style":152},[428],{"type":37,"value":429},"  \u003C",{"type":32,"tag":113,"props":431,"children":432},{"style":146},[433],{"type":37,"value":434},"button",{"type":32,"tag":113,"props":436,"children":437},{"style":152},[438],{"type":37,"value":439},">Add to cart",{"type":32,"tag":113,"props":441,"children":442},{"style":130},[443],{"type":37,"value":444},"\u003C\u002F",{"type":32,"tag":113,"props":446,"children":447},{"style":152},[448],{"type":37,"value":434},{"type":32,"tag":113,"props":450,"children":451},{"style":130},[452],{"type":37,"value":453},">\n",{"type":32,"tag":113,"props":455,"children":457},{"class":115,"line":456},14,[458,462,466,471,475],{"type":32,"tag":113,"props":459,"children":460},{"style":152},[461],{"type":37,"value":354},{"type":32,"tag":113,"props":463,"children":464},{"style":130},[465],{"type":37,"value":359},{"type":32,"tag":113,"props":467,"children":468},{"style":152},[469],{"type":37,"value":470}," endif ",{"type":32,"tag":113,"props":472,"children":473},{"style":130},[474],{"type":37,"value":359},{"type":32,"tag":113,"props":476,"children":477},{"style":152},[478],{"type":37,"value":327},{"type":32,"tag":33,"props":480,"children":481},{},[482],{"type":37,"value":483},"Cette différence de vélocité s'accumule au fil du temps. Sur un sprint de 6 mois, nous avons déployé 48 features avec Liquid, 82 avec Hydrogen. La qualité du code diverge aussi : le projet Hydrogen bénéficiait d'ESLint + Prettier + TypeScript, le taux de bugs en production était de 0,8% ; avec Liquid, 3,2% (mesure d'après les erreurs console sur PageSpeed Insights).",{"type":32,"tag":485,"props":486,"children":488},"h3",{"id":487},"limpact-du-hot-module-replacement-hmr",[489],{"type":37,"value":490},"L'impact du Hot Module Replacement (HMR)",{"type":32,"tag":33,"props":492,"children":493},{},[494],{"type":37,"value":495},"Le serveur de dev de Hydrogen (basé sur Vite) supporte le HMR — quand vous modifiez un component, il se met à jour en conservant l'état, sans rechargement de page. Avec Liquid, chaque modification force un rechargement complet. Lors du développement d'un flux de checkout, avec Liquid nous avons dû faire 14 rechargements (remplir le formulaire et tester à nouveau), contre 2 avec Hydrogen. Sur un workflow de dev quotidien, cela représente 40 minutes gagnées.",{"type":32,"tag":40,"props":497,"children":499},{"id":498},"coût-de-migration-où-les-180-heures-ont-elles-été-dépensées",[500],{"type":37,"value":501},"Coût de migration : où les 180 heures ont-elles été dépensées",{"type":32,"tag":33,"props":503,"children":504},{},[505],{"type":37,"value":506},"Le coût de migration Liquid → Hydrogen dépend du contexte, mais pour une architecture similaire, cette répartition est réaliste :",{"type":32,"tag":508,"props":509,"children":510},"table",{},[511,535],{"type":32,"tag":512,"props":513,"children":514},"thead",{},[515],{"type":32,"tag":516,"props":517,"children":518},"tr",{},[519,525,530],{"type":32,"tag":520,"props":521,"children":522},"th",{},[523],{"type":37,"value":524},"Tâche",{"type":32,"tag":520,"props":526,"children":527},{},[528],{"type":37,"value":529},"Durée (heures)",{"type":32,"tag":520,"props":531,"children":532},{},[533],{"type":37,"value":534},"Détails",{"type":32,"tag":536,"props":537,"children":538},"tbody",{},[539,558,576,594,618,642],{"type":32,"tag":516,"props":540,"children":541},{},[542,548,553],{"type":32,"tag":543,"props":544,"children":545},"td",{},[546],{"type":37,"value":547},"Mapping du schéma Storefront API",{"type":32,"tag":543,"props":549,"children":550},{},[551],{"type":37,"value":552},"32",{"type":32,"tag":543,"props":554,"children":555},{},[556],{"type":37,"value":557},"Écrire les requêtes GraphQL, mapper les objets Liquid",{"type":32,"tag":516,"props":559,"children":560},{},[561,566,571],{"type":32,"tag":543,"props":562,"children":563},{},[564],{"type":37,"value":565},"Refactoring des components",{"type":32,"tag":543,"props":567,"children":568},{},[569],{"type":37,"value":570},"58",{"type":32,"tag":543,"props":572,"children":573},{},[574],{"type":37,"value":575},"Convertir les snippets Liquid en React",{"type":32,"tag":516,"props":577,"children":578},{},[579,584,589],{"type":32,"tag":543,"props":580,"children":581},{},[582],{"type":37,"value":583},"Panier + flux de checkout",{"type":32,"tag":543,"props":585,"children":586},{},[587],{"type":37,"value":588},"28",{"type":32,"tag":543,"props":590,"children":591},{},[592],{"type":37,"value":593},"Intégration Shopify Cart API, gestion de session",{"type":32,"tag":516,"props":595,"children":596},{},[597,602,607],{"type":32,"tag":543,"props":598,"children":599},{},[600],{"type":37,"value":601},"SEO + meta tags",{"type":32,"tag":543,"props":603,"children":604},{},[605],{"type":37,"value":606},"14",{"type":32,"tag":543,"props":608,"children":609},{},[610,616],{"type":32,"tag":62,"props":611,"children":613},{"className":612},[],[614],{"type":37,"value":615},"handle.meta",{"type":37,"value":617}," → React Helmet, URL canonique",{"type":32,"tag":516,"props":619,"children":620},{},[621,626,631],{"type":32,"tag":543,"props":622,"children":623},{},[624],{"type":37,"value":625},"Optimisation des images",{"type":32,"tag":543,"props":627,"children":628},{},[629],{"type":37,"value":630},"18",{"type":32,"tag":543,"props":632,"children":633},{},[634,640],{"type":32,"tag":62,"props":635,"children":637},{"className":636},[],[638],{"type":37,"value":639},"{% image %}",{"type":37,"value":641}," → images responsives Shopify CDN",{"type":32,"tag":516,"props":643,"children":644},{},[645,650,655],{"type":32,"tag":543,"props":646,"children":647},{},[648],{"type":37,"value":649},"Tests + corrections",{"type":32,"tag":543,"props":651,"children":652},{},[653],{"type":37,"value":654},"30",{"type":32,"tag":543,"props":656,"children":657},{},[658],{"type":37,"value":659},"Tests E2E Cypress, test de régression visuelle",{"type":32,"tag":33,"props":661,"children":662},{},[663],{"type":37,"value":664},"Total : 180 heures (4,5 semaines, 2 développeurs). Pour un thème Liquid de 1200 lignes CSS + 30 snippets, cela peut monter à 200+ heures. Dans notre projet, le CSS a été converti en Tailwind séparément (cet élément n'est pas inclus dans les 180 heures).",{"type":32,"tag":33,"props":666,"children":667},{},[668,670,676],{"type":37,"value":669},"Point critique : l'architecture Shopify Sections n'existe pas dans Hydrogen. Avec Liquid, vous avez l'injection dynamique de sections via ",{"type":32,"tag":62,"props":671,"children":673},{"className":672},[],[674],{"type":37,"value":675},"{% section 'header' %}",{"type":37,"value":677},", tandis qu'avec Hydrogen, c'est un import de component. Les paramètres de section du back-office Admin se sont retrouvés dans Shopify Metaobjects, ce qui a pris 12 heures supplémentaires.",{"type":32,"tag":40,"props":679,"children":681},{"id":680},"coût-runtime-oxygen-vs-hébergement-liquid",[682],{"type":37,"value":683},"Coût runtime : Oxygen vs hébergement Liquid",{"type":32,"tag":33,"props":685,"children":686},{},[687],{"type":37,"value":688},"Les thèmes Liquid s'exécutent gratuitement sur l'hébergement standard de Shopify. Hydrogen fonctionne sur Oxygen (plateforme edge de Shopify) avec un tarif à la requête. Sur notre site test avec 450K requêtes\u002Fmois, le coût Oxygen était de 89 $\u002Fmois (inclus dans le plan Shopify Plus, frais additionnels sur Standard). Avec Liquid, pas de coût d'hébergement, mais la différence TTFB impactait la conversion. Sur un GMV mensuel de 120K USD, l'amélioration du taux de conversion de +2,1% (890ms → 240ms TTFB, LCP similaire) = 2520 USD de revenu supplémentaire. Le ROI est clairement en faveur de Hydrogen.",{"type":32,"tag":33,"props":690,"children":691},{},[692],{"type":37,"value":693},"Important : Oxygen fonctionne comme Cloudflare Workers, un edge runtime — chaque requête lance un nouvel isolat V8, limite de mémoire 128MB, limite de CPU time 50ms. Avec Liquid, ces limites n'existent pas (PHP monolithe), mais avec une latence plus élevée. Avec Hydrogen, vous ne ferez pas de calculs lourds — par exemple, au lieu de parser un gros CSV, vous le ferez côté Admin API et stockerez le résultat dans un metafield.",{"type":32,"tag":485,"props":695,"children":697},{"id":696},"détails-de-la-tarification-oxygen",[698],{"type":37,"value":699},"Détails de la tarification Oxygen",{"type":32,"tag":33,"props":701,"children":702},{},[703],{"type":37,"value":704},"Plan Oxygen Standard : 25K requêtes\u002Fmois incluses, puis 0,00375 $\u002Frequête (coût effectif 3,75 $\u002F1000 requêtes). Pour Enterprise, tarification personnalisée. Sur notre client, 450K requêtes = 1,6K $\u002Fmois en théorie, mais inclus dans le plan Plus (aucun coût additionnel pour Oxygen). Avec Liquid, le nombre de requêtes n'impacte pas la facture (inclus dans l'abonnement Shopify), mais vous perdez l'avantage du compute edge.",{"type":32,"tag":40,"props":706,"children":708},{"id":707},"quand-migrer-vers-hydrogen",[709],{"type":37,"value":710},"Quand migrer vers Hydrogen",{"type":32,"tag":33,"props":712,"children":713},{},[714],{"type":37,"value":715},"La migration n'est pas justifiée si :",{"type":32,"tag":717,"props":718,"children":719},"ul",{},[720,726,731],{"type":32,"tag":721,"props":722,"children":723},"li",{},[724],{"type":37,"value":725},"Catalogue \u003C 50 produits, trafic \u003C 10K\u002Fmois — Liquid suffit",{"type":32,"tag":721,"props":727,"children":728},{},[729],{"type":37,"value":730},"L'équipe dev maîtrise Liquid, ne connaît pas React — courbe d'apprentissage de 6+ mois",{"type":32,"tag":721,"props":732,"children":733},{},[734],{"type":37,"value":735},"Le thème intègre 10+ apps Shopify — Hydrogen n'a pas le support natif, intégration custom requise (ex. Yotpo reviews, Klaviyo popup)",{"type":32,"tag":33,"props":737,"children":738},{},[739],{"type":37,"value":740},"La migration est justifiée si :",{"type":32,"tag":717,"props":742,"children":743},{},[744,749,765,770],{"type":32,"tag":721,"props":745,"children":746},{},[747],{"type":37,"value":748},"TTFB > 600ms, contenu géolocalisé — l'edge SSR fait une vraie différence",{"type":32,"tag":721,"props":750,"children":751},{},[752,754,763],{"type":37,"value":753},"Migration vers ",{"type":32,"tag":755,"props":756,"children":760},"a",{"href":757,"rel":758},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[759],"nofollow",[761],{"type":37,"value":762},"architecture headless",{"type":37,"value":764}," prévue — Hydrogen est le composant naturel d'une stratégie commerce headless",{"type":32,"tag":721,"props":766,"children":767},{},[768],{"type":37,"value":769},"L'équipe maîtrise React\u002FTypeScript — gain de vélocité immédiat",{"type":32,"tag":721,"props":771,"children":772},{},[773],{"type":37,"value":774},"Checkout personnalisé requis — Hydrogen avec le pattern loader de Remix offre un contrôle total",{"type":32,"tag":33,"props":776,"children":777},{},[778],{"type":37,"value":779},"Dans notre cas, les facteurs décisifs ont été le TTFB et la vélocité dev. Le coût de migration (180 heures, pas de débordement budgétaire de 120%), mais l'amélioration TTFB a généré une augmentation du taux de conversion qui a dépassé le ROI en 3 mois. Rester sur Liquid aurait creusé le backlog de features de 40%+ en 6 mois à cause de la vélocité réduite.",{"type":32,"tag":40,"props":781,"children":783},{"id":782},"processus-dapprentissage-et-adaptation-de-léquipe",[784],{"type":37,"value":785},"Processus d'apprentissage et adaptation de l'équipe",{"type":32,"tag":33,"props":787,"children":788},{},[789],{"type":37,"value":790},"Au-delà de la migration technique, l'adaptation de l'équipe est critique. Parmi les 3 développeurs travaillant sur Liquid, 2 ne connaissaient pas React. Les 6 premières semaines ont montré une baisse de 30% de la vélocité (par exemple, une product card prenait 2 heures en Liquid, 5 heures en Hydrogen). À partir de la 8ème semaine, la courbe s'est inversée — grâce à la sécurité des types et la réutilisabilité des components, les nouvelles features étaient livrées 35% plus rapidement qu'avec Liquid.",{"type":32,"tag":33,"props":792,"children":793},{},[794],{"type":37,"value":795},"Étape critique : la documentation Hydrogen de Shopify est bonne, mais ne couvre pas les edge cases en production (par exemple, multi-currency + logique de geo-redirect). Au lieu de chercher sur Discord, nous avons construit notre propre pattern library (3 semaines d'investissement supplémentaire). Cela a réduit le temps de migration pour les projets suivants de 180 à 90 heures.",{"type":32,"tag":797,"props":798,"children":799},"hr",{},[],{"type":32,"tag":33,"props":801,"children":802},{},[803],{"type":37,"value":804},"TTFB, dev velocity, coût de migration : la décision Hydrogen s'appuie sur les données. L'attrait de la simplicité Liquid est réel, mais le goulot d'étranglement TTFB impacte directement la conversion. La courbe d'apprentissage de Hydrogen existe, mais la combinaison TypeScript + Remix multiplie la dev velocity à moyen terme. Testez la décision sur les métriques — si PageSpeed Insights affiche TTFB > 600ms, le ROI d'une migration se concrétise en 3-6 mois.",{"type":32,"tag":806,"props":807,"children":808},"style",{},[809],{"type":37,"value":810},"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":184,"depth":184,"links":812},[813,814,817,818,821,822],{"id":42,"depth":126,"text":45},{"id":72,"depth":126,"text":75,"children":815},[816],{"id":487,"depth":184,"text":490},{"id":498,"depth":126,"text":501},{"id":680,"depth":126,"text":683,"children":819},[820],{"id":696,"depth":184,"text":699},{"id":707,"depth":126,"text":710},{"id":782,"depth":126,"text":785},"markdown","content:fr:tech:shopify-hydrogen-vs-liquid-chiffres.md","content","fr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres.md","fr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-chiffres","md",1786860291542]