[{"data":1,"prerenderedAt":2035},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fhydrogen-vs-liquid-shopify-decision-data":13},{"i18nKey":4,"paths":5},"tech-002-2026-07",{"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-metrics","\u002Fes\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeros-decision","\u002Ffr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-decision-metrics","\u002Fit\u002Ftech\u002Fshopify-hydrogen-vs-liquid-numeri-della-decisione","\u002Fru\u002Ftech\u002Fshopify-hydrogen-vs-liquid-vybor-po-dannym","\u002Ftr\u002Ftech\u002Fshopify-hydrogen-vs-liquid-karari-hangi-sayilarla-verdik",{"_path":14,"_dir":15,"_draft":16,"_partial":16,"_locale":17,"title":18,"description":19,"publishedAt":20,"modifiedAt":20,"category":15,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2029,"_id":2030,"_source":2031,"_file":2032,"_stem":2033,"_extension":2034},"\u002Ffr\u002Ftech\u002Fhydrogen-vs-liquid-shopify-decision-data","tech",false,"","Shopify Hydrogen vs Liquid : Décision Fondée sur les Données","Comparaison TTFB, temps de build, vélocité dev et coût de migration. Comment nous avons pris la décision Hydrogen avec les vrais chiffres — tradeoffs inclus.","2026-07-26",[22,23,24,25,26],"shopify-hydrogen","headless-commerce","web-performance","liquid","ttfb",8,"Roibase",{"type":30,"children":31,"toc":2016},"root",[32,40,47,52,84,114,127,134,139,164,176,182,187,215,220,225,566,571,627,632,638,643,676,681,785,790,796,801,912,924,1115,1128,1134,1139,1147,1175,1187,1195,1224,1233,1238,1254,1260,1279,1377,1382,1420,1425,1896,1901,1907,1912,1920,1944,1952,1975,1980,1986,2005,2010],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37],{"type":38,"value":39},"text","Fin 2024, dans l'écosystème Shopify, tu dois choisir entre deux architectures : le moteur de template Liquid traditionnel ou Hydrogen. Nous ne prenons pas cette décision sur des estimations — nous comparons les chiffres réels : TTFB, temps de build, vélocité développeur et coût de migration. Cet article explique les métriques que nous avons examinées et les tradeoffs que nous avons acceptés.",{"type":33,"tag":41,"props":42,"children":44},"h2",{"id":43},"liquid-vitesse-monolithique-flexibilité-limitée",[45],{"type":38,"value":46},"Liquid : Vitesse Monolithique, Flexibilité Limitée",{"type":33,"tag":34,"props":48,"children":49},{},[50],{"type":38,"value":51},"Liquid est le moteur de template que Shopify utilise depuis 2006. Server-rendu, mis en cache par CDN, exécuté sur l'infrastructure Oxygen propriétaire de Shopify. Voici nos chiffres de benchmark :",{"type":33,"tag":34,"props":53,"children":54},{},[55,61,63,67,72,74,77,82],{"type":33,"tag":56,"props":57,"children":58},"strong",{},[59],{"type":38,"value":60},"TTFB moyen :",{"type":38,"value":62}," 180-220ms (depuis l'edge CDN Oxygen)",{"type":33,"tag":64,"props":65,"children":66},"br",{},[],{"type":33,"tag":56,"props":68,"children":69},{},[70],{"type":38,"value":71},"Temps de build :",{"type":38,"value":73}," Aucun — chaque requête est rendue en runtime",{"type":33,"tag":64,"props":75,"children":76},{},[],{"type":33,"tag":56,"props":78,"children":79},{},[80],{"type":38,"value":81},"Ratio de cache HIT :",{"type":38,"value":83}," 82% (pour les pages statiques)",{"type":33,"tag":34,"props":85,"children":86},{},[87,89,96,98,104,106,112],{"type":38,"value":88},"L'avantage de Liquid n'est pas la vitesse, c'est la simplicité. Tu embauches un développeur de thème, tu remplis les dossiers ",{"type":33,"tag":90,"props":91,"children":93},"code",{"className":92},[],[94],{"type":38,"value":95},"sections\u002F",{"type":38,"value":97}," et ",{"type":33,"tag":90,"props":99,"children":101},{"className":100},[],[102],{"type":38,"value":103},"snippets\u002F",{"type":38,"value":105},", tu édites le contenu depuis l'admin Shopify. Zéro pipeline de build frontend, zéro dépendance npm. Mais zéro flexibilité : pour l'interactivité côté client, tu ajoutes des tags ",{"type":33,"tag":90,"props":107,"children":109},{"className":108},[],[110],{"type":38,"value":111},"\u003Cscript>",{"type":38,"value":113}," et tu comptes sur Alpine.js ou Petite Vue. Pas de bibliothèque de composants, pas de gestion d'état.",{"type":33,"tag":34,"props":115,"children":116},{},[117,119,125],{"type":38,"value":118},"Faire de la personnalisation en Liquid, c'est dépendre de l'objet ",{"type":33,"tag":90,"props":120,"children":122},{"className":121},[],[123],{"type":38,"value":124},"customer",{"type":38,"value":126}," de Shopify. Pour des cas comme la tarification dynamique ou un widget de recommandation, tu contournes le cache CDN et tu appelles le serveur — le TTFB passe de 180ms à 400-600ms. À ce point, l'avantage de vitesse de Liquid s'évapore.",{"type":33,"tag":128,"props":129,"children":131},"h3",{"id":130},"tradeoff-de-liquid-vélocité-développeur",[132],{"type":38,"value":133},"Tradeoff de Liquid : Vélocité Développeur",{"type":33,"tag":34,"props":135,"children":136},{},[137],{"type":38,"value":138},"Ajouter une fonctionnalité :",{"type":33,"tag":140,"props":141,"children":142},"ol",{},[143,149,154,159],{"type":33,"tag":144,"props":145,"children":146},"li",{},[147],{"type":38,"value":148},"Trouver un développeur compétent en Liquid (compétence rare)",{"type":33,"tag":144,"props":150,"children":151},{},[152],{"type":38,"value":153},"Ajouter une extension d'app theme Shopify ou écrire une section personnalisée",{"type":33,"tag":144,"props":155,"children":156},{},[157],{"type":38,"value":158},"Tester avec l'aperçu de thème Shopify (pas de serveur dev local)",{"type":33,"tag":144,"props":160,"children":161},{},[162],{"type":38,"value":163},"Déployer via GitHub sync ou Shopify CLI",{"type":33,"tag":34,"props":165,"children":166},{},[167,169,174],{"type":38,"value":168},"Temps de livraison moyen : ",{"type":33,"tag":56,"props":170,"children":171},{},[172],{"type":38,"value":173},"3-5 jours",{"type":38,"value":175}," (pour une section simple). Mettre en place un test A\u002FB, ajouter des événements analytics, optimiser un script tiers — chacun est un travail séparé. Pas de TypeScript, pas de mécanisme de réutilisabilité des composants, pas de framework de test unitaire.",{"type":33,"tag":41,"props":177,"children":179},{"id":178},"hydrogen-react-remix-edge-ssr",[180],{"type":38,"value":181},"Hydrogen : React, Remix, Edge SSR",{"type":33,"tag":34,"props":183,"children":184},{},[185],{"type":38,"value":186},"Hydrogen est le framework headless que Shopify a lancé en 2021 — basé sur React, construit sur Remix, s'exécutant sur le réseau edge Oxygen. Voici nos chiffres de production :",{"type":33,"tag":34,"props":188,"children":189},{},[190,194,196,199,203,205,208,213],{"type":33,"tag":56,"props":191,"children":192},{},[193],{"type":38,"value":60},{"type":38,"value":195}," 90-140ms (edge SSR, cache HIT)",{"type":33,"tag":64,"props":197,"children":198},{},[],{"type":33,"tag":56,"props":200,"children":201},{},[202],{"type":38,"value":71},{"type":38,"value":204}," 45-70 secondes (build Remix + déploiement Oxygen)",{"type":33,"tag":64,"props":206,"children":207},{},[],{"type":33,"tag":56,"props":209,"children":210},{},[211],{"type":38,"value":212},"TTFB cache MISS :",{"type":38,"value":214}," 250-350ms (latence de requête Storefront API incluse)",{"type":33,"tag":34,"props":216,"children":217},{},[218],{"type":38,"value":219},"L'avantage clé de Hydrogen est l'architecture basée sur les composants. Tu utilises l'écosystème React : Radix UI, Framer Motion, React Query. La gestion d'état via Zustand ou Jotai. TypeScript natif, serveur de dev Vite avec HMR à 200-400ms.",{"type":33,"tag":34,"props":221,"children":222},{},[223],{"type":38,"value":224},"Exemple de code — composant product card en Hydrogen :",{"type":33,"tag":226,"props":227,"children":231},"pre",{"className":228,"code":229,"language":230,"meta":17,"style":17},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\nimport {Image, Money} from '@shopify\u002Fhydrogen';\nimport type {Product} from '@shopify\u002Fhydrogen\u002Fstorefront-api-types';\n\nexport function ProductCard({product}: {product: Product}) {\n  return (\n    \u003Cdiv className=\"product-card\">\n      \u003CImage data={product.featuredImage} sizes=\"(min-width: 768px) 33vw, 100vw\" \u002F>\n      \u003Ch3>{product.title}\u003C\u002Fh3>\n      \u003CMoney data={product.priceRange.minVariantPrice} \u002F>\n    \u003C\u002Fdiv>\n  );\n}\n","tsx",[232],{"type":33,"tag":90,"props":233,"children":234},{"__ignoreMap":17},[235,247,279,310,320,384,398,433,480,505,531,548,557],{"type":33,"tag":236,"props":237,"children":240},"span",{"class":238,"line":239},"line",1,[241],{"type":33,"tag":236,"props":242,"children":244},{"style":243},"--shiki-default:#6A737D",[245],{"type":38,"value":246},"\u002F\u002F app\u002Fcomponents\u002FProductCard.tsx\n",{"type":33,"tag":236,"props":248,"children":250},{"class":238,"line":249},2,[251,257,263,268,274],{"type":33,"tag":236,"props":252,"children":254},{"style":253},"--shiki-default:#F97583",[255],{"type":38,"value":256},"import",{"type":33,"tag":236,"props":258,"children":260},{"style":259},"--shiki-default:#E1E4E8",[261],{"type":38,"value":262}," {Image, Money} ",{"type":33,"tag":236,"props":264,"children":265},{"style":253},[266],{"type":38,"value":267},"from",{"type":33,"tag":236,"props":269,"children":271},{"style":270},"--shiki-default:#9ECBFF",[272],{"type":38,"value":273}," '@shopify\u002Fhydrogen'",{"type":33,"tag":236,"props":275,"children":276},{"style":259},[277],{"type":38,"value":278},";\n",{"type":33,"tag":236,"props":280,"children":282},{"class":238,"line":281},3,[283,287,292,297,301,306],{"type":33,"tag":236,"props":284,"children":285},{"style":253},[286],{"type":38,"value":256},{"type":33,"tag":236,"props":288,"children":289},{"style":253},[290],{"type":38,"value":291}," type",{"type":33,"tag":236,"props":293,"children":294},{"style":259},[295],{"type":38,"value":296}," {Product} ",{"type":33,"tag":236,"props":298,"children":299},{"style":253},[300],{"type":38,"value":267},{"type":33,"tag":236,"props":302,"children":303},{"style":270},[304],{"type":38,"value":305}," '@shopify\u002Fhydrogen\u002Fstorefront-api-types'",{"type":33,"tag":236,"props":307,"children":308},{"style":259},[309],{"type":38,"value":278},{"type":33,"tag":236,"props":311,"children":313},{"class":238,"line":312},4,[314],{"type":33,"tag":236,"props":315,"children":317},{"emptyLinePlaceholder":316},true,[318],{"type":38,"value":319},"\n",{"type":33,"tag":236,"props":321,"children":323},{"class":238,"line":322},5,[324,329,334,340,345,351,356,361,366,370,374,379],{"type":33,"tag":236,"props":325,"children":326},{"style":253},[327],{"type":38,"value":328},"export",{"type":33,"tag":236,"props":330,"children":331},{"style":253},[332],{"type":38,"value":333}," function",{"type":33,"tag":236,"props":335,"children":337},{"style":336},"--shiki-default:#B392F0",[338],{"type":38,"value":339}," ProductCard",{"type":33,"tag":236,"props":341,"children":342},{"style":259},[343],{"type":38,"value":344},"({",{"type":33,"tag":236,"props":346,"children":348},{"style":347},"--shiki-default:#FFAB70",[349],{"type":38,"value":350},"product",{"type":33,"tag":236,"props":352,"children":353},{"style":259},[354],{"type":38,"value":355},"}",{"type":33,"tag":236,"props":357,"children":358},{"style":253},[359],{"type":38,"value":360},":",{"type":33,"tag":236,"props":362,"children":363},{"style":259},[364],{"type":38,"value":365}," {",{"type":33,"tag":236,"props":367,"children":368},{"style":347},[369],{"type":38,"value":350},{"type":33,"tag":236,"props":371,"children":372},{"style":253},[373],{"type":38,"value":360},{"type":33,"tag":236,"props":375,"children":376},{"style":336},[377],{"type":38,"value":378}," Product",{"type":33,"tag":236,"props":380,"children":381},{"style":259},[382],{"type":38,"value":383},"}) {\n",{"type":33,"tag":236,"props":385,"children":387},{"class":238,"line":386},6,[388,393],{"type":33,"tag":236,"props":389,"children":390},{"style":253},[391],{"type":38,"value":392},"  return",{"type":33,"tag":236,"props":394,"children":395},{"style":259},[396],{"type":38,"value":397}," (\n",{"type":33,"tag":236,"props":399,"children":401},{"class":238,"line":400},7,[402,407,413,418,423,428],{"type":33,"tag":236,"props":403,"children":404},{"style":259},[405],{"type":38,"value":406},"    \u003C",{"type":33,"tag":236,"props":408,"children":410},{"style":409},"--shiki-default:#85E89D",[411],{"type":38,"value":412},"div",{"type":33,"tag":236,"props":414,"children":415},{"style":336},[416],{"type":38,"value":417}," className",{"type":33,"tag":236,"props":419,"children":420},{"style":253},[421],{"type":38,"value":422},"=",{"type":33,"tag":236,"props":424,"children":425},{"style":270},[426],{"type":38,"value":427},"\"product-card\"",{"type":33,"tag":236,"props":429,"children":430},{"style":259},[431],{"type":38,"value":432},">\n",{"type":33,"tag":236,"props":434,"children":435},{"class":238,"line":27},[436,441,447,452,456,461,466,470,475],{"type":33,"tag":236,"props":437,"children":438},{"style":259},[439],{"type":38,"value":440},"      \u003C",{"type":33,"tag":236,"props":442,"children":444},{"style":443},"--shiki-default:#79B8FF",[445],{"type":38,"value":446},"Image",{"type":33,"tag":236,"props":448,"children":449},{"style":336},[450],{"type":38,"value":451}," data",{"type":33,"tag":236,"props":453,"children":454},{"style":253},[455],{"type":38,"value":422},{"type":33,"tag":236,"props":457,"children":458},{"style":259},[459],{"type":38,"value":460},"{product.featuredImage} ",{"type":33,"tag":236,"props":462,"children":463},{"style":336},[464],{"type":38,"value":465},"sizes",{"type":33,"tag":236,"props":467,"children":468},{"style":253},[469],{"type":38,"value":422},{"type":33,"tag":236,"props":471,"children":472},{"style":270},[473],{"type":38,"value":474},"\"(min-width: 768px) 33vw, 100vw\"",{"type":33,"tag":236,"props":476,"children":477},{"style":259},[478],{"type":38,"value":479}," \u002F>\n",{"type":33,"tag":236,"props":481,"children":483},{"class":238,"line":482},9,[484,488,492,497,501],{"type":33,"tag":236,"props":485,"children":486},{"style":259},[487],{"type":38,"value":440},{"type":33,"tag":236,"props":489,"children":490},{"style":409},[491],{"type":38,"value":128},{"type":33,"tag":236,"props":493,"children":494},{"style":259},[495],{"type":38,"value":496},">{product.title}\u003C\u002F",{"type":33,"tag":236,"props":498,"children":499},{"style":409},[500],{"type":38,"value":128},{"type":33,"tag":236,"props":502,"children":503},{"style":259},[504],{"type":38,"value":432},{"type":33,"tag":236,"props":506,"children":508},{"class":238,"line":507},10,[509,513,518,522,526],{"type":33,"tag":236,"props":510,"children":511},{"style":259},[512],{"type":38,"value":440},{"type":33,"tag":236,"props":514,"children":515},{"style":443},[516],{"type":38,"value":517},"Money",{"type":33,"tag":236,"props":519,"children":520},{"style":336},[521],{"type":38,"value":451},{"type":33,"tag":236,"props":523,"children":524},{"style":253},[525],{"type":38,"value":422},{"type":33,"tag":236,"props":527,"children":528},{"style":259},[529],{"type":38,"value":530},"{product.priceRange.minVariantPrice} \u002F>\n",{"type":33,"tag":236,"props":532,"children":534},{"class":238,"line":533},11,[535,540,544],{"type":33,"tag":236,"props":536,"children":537},{"style":259},[538],{"type":38,"value":539},"    \u003C\u002F",{"type":33,"tag":236,"props":541,"children":542},{"style":409},[543],{"type":38,"value":412},{"type":33,"tag":236,"props":545,"children":546},{"style":259},[547],{"type":38,"value":432},{"type":33,"tag":236,"props":549,"children":551},{"class":238,"line":550},12,[552],{"type":33,"tag":236,"props":553,"children":554},{"style":259},[555],{"type":38,"value":556},"  );\n",{"type":33,"tag":236,"props":558,"children":560},{"class":238,"line":559},13,[561],{"type":33,"tag":236,"props":562,"children":563},{"style":259},[564],{"type":38,"value":565},"}\n",{"type":33,"tag":34,"props":567,"children":568},{},[569],{"type":38,"value":570},"Le même composant en Liquid :",{"type":33,"tag":226,"props":572,"children":575},{"className":573,"code":574,"language":25,"meta":17,"style":17},"language-liquid shiki shiki-themes github-dark","{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n\u003Cdiv class=\"product-card\">\n  {{ product.featured_image | image_url: width: 800 | image_tag }}\n  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n\u003C\u002Fdiv>\n",[576],{"type":33,"tag":90,"props":577,"children":578},{"__ignoreMap":17},[579,587,595,603,611,619],{"type":33,"tag":236,"props":580,"children":581},{"class":238,"line":239},[582],{"type":33,"tag":236,"props":583,"children":584},{},[585],{"type":38,"value":586},"{% comment %} sections\u002Fproduct-card.liquid {% endcomment %}\n",{"type":33,"tag":236,"props":588,"children":589},{"class":238,"line":249},[590],{"type":33,"tag":236,"props":591,"children":592},{},[593],{"type":38,"value":594},"\u003Cdiv class=\"product-card\">\n",{"type":33,"tag":236,"props":596,"children":597},{"class":238,"line":281},[598],{"type":33,"tag":236,"props":599,"children":600},{},[601],{"type":38,"value":602},"  {{ product.featured_image | image_url: width: 800 | image_tag }}\n",{"type":33,"tag":236,"props":604,"children":605},{"class":238,"line":312},[606],{"type":33,"tag":236,"props":607,"children":608},{},[609],{"type":38,"value":610},"  \u003Ch3>{{ product.title }}\u003C\u002Fh3>\n",{"type":33,"tag":236,"props":612,"children":613},{"class":238,"line":322},[614],{"type":33,"tag":236,"props":615,"children":616},{},[617],{"type":38,"value":618},"  \u003Cspan>{{ product.price | money }}\u003C\u002Fspan>\n",{"type":33,"tag":236,"props":620,"children":621},{"class":238,"line":386},[622],{"type":33,"tag":236,"props":623,"children":624},{},[625],{"type":38,"value":626},"\u003C\u002Fdiv>\n",{"type":33,"tag":34,"props":628,"children":629},{},[630],{"type":38,"value":631},"La différence n'est pas la syntaxe — en Hydrogen, tu importes ce composant ailleurs et tu le réutilises, tu as la sécurité des types avec PropTypes. En Liquid, tu inclus chaque fois le snippet et tu passes des variables — refactoriser est difficile.",{"type":33,"tag":41,"props":633,"children":635},{"id":634},"coût-de-migration-calcul-en-heures",[636],{"type":38,"value":637},"Coût de Migration : Calcul en Heures",{"type":33,"tag":34,"props":639,"children":640},{},[641],{"type":38,"value":642},"Quand tu migres un site e-commerce, il y a trois coûts :",{"type":33,"tag":140,"props":644,"children":645},{},[646,656,666],{"type":33,"tag":144,"props":647,"children":648},{},[649,654],{"type":33,"tag":56,"props":650,"children":651},{},[652],{"type":38,"value":653},"Migration des templates :",{"type":38,"value":655}," conversion Liquid → JSX",{"type":33,"tag":144,"props":657,"children":658},{},[659,664],{"type":33,"tag":56,"props":660,"children":661},{},[662],{"type":38,"value":663},"Refactor de la récupération de données :",{"type":38,"value":665}," Thème → requête Storefront API",{"type":33,"tag":144,"props":667,"children":668},{},[669,674],{"type":33,"tag":56,"props":670,"children":671},{},[672],{"type":38,"value":673},"Intégration tiers :",{"type":38,"value":675}," pixels, analytics, widget d'avis",{"type":33,"tag":34,"props":677,"children":678},{},[679],{"type":38,"value":680},"Nos expériences réelles :",{"type":33,"tag":682,"props":683,"children":684},"table",{},[685,709],{"type":33,"tag":686,"props":687,"children":688},"thead",{},[689],{"type":33,"tag":690,"props":691,"children":692},"tr",{},[693,699,704],{"type":33,"tag":694,"props":695,"children":696},"th",{},[697],{"type":38,"value":698},"Métrique",{"type":33,"tag":694,"props":700,"children":701},{},[702],{"type":38,"value":703},"Site de 50 pages",{"type":33,"tag":694,"props":705,"children":706},{},[707],{"type":38,"value":708},"Site de 200 pages",{"type":33,"tag":710,"props":711,"children":712},"tbody",{},[713,732,749,767],{"type":33,"tag":690,"props":714,"children":715},{},[716,722,727],{"type":33,"tag":717,"props":718,"children":719},"td",{},[720],{"type":38,"value":721},"Heures dev (migration)",{"type":33,"tag":717,"props":723,"children":724},{},[725],{"type":38,"value":726},"120-180 heures",{"type":33,"tag":717,"props":728,"children":729},{},[730],{"type":38,"value":731},"400-600 heures",{"type":33,"tag":690,"props":733,"children":734},{},[735,740,745],{"type":33,"tag":717,"props":736,"children":737},{},[738],{"type":38,"value":739},"Heures QA",{"type":33,"tag":717,"props":741,"children":742},{},[743],{"type":38,"value":744},"40-60 heures",{"type":33,"tag":717,"props":746,"children":747},{},[748],{"type":38,"value":726},{"type":33,"tag":690,"props":750,"children":751},{},[752,757,762],{"type":33,"tag":717,"props":753,"children":754},{},[755],{"type":38,"value":756},"Downtime",{"type":33,"tag":717,"props":758,"children":759},{},[760],{"type":38,"value":761},"0 (déploiement en staging)",{"type":33,"tag":717,"props":763,"children":764},{},[765],{"type":38,"value":766},"0",{"type":33,"tag":690,"props":768,"children":769},{},[770,775,780],{"type":33,"tag":717,"props":771,"children":772},{},[773],{"type":38,"value":774},"Risque",{"type":33,"tag":717,"props":776,"children":777},{},[778],{"type":38,"value":779},"Bas",{"type":33,"tag":717,"props":781,"children":782},{},[783],{"type":38,"value":784},"Moyen (contrôle des URL SEO)",{"type":33,"tag":34,"props":786,"children":787},{},[788],{"type":38,"value":789},"Le coût le plus élevé est le changement de skill set des développeurs. Un développeur Liquid ne code pas Hydrogen — tu embauches un développeur frontend React ou tu formes l'équipe. Différence de rémunération moyenne : dev Liquid €4500-6500\u002Fmois, dev React €7500-11000\u002Fmois.",{"type":33,"tag":128,"props":791,"children":793},{"id":792},"latence-des-requêtes-storefront-api",[794],{"type":38,"value":795},"Latence des Requêtes Storefront API",{"type":33,"tag":34,"props":797,"children":798},{},[799],{"type":38,"value":800},"Hydrogen envoie des requêtes GraphQL à l'API Storefront Shopify. En Liquid, l'accès aux données côté serveur est gratuit (même app monolithique), en Hydrogen il y a un saut réseau. Exemple de requête :",{"type":33,"tag":226,"props":802,"children":806},{"className":803,"code":804,"language":805,"meta":17,"style":17},"language-graphql shiki shiki-themes github-dark","query ProductPage($handle: String!) {\n  product(handle: $handle) {\n    id\n    title\n    description\n    priceRange {\n      minVariantPrice { amount currencyCode }\n    }\n    images(first: 10) {\n      nodes { url altText }\n    }\n  }\n}\n","graphql",[807],{"type":33,"tag":90,"props":808,"children":809},{"__ignoreMap":17},[810,818,826,834,842,850,858,866,874,882,890,897,905],{"type":33,"tag":236,"props":811,"children":812},{"class":238,"line":239},[813],{"type":33,"tag":236,"props":814,"children":815},{},[816],{"type":38,"value":817},"query ProductPage($handle: String!) {\n",{"type":33,"tag":236,"props":819,"children":820},{"class":238,"line":249},[821],{"type":33,"tag":236,"props":822,"children":823},{},[824],{"type":38,"value":825},"  product(handle: $handle) {\n",{"type":33,"tag":236,"props":827,"children":828},{"class":238,"line":281},[829],{"type":33,"tag":236,"props":830,"children":831},{},[832],{"type":38,"value":833},"    id\n",{"type":33,"tag":236,"props":835,"children":836},{"class":238,"line":312},[837],{"type":33,"tag":236,"props":838,"children":839},{},[840],{"type":38,"value":841},"    title\n",{"type":33,"tag":236,"props":843,"children":844},{"class":238,"line":322},[845],{"type":33,"tag":236,"props":846,"children":847},{},[848],{"type":38,"value":849},"    description\n",{"type":33,"tag":236,"props":851,"children":852},{"class":238,"line":386},[853],{"type":33,"tag":236,"props":854,"children":855},{},[856],{"type":38,"value":857},"    priceRange {\n",{"type":33,"tag":236,"props":859,"children":860},{"class":238,"line":400},[861],{"type":33,"tag":236,"props":862,"children":863},{},[864],{"type":38,"value":865},"      minVariantPrice { amount currencyCode }\n",{"type":33,"tag":236,"props":867,"children":868},{"class":238,"line":27},[869],{"type":33,"tag":236,"props":870,"children":871},{},[872],{"type":38,"value":873},"    }\n",{"type":33,"tag":236,"props":875,"children":876},{"class":238,"line":482},[877],{"type":33,"tag":236,"props":878,"children":879},{},[880],{"type":38,"value":881},"    images(first: 10) {\n",{"type":33,"tag":236,"props":883,"children":884},{"class":238,"line":507},[885],{"type":33,"tag":236,"props":886,"children":887},{},[888],{"type":38,"value":889},"      nodes { url altText }\n",{"type":33,"tag":236,"props":891,"children":892},{"class":238,"line":533},[893],{"type":33,"tag":236,"props":894,"children":895},{},[896],{"type":38,"value":873},{"type":33,"tag":236,"props":898,"children":899},{"class":238,"line":550},[900],{"type":33,"tag":236,"props":901,"children":902},{},[903],{"type":38,"value":904},"  }\n",{"type":33,"tag":236,"props":906,"children":907},{"class":238,"line":559},[908],{"type":33,"tag":236,"props":909,"children":910},{},[911],{"type":38,"value":565},{"type":33,"tag":34,"props":913,"children":914},{},[915,917,922],{"type":38,"value":916},"Cette requête va de l'edge Oxygen au backend Shopify — latence moyenne ",{"type":33,"tag":56,"props":918,"children":919},{},[920],{"type":38,"value":921},"80-120ms",{"type":38,"value":923},". En Liquid, cette latence n'existe pas car les données sont en mémoire. Mais avec la stratégie de cache de Hydrogen, tu peux compenser :",{"type":33,"tag":226,"props":925,"children":927},{"className":228,"code":926,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const {product} = await context.storefront.query(PRODUCT_QUERY, {\n    variables: {handle: params.handle},\n    cache: context.storefront.CacheLong(), \u002F\u002F Cache 1 heure\n  });\n  return json({product});\n}\n",[928],{"type":33,"tag":90,"props":929,"children":930},{"__ignoreMap":17},[931,939,997,1052,1060,1083,1091,1108],{"type":33,"tag":236,"props":932,"children":933},{"class":238,"line":239},[934],{"type":33,"tag":236,"props":935,"children":936},{"style":243},[937],{"type":38,"value":938},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx\n",{"type":33,"tag":236,"props":940,"children":941},{"class":238,"line":249},[942,946,951,955,960,964,969,974,979,983,987,992],{"type":33,"tag":236,"props":943,"children":944},{"style":253},[945],{"type":38,"value":328},{"type":33,"tag":236,"props":947,"children":948},{"style":253},[949],{"type":38,"value":950}," async",{"type":33,"tag":236,"props":952,"children":953},{"style":253},[954],{"type":38,"value":333},{"type":33,"tag":236,"props":956,"children":957},{"style":336},[958],{"type":38,"value":959}," loader",{"type":33,"tag":236,"props":961,"children":962},{"style":259},[963],{"type":38,"value":344},{"type":33,"tag":236,"props":965,"children":966},{"style":347},[967],{"type":38,"value":968},"params",{"type":33,"tag":236,"props":970,"children":971},{"style":259},[972],{"type":38,"value":973},", ",{"type":33,"tag":236,"props":975,"children":976},{"style":347},[977],{"type":38,"value":978},"context",{"type":33,"tag":236,"props":980,"children":981},{"style":259},[982],{"type":38,"value":355},{"type":33,"tag":236,"props":984,"children":985},{"style":253},[986],{"type":38,"value":360},{"type":33,"tag":236,"props":988,"children":989},{"style":336},[990],{"type":38,"value":991}," LoaderFunctionArgs",{"type":33,"tag":236,"props":993,"children":994},{"style":259},[995],{"type":38,"value":996},") {\n",{"type":33,"tag":236,"props":998,"children":999},{"class":238,"line":281},[1000,1005,1009,1013,1018,1022,1027,1032,1037,1042,1047],{"type":33,"tag":236,"props":1001,"children":1002},{"style":253},[1003],{"type":38,"value":1004},"  const",{"type":33,"tag":236,"props":1006,"children":1007},{"style":259},[1008],{"type":38,"value":365},{"type":33,"tag":236,"props":1010,"children":1011},{"style":443},[1012],{"type":38,"value":350},{"type":33,"tag":236,"props":1014,"children":1015},{"style":259},[1016],{"type":38,"value":1017},"} ",{"type":33,"tag":236,"props":1019,"children":1020},{"style":253},[1021],{"type":38,"value":422},{"type":33,"tag":236,"props":1023,"children":1024},{"style":253},[1025],{"type":38,"value":1026}," await",{"type":33,"tag":236,"props":1028,"children":1029},{"style":259},[1030],{"type":38,"value":1031}," context.storefront.",{"type":33,"tag":236,"props":1033,"children":1034},{"style":336},[1035],{"type":38,"value":1036},"query",{"type":33,"tag":236,"props":1038,"children":1039},{"style":259},[1040],{"type":38,"value":1041},"(",{"type":33,"tag":236,"props":1043,"children":1044},{"style":443},[1045],{"type":38,"value":1046},"PRODUCT_QUERY",{"type":33,"tag":236,"props":1048,"children":1049},{"style":259},[1050],{"type":38,"value":1051},", {\n",{"type":33,"tag":236,"props":1053,"children":1054},{"class":238,"line":312},[1055],{"type":33,"tag":236,"props":1056,"children":1057},{"style":259},[1058],{"type":38,"value":1059},"    variables: {handle: params.handle},\n",{"type":33,"tag":236,"props":1061,"children":1062},{"class":238,"line":322},[1063,1068,1073,1078],{"type":33,"tag":236,"props":1064,"children":1065},{"style":259},[1066],{"type":38,"value":1067},"    cache: context.storefront.",{"type":33,"tag":236,"props":1069,"children":1070},{"style":336},[1071],{"type":38,"value":1072},"CacheLong",{"type":33,"tag":236,"props":1074,"children":1075},{"style":259},[1076],{"type":38,"value":1077},"(), ",{"type":33,"tag":236,"props":1079,"children":1080},{"style":243},[1081],{"type":38,"value":1082},"\u002F\u002F Cache 1 heure\n",{"type":33,"tag":236,"props":1084,"children":1085},{"class":238,"line":386},[1086],{"type":33,"tag":236,"props":1087,"children":1088},{"style":259},[1089],{"type":38,"value":1090},"  });\n",{"type":33,"tag":236,"props":1092,"children":1093},{"class":238,"line":400},[1094,1098,1103],{"type":33,"tag":236,"props":1095,"children":1096},{"style":253},[1097],{"type":38,"value":392},{"type":33,"tag":236,"props":1099,"children":1100},{"style":336},[1101],{"type":38,"value":1102}," json",{"type":33,"tag":236,"props":1104,"children":1105},{"style":259},[1106],{"type":38,"value":1107},"({product});\n",{"type":33,"tag":236,"props":1109,"children":1110},{"class":238,"line":27},[1111],{"type":33,"tag":236,"props":1112,"children":1113},{"style":259},[1114],{"type":38,"value":565},{"type":33,"tag":34,"props":1116,"children":1117},{},[1118,1120,1126],{"type":38,"value":1119},"La stratégie ",{"type":33,"tag":90,"props":1121,"children":1123},{"className":1122},[],[1124],{"type":38,"value":1125},"CacheLong()",{"type":38,"value":1127}," cache la même requête à l'edge pendant 1 heure — à la deuxième requête, la latence descend sous 10ms.",{"type":33,"tag":41,"props":1129,"children":1131},{"id":1130},"comparaison-vélocité-développeur",[1132],{"type":38,"value":1133},"Comparaison Vélocité Développeur",{"type":33,"tag":34,"props":1135,"children":1136},{},[1137],{"type":38,"value":1138},"Implémentons la même fonctionnalité dans les deux architectures : \"Affiche un widget de vente croisée dynamique pour le produit ajouté au panier\".",{"type":33,"tag":34,"props":1140,"children":1141},{},[1142],{"type":33,"tag":56,"props":1143,"children":1144},{},[1145],{"type":38,"value":1146},"Approche Liquid :",{"type":33,"tag":140,"props":1148,"children":1149},{},[1150,1155,1160,1165,1170],{"type":33,"tag":144,"props":1151,"children":1152},{},[1153],{"type":38,"value":1154},"Écrire une app personnalisée (Shopify App Bridge)",{"type":33,"tag":144,"props":1156,"children":1157},{},[1158],{"type":38,"value":1159},"Ajouter l'app en tant qu'extension (snippet)",{"type":33,"tag":144,"props":1161,"children":1162},{},[1163],{"type":38,"value":1164},"Envoyer une requête Ajax depuis la page panier",{"type":33,"tag":144,"props":1166,"children":1167},{},[1168],{"type":38,"value":1169},"Se connecter à l'API du moteur de recommandation",{"type":33,"tag":144,"props":1171,"children":1172},{},[1173],{"type":38,"value":1174},"Rendre la réponse dans le DOM",{"type":33,"tag":34,"props":1176,"children":1177},{},[1178,1180,1185],{"type":38,"value":1179},"Durée : ",{"type":33,"tag":56,"props":1181,"children":1182},{},[1183],{"type":38,"value":1184},"3-4 jours",{"type":38,"value":1186}," (tests inclus)",{"type":33,"tag":34,"props":1188,"children":1189},{},[1190],{"type":33,"tag":56,"props":1191,"children":1192},{},[1193],{"type":38,"value":1194},"Approche Hydrogen :",{"type":33,"tag":140,"props":1196,"children":1197},{},[1198,1203,1214,1219],{"type":33,"tag":144,"props":1199,"children":1200},{},[1201],{"type":38,"value":1202},"Écrire un composant React (CartUpsell.tsx)",{"type":33,"tag":144,"props":1204,"children":1205},{},[1206,1208],{"type":38,"value":1207},"Récupérer les données du panier via le hook ",{"type":33,"tag":90,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":38,"value":1213},"useCart",{"type":33,"tag":144,"props":1215,"children":1216},{},[1217],{"type":38,"value":1218},"Envoyer une requête à l'API de recommandation (React Query)",{"type":33,"tag":144,"props":1220,"children":1221},{},[1222],{"type":38,"value":1223},"Importer le composant dans la route panier",{"type":33,"tag":34,"props":1225,"children":1226},{},[1227,1228],{"type":38,"value":1179},{"type":33,"tag":56,"props":1229,"children":1230},{},[1231],{"type":38,"value":1232},"4-6 heures",{"type":33,"tag":34,"props":1234,"children":1235},{},[1236],{"type":38,"value":1237},"La différence : Hydrogen offre la sécurité des types TypeScript, le composant est testable, développé isolément dans Storybook. En Liquid, chaque changement est testé manuellement via l'aperçu du thème.",{"type":33,"tag":34,"props":1239,"children":1240},{},[1241,1243,1252],{"type":38,"value":1242},"Chiffre réel d'un projet Roibase : une fonctionnalité de personnalisation qui a pris 1 sprint (2 semaines) en Liquid a été réalisée en 3 jours avec Hydrogen — c'est la contribution de vélocité de l'architecture ",{"type":33,"tag":1244,"props":1245,"children":1249},"a",{"href":1246,"rel":1247},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[1248],"nofollow",[1250],{"type":38,"value":1251},"headless commerce",{"type":38,"value":1253},".",{"type":33,"tag":41,"props":1255,"children":1257},{"id":1256},"performance-web-différence-core-web-vitals",[1258],{"type":38,"value":1259},"Performance Web : Différence Core Web Vitals",{"type":33,"tag":34,"props":1261,"children":1262},{},[1263,1265,1270,1272,1277],{"type":38,"value":1264},"Rapport 2025 Q1 de Shopify : LCP moyen Liquid theme ",{"type":33,"tag":56,"props":1266,"children":1267},{},[1268],{"type":38,"value":1269},"2.4 secondes",{"type":38,"value":1271},", LCP site Hydrogen ",{"type":33,"tag":56,"props":1273,"children":1274},{},[1275],{"type":38,"value":1276},"1.8 secondes",{"type":38,"value":1278}," (mobile, 4G). Nos données de production :",{"type":33,"tag":682,"props":1280,"children":1281},{},[1282,1302],{"type":33,"tag":686,"props":1283,"children":1284},{},[1285],{"type":33,"tag":690,"props":1286,"children":1287},{},[1288,1292,1297],{"type":33,"tag":694,"props":1289,"children":1290},{},[1291],{"type":38,"value":698},{"type":33,"tag":694,"props":1293,"children":1294},{},[1295],{"type":38,"value":1296},"Liquid (theme)",{"type":33,"tag":694,"props":1298,"children":1299},{},[1300],{"type":38,"value":1301},"Hydrogen",{"type":33,"tag":710,"props":1303,"children":1304},{},[1305,1323,1341,1359],{"type":33,"tag":690,"props":1306,"children":1307},{},[1308,1313,1318],{"type":33,"tag":717,"props":1309,"children":1310},{},[1311],{"type":38,"value":1312},"TTFB",{"type":33,"tag":717,"props":1314,"children":1315},{},[1316],{"type":38,"value":1317},"210ms",{"type":33,"tag":717,"props":1319,"children":1320},{},[1321],{"type":38,"value":1322},"130ms",{"type":33,"tag":690,"props":1324,"children":1325},{},[1326,1331,1336],{"type":33,"tag":717,"props":1327,"children":1328},{},[1329],{"type":38,"value":1330},"LCP",{"type":33,"tag":717,"props":1332,"children":1333},{},[1334],{"type":38,"value":1335},"2.6s",{"type":33,"tag":717,"props":1337,"children":1338},{},[1339],{"type":38,"value":1340},"1.9s",{"type":33,"tag":690,"props":1342,"children":1343},{},[1344,1349,1354],{"type":33,"tag":717,"props":1345,"children":1346},{},[1347],{"type":38,"value":1348},"TBT",{"type":33,"tag":717,"props":1350,"children":1351},{},[1352],{"type":38,"value":1353},"420ms",{"type":33,"tag":717,"props":1355,"children":1356},{},[1357],{"type":38,"value":1358},"180ms",{"type":33,"tag":690,"props":1360,"children":1361},{},[1362,1367,1372],{"type":33,"tag":717,"props":1363,"children":1364},{},[1365],{"type":38,"value":1366},"CLS",{"type":33,"tag":717,"props":1368,"children":1369},{},[1370],{"type":38,"value":1371},"0.08",{"type":33,"tag":717,"props":1373,"children":1374},{},[1375],{"type":38,"value":1376},"0.02",{"type":33,"tag":34,"props":1378,"children":1379},{},[1380],{"type":38,"value":1381},"L'avantage performance de Hydrogen vient de trois points :",{"type":33,"tag":140,"props":1383,"children":1384},{},[1385,1395,1405],{"type":33,"tag":144,"props":1386,"children":1387},{},[1388,1393],{"type":33,"tag":56,"props":1389,"children":1390},{},[1391],{"type":38,"value":1392},"Edge SSR :",{"type":38,"value":1394}," Le réseau edge Oxygen de Shopify s'exécute sur des PoP globaux (comme Cloudflare) — rend le HTML à l'edge le plus proche de l'utilisateur",{"type":33,"tag":144,"props":1396,"children":1397},{},[1398,1403],{"type":33,"tag":56,"props":1399,"children":1400},{},[1401],{"type":38,"value":1402},"Streaming SSR :",{"type":38,"value":1404}," Le support de streaming de Remix rend le contenu above-fold immédiatement, lazy-load below-fold",{"type":33,"tag":144,"props":1406,"children":1407},{},[1408,1413,1415],{"type":33,"tag":56,"props":1409,"children":1410},{},[1411],{"type":38,"value":1412},"Bundle optimisé :",{"type":38,"value":1414}," Build Vite avec code splitting automatique, tree shaking, imports dynamiques — bundle JS ",{"type":33,"tag":56,"props":1416,"children":1417},{},[1418],{"type":38,"value":1419},"40% plus petit",{"type":33,"tag":34,"props":1421,"children":1422},{},[1423],{"type":38,"value":1424},"Exemple : lazy loading de grille produits (Hydrogen) :",{"type":33,"tag":226,"props":1426,"children":1428},{"className":228,"code":1427,"language":230,"meta":17,"style":17},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\nimport {Await} from '@remix-run\u002Freact';\nimport {Suspense} from 'react';\n\nexport async function loader({params, context}: LoaderFunctionArgs) {\n  const productsPromise = context.storefront.query(PRODUCTS_QUERY, {\n    variables: {handle: params.handle},\n  });\n  \n  return defer({products: productsPromise}); \u002F\u002F Stream promise\n}\n\nexport default function Collection() {\n  const {products} = useLoaderData\u003Ctypeof loader>();\n  \n  return (\n    \u003CSuspense fallback={\u003CProductGridSkeleton \u002F>}>\n      \u003CAwait resolve={products}>\n        {(data) => \u003CProductGrid products={data.products} \u002F>}\n      \u003C\u002FAwait>\n    \u003C\u002FSuspense>\n  );\n}\n",[1429],{"type":33,"tag":90,"props":1430,"children":1431},{"__ignoreMap":17},[1432,1440,1465,1490,1497,1548,1586,1593,1600,1608,1630,1637,1644,1670,1715,1723,1735,1772,1799,1847,1864,1880,1888],{"type":33,"tag":236,"props":1433,"children":1434},{"class":238,"line":239},[1435],{"type":33,"tag":236,"props":1436,"children":1437},{"style":243},[1438],{"type":38,"value":1439},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx\n",{"type":33,"tag":236,"props":1441,"children":1442},{"class":238,"line":249},[1443,1447,1452,1456,1461],{"type":33,"tag":236,"props":1444,"children":1445},{"style":253},[1446],{"type":38,"value":256},{"type":33,"tag":236,"props":1448,"children":1449},{"style":259},[1450],{"type":38,"value":1451}," {Await} ",{"type":33,"tag":236,"props":1453,"children":1454},{"style":253},[1455],{"type":38,"value":267},{"type":33,"tag":236,"props":1457,"children":1458},{"style":270},[1459],{"type":38,"value":1460}," '@remix-run\u002Freact'",{"type":33,"tag":236,"props":1462,"children":1463},{"style":259},[1464],{"type":38,"value":278},{"type":33,"tag":236,"props":1466,"children":1467},{"class":238,"line":281},[1468,1472,1477,1481,1486],{"type":33,"tag":236,"props":1469,"children":1470},{"style":253},[1471],{"type":38,"value":256},{"type":33,"tag":236,"props":1473,"children":1474},{"style":259},[1475],{"type":38,"value":1476}," {Suspense} ",{"type":33,"tag":236,"props":1478,"children":1479},{"style":253},[1480],{"type":38,"value":267},{"type":33,"tag":236,"props":1482,"children":1483},{"style":270},[1484],{"type":38,"value":1485}," 'react'",{"type":33,"tag":236,"props":1487,"children":1488},{"style":259},[1489],{"type":38,"value":278},{"type":33,"tag":236,"props":1491,"children":1492},{"class":238,"line":312},[1493],{"type":33,"tag":236,"props":1494,"children":1495},{"emptyLinePlaceholder":316},[1496],{"type":38,"value":319},{"type":33,"tag":236,"props":1498,"children":1499},{"class":238,"line":322},[1500,1504,1508,1512,1516,1520,1524,1528,1532,1536,1540,1544],{"type":33,"tag":236,"props":1501,"children":1502},{"style":253},[1503],{"type":38,"value":328},{"type":33,"tag":236,"props":1505,"children":1506},{"style":253},[1507],{"type":38,"value":950},{"type":33,"tag":236,"props":1509,"children":1510},{"style":253},[1511],{"type":38,"value":333},{"type":33,"tag":236,"props":1513,"children":1514},{"style":336},[1515],{"type":38,"value":959},{"type":33,"tag":236,"props":1517,"children":1518},{"style":259},[1519],{"type":38,"value":344},{"type":33,"tag":236,"props":1521,"children":1522},{"style":347},[1523],{"type":38,"value":968},{"type":33,"tag":236,"props":1525,"children":1526},{"style":259},[1527],{"type":38,"value":973},{"type":33,"tag":236,"props":1529,"children":1530},{"style":347},[1531],{"type":38,"value":978},{"type":33,"tag":236,"props":1533,"children":1534},{"style":259},[1535],{"type":38,"value":355},{"type":33,"tag":236,"props":1537,"children":1538},{"style":253},[1539],{"type":38,"value":360},{"type":33,"tag":236,"props":1541,"children":1542},{"style":336},[1543],{"type":38,"value":991},{"type":33,"tag":236,"props":1545,"children":1546},{"style":259},[1547],{"type":38,"value":996},{"type":33,"tag":236,"props":1549,"children":1550},{"class":238,"line":386},[1551,1555,1560,1565,1569,1573,1577,1582],{"type":33,"tag":236,"props":1552,"children":1553},{"style":253},[1554],{"type":38,"value":1004},{"type":33,"tag":236,"props":1556,"children":1557},{"style":443},[1558],{"type":38,"value":1559}," productsPromise",{"type":33,"tag":236,"props":1561,"children":1562},{"style":253},[1563],{"type":38,"value":1564}," =",{"type":33,"tag":236,"props":1566,"children":1567},{"style":259},[1568],{"type":38,"value":1031},{"type":33,"tag":236,"props":1570,"children":1571},{"style":336},[1572],{"type":38,"value":1036},{"type":33,"tag":236,"props":1574,"children":1575},{"style":259},[1576],{"type":38,"value":1041},{"type":33,"tag":236,"props":1578,"children":1579},{"style":443},[1580],{"type":38,"value":1581},"PRODUCTS_QUERY",{"type":33,"tag":236,"props":1583,"children":1584},{"style":259},[1585],{"type":38,"value":1051},{"type":33,"tag":236,"props":1587,"children":1588},{"class":238,"line":400},[1589],{"type":33,"tag":236,"props":1590,"children":1591},{"style":259},[1592],{"type":38,"value":1059},{"type":33,"tag":236,"props":1594,"children":1595},{"class":238,"line":27},[1596],{"type":33,"tag":236,"props":1597,"children":1598},{"style":259},[1599],{"type":38,"value":1090},{"type":33,"tag":236,"props":1601,"children":1602},{"class":238,"line":482},[1603],{"type":33,"tag":236,"props":1604,"children":1605},{"style":259},[1606],{"type":38,"value":1607},"  \n",{"type":33,"tag":236,"props":1609,"children":1610},{"class":238,"line":507},[1611,1615,1620,1625],{"type":33,"tag":236,"props":1612,"children":1613},{"style":253},[1614],{"type":38,"value":392},{"type":33,"tag":236,"props":1616,"children":1617},{"style":336},[1618],{"type":38,"value":1619}," defer",{"type":33,"tag":236,"props":1621,"children":1622},{"style":259},[1623],{"type":38,"value":1624},"({products: productsPromise}); ",{"type":33,"tag":236,"props":1626,"children":1627},{"style":243},[1628],{"type":38,"value":1629},"\u002F\u002F Stream promise\n",{"type":33,"tag":236,"props":1631,"children":1632},{"class":238,"line":533},[1633],{"type":33,"tag":236,"props":1634,"children":1635},{"style":259},[1636],{"type":38,"value":565},{"type":33,"tag":236,"props":1638,"children":1639},{"class":238,"line":550},[1640],{"type":33,"tag":236,"props":1641,"children":1642},{"emptyLinePlaceholder":316},[1643],{"type":38,"value":319},{"type":33,"tag":236,"props":1645,"children":1646},{"class":238,"line":559},[1647,1651,1656,1660,1665],{"type":33,"tag":236,"props":1648,"children":1649},{"style":253},[1650],{"type":38,"value":328},{"type":33,"tag":236,"props":1652,"children":1653},{"style":253},[1654],{"type":38,"value":1655}," default",{"type":33,"tag":236,"props":1657,"children":1658},{"style":253},[1659],{"type":38,"value":333},{"type":33,"tag":236,"props":1661,"children":1662},{"style":336},[1663],{"type":38,"value":1664}," Collection",{"type":33,"tag":236,"props":1666,"children":1667},{"style":259},[1668],{"type":38,"value":1669},"() {\n",{"type":33,"tag":236,"props":1671,"children":1673},{"class":238,"line":1672},14,[1674,1678,1682,1687,1691,1695,1700,1705,1710],{"type":33,"tag":236,"props":1675,"children":1676},{"style":253},[1677],{"type":38,"value":1004},{"type":33,"tag":236,"props":1679,"children":1680},{"style":259},[1681],{"type":38,"value":365},{"type":33,"tag":236,"props":1683,"children":1684},{"style":443},[1685],{"type":38,"value":1686},"products",{"type":33,"tag":236,"props":1688,"children":1689},{"style":259},[1690],{"type":38,"value":1017},{"type":33,"tag":236,"props":1692,"children":1693},{"style":253},[1694],{"type":38,"value":422},{"type":33,"tag":236,"props":1696,"children":1697},{"style":336},[1698],{"type":38,"value":1699}," useLoaderData",{"type":33,"tag":236,"props":1701,"children":1702},{"style":259},[1703],{"type":38,"value":1704},"\u003C",{"type":33,"tag":236,"props":1706,"children":1707},{"style":253},[1708],{"type":38,"value":1709},"typeof",{"type":33,"tag":236,"props":1711,"children":1712},{"style":259},[1713],{"type":38,"value":1714}," loader>();\n",{"type":33,"tag":236,"props":1716,"children":1718},{"class":238,"line":1717},15,[1719],{"type":33,"tag":236,"props":1720,"children":1721},{"style":259},[1722],{"type":38,"value":1607},{"type":33,"tag":236,"props":1724,"children":1726},{"class":238,"line":1725},16,[1727,1731],{"type":33,"tag":236,"props":1728,"children":1729},{"style":253},[1730],{"type":38,"value":392},{"type":33,"tag":236,"props":1732,"children":1733},{"style":259},[1734],{"type":38,"value":397},{"type":33,"tag":236,"props":1736,"children":1738},{"class":238,"line":1737},17,[1739,1743,1748,1753,1757,1762,1767],{"type":33,"tag":236,"props":1740,"children":1741},{"style":259},[1742],{"type":38,"value":406},{"type":33,"tag":236,"props":1744,"children":1745},{"style":443},[1746],{"type":38,"value":1747},"Suspense",{"type":33,"tag":236,"props":1749,"children":1750},{"style":336},[1751],{"type":38,"value":1752}," fallback",{"type":33,"tag":236,"props":1754,"children":1755},{"style":253},[1756],{"type":38,"value":422},{"type":33,"tag":236,"props":1758,"children":1759},{"style":259},[1760],{"type":38,"value":1761},"{\u003C",{"type":33,"tag":236,"props":1763,"children":1764},{"style":443},[1765],{"type":38,"value":1766},"ProductGridSkeleton",{"type":33,"tag":236,"props":1768,"children":1769},{"style":259},[1770],{"type":38,"value":1771}," \u002F>}>\n",{"type":33,"tag":236,"props":1773,"children":1775},{"class":238,"line":1774},18,[1776,1780,1785,1790,1794],{"type":33,"tag":236,"props":1777,"children":1778},{"style":259},[1779],{"type":38,"value":440},{"type":33,"tag":236,"props":1781,"children":1782},{"style":443},[1783],{"type":38,"value":1784},"Await",{"type":33,"tag":236,"props":1786,"children":1787},{"style":336},[1788],{"type":38,"value":1789}," resolve",{"type":33,"tag":236,"props":1791,"children":1792},{"style":253},[1793],{"type":38,"value":422},{"type":33,"tag":236,"props":1795,"children":1796},{"style":259},[1797],{"type":38,"value":1798},"{products}>\n",{"type":33,"tag":236,"props":1800,"children":1802},{"class":238,"line":1801},19,[1803,1808,1813,1818,1823,1828,1833,1838,1842],{"type":33,"tag":236,"props":1804,"children":1805},{"style":259},[1806],{"type":38,"value":1807},"        {(",{"type":33,"tag":236,"props":1809,"children":1810},{"style":347},[1811],{"type":38,"value":1812},"data",{"type":33,"tag":236,"props":1814,"children":1815},{"style":259},[1816],{"type":38,"value":1817},") ",{"type":33,"tag":236,"props":1819,"children":1820},{"style":253},[1821],{"type":38,"value":1822},"=>",{"type":33,"tag":236,"props":1824,"children":1825},{"style":259},[1826],{"type":38,"value":1827}," \u003C",{"type":33,"tag":236,"props":1829,"children":1830},{"style":443},[1831],{"type":38,"value":1832},"ProductGrid",{"type":33,"tag":236,"props":1834,"children":1835},{"style":336},[1836],{"type":38,"value":1837}," products",{"type":33,"tag":236,"props":1839,"children":1840},{"style":253},[1841],{"type":38,"value":422},{"type":33,"tag":236,"props":1843,"children":1844},{"style":259},[1845],{"type":38,"value":1846},"{data.products} \u002F>}\n",{"type":33,"tag":236,"props":1848,"children":1850},{"class":238,"line":1849},20,[1851,1856,1860],{"type":33,"tag":236,"props":1852,"children":1853},{"style":259},[1854],{"type":38,"value":1855},"      \u003C\u002F",{"type":33,"tag":236,"props":1857,"children":1858},{"style":443},[1859],{"type":38,"value":1784},{"type":33,"tag":236,"props":1861,"children":1862},{"style":259},[1863],{"type":38,"value":432},{"type":33,"tag":236,"props":1865,"children":1867},{"class":238,"line":1866},21,[1868,1872,1876],{"type":33,"tag":236,"props":1869,"children":1870},{"style":259},[1871],{"type":38,"value":539},{"type":33,"tag":236,"props":1873,"children":1874},{"style":443},[1875],{"type":38,"value":1747},{"type":33,"tag":236,"props":1877,"children":1878},{"style":259},[1879],{"type":38,"value":432},{"type":33,"tag":236,"props":1881,"children":1883},{"class":238,"line":1882},22,[1884],{"type":33,"tag":236,"props":1885,"children":1886},{"style":259},[1887],{"type":38,"value":556},{"type":33,"tag":236,"props":1889,"children":1891},{"class":238,"line":1890},23,[1892],{"type":33,"tag":236,"props":1893,"children":1894},{"style":259},[1895],{"type":38,"value":565},{"type":33,"tag":34,"props":1897,"children":1898},{},[1899],{"type":38,"value":1900},"Ce pattern envoie le HTML above-fold immédiatement et hydrate côté client — la baisse de LCP de 2.6s à 1.9s vient de là.",{"type":33,"tag":41,"props":1902,"children":1904},{"id":1903},"matrice-de-décision-quel-choix-selon-la-situation",[1905],{"type":38,"value":1906},"Matrice de Décision : Quel Choix Selon la Situation",{"type":33,"tag":34,"props":1908,"children":1909},{},[1910],{"type":38,"value":1911},"Notre arbre de décision :",{"type":33,"tag":34,"props":1913,"children":1914},{},[1915],{"type":33,"tag":56,"props":1916,"children":1917},{},[1918],{"type":38,"value":1919},"Choisis Liquid si :",{"type":33,"tag":1921,"props":1922,"children":1923},"ul",{},[1924,1929,1934,1939],{"type":33,"tag":144,"props":1925,"children":1926},{},[1927],{"type":38,"value":1928},"GMV annuel \u003C$2M",{"type":33,"tag":144,"props":1930,"children":1931},{},[1932],{"type":38,"value":1933},"Nombre de déploiements mensuels \u003C4",{"type":33,"tag":144,"props":1935,"children":1936},{},[1937],{"type":38,"value":1938},"Pas besoin de personnalisation",{"type":33,"tag":144,"props":1940,"children":1941},{},[1942],{"type":38,"value":1943},"L'équipe existante développe des thèmes Shopify",{"type":33,"tag":34,"props":1945,"children":1946},{},[1947],{"type":33,"tag":56,"props":1948,"children":1949},{},[1950],{"type":38,"value":1951},"Choisis Hydrogen si :",{"type":33,"tag":1921,"props":1953,"children":1954},{},[1955,1960,1965,1970],{"type":33,"tag":144,"props":1956,"children":1957},{},[1958],{"type":38,"value":1959},"GMV annuel >$5M",{"type":33,"tag":144,"props":1961,"children":1962},{},[1963],{"type":38,"value":1964},"2+ déploiements de features par semaine",{"type":33,"tag":144,"props":1966,"children":1967},{},[1968],{"type":38,"value":1969},"A\u002FB test, personnalisation, intégration CMS headless",{"type":33,"tag":144,"props":1971,"children":1972},{},[1973],{"type":38,"value":1974},"Tu peux investir dans la modernisation de la stack frontend",{"type":33,"tag":34,"props":1976,"children":1977},{},[1978],{"type":38,"value":1979},"Zone grise ($2-5M GMV) : examine tes métriques conversion rate, AOV, repeat purchase. Si ta roadmap CRO est agressive, passe à Hydrogen — la différence de vélocité dev produit du ROI.",{"type":33,"tag":41,"props":1981,"children":1983},{"id":1982},"conclusion-accepter-les-tradeoffs",[1984],{"type":38,"value":1985},"Conclusion : Accepter les Tradeoffs",{"type":33,"tag":34,"props":1987,"children":1988},{},[1989,1991,1996,1998,2003],{"type":38,"value":1990},"Hydrogen est ",{"type":33,"tag":56,"props":1992,"children":1993},{},[1994],{"type":38,"value":1995},"35-40% plus rapide",{"type":38,"value":1997}," que Liquid (TTFB, LCP), la vélocité développeur est ",{"type":33,"tag":56,"props":1999,"children":2000},{},[2001],{"type":38,"value":2002},"3-5x supérieure",{"type":38,"value":2004},", mais le coût de migration est 120-600 heures. Tu rentabilises cet investissement selon ta vélocité opérationnelle.",{"type":33,"tag":34,"props":2006,"children":2007},{},[2008],{"type":38,"value":2009},"Notre expérience client : un site e-commerce moyen récupère son ROI Hydrogen en 6-9 mois — la vitesse d'itération CRO augmente, le cycle de test A\u002FB raccourcit, l'intégration tiers s'accélère. Si tu vises une croissance rapide, la migration Hydrogen est soutenue par les chiffres. Si tu publie un catalogue statique, Liquid suffit.",{"type":33,"tag":2011,"props":2012,"children":2013},"style",{},[2014],{"type":38,"value":2015},"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":17,"searchDepth":281,"depth":281,"links":2017},[2018,2021,2022,2025,2026,2027,2028],{"id":43,"depth":249,"text":46,"children":2019},[2020],{"id":130,"depth":281,"text":133},{"id":178,"depth":249,"text":181},{"id":634,"depth":249,"text":637,"children":2023},[2024],{"id":792,"depth":281,"text":795},{"id":1130,"depth":249,"text":1133},{"id":1256,"depth":249,"text":1259},{"id":1903,"depth":249,"text":1906},{"id":1982,"depth":249,"text":1985},"markdown","content:fr:tech:hydrogen-vs-liquid-shopify-decision-data.md","content","fr\u002Ftech\u002Fhydrogen-vs-liquid-shopify-decision-data.md","fr\u002Ftech\u002Fhydrogen-vs-liquid-shopify-decision-data","md",1785967483702]