[{"data":1,"prerenderedAt":2865},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fcomposants-serveur-vs-client-tracer-la-bonne-ligne-en-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-07",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-komponenten-vs-client-2026-die-richtige-grenzziehung","\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-right-line-in-2026","\u002Fes\u002Ftech\u002Fserver-components-vs-client-dibujar-la-linea-correcta-en-2026","\u002Ffr\u002Ftech\u002Fserver-components-vs-client-2026-tracer-la-bonne-ligne","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026-il-giusto-equilibrio","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026-drawing-the-line","\u002Ftr\u002Ftech\u002Fserver-components-vs-client-2026da-dogru-cizgiyi-cizmek",{"_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":2859,"_id":2860,"_source":2861,"_file":2862,"_stem":2863,"_extension":2864},"\u002Ffr\u002Ftech\u002Fcomposants-serveur-vs-client-tracer-la-bonne-ligne-en-2026","tech",false,"","Composants serveur vs client : tracer la bonne ligne en 2026","Où tracer la ligne entre React Server Components et le rendu côté client ? Guide concret basé sur les coûts d'hydratation, la taille du bundle et les compromis runtime.","2026-07-21",[22,23,24,25,26],"react-server-components","hydratation","vue-3-5","performance-web","headless-commerce",8,"Roibase",{"type":30,"children":31,"toc":2847},"root",[32,48,55,60,65,172,177,184,206,682,694,700,728,737,757,765,778,783,799,807,812,818,831,836,1615,1627,1633,1638,1643,1708,1713,1942,1961,1967,1972,1977,2055,2060,2066,2071,2115,2120,2269,2282,2288,2293,2789,2794,2822,2827,2841],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37,40,46],{"type":38,"value":39},"text","Les React Server Components sont passés en production en 2024. Vue 3.5 a stabilisé les hooks de transition en 2025. En 2026, les questions restent identiques : quel composant rendre sur le serveur, lequel rendre côté client ? Votre storefront Shopify doit-il utiliser RSC pour la grille de produits, ou un composant Vue Vapor ? La réponse « ça dépend du contexte » est vraie, mais comment mesurer ce contexte ? Cet article propose un framework qui quantifie le coût d'hydratation, la taille du bundle et la latence d'interactivité — pour décider sur la base d'",{"type":33,"tag":41,"props":42,"children":43},"em",{},[44],{"type":38,"value":45},"attribution",{"type":38,"value":47}," plutôt que de conjectures.",{"type":33,"tag":49,"props":50,"children":52},"h2",{"id":51},"coût-dhydratation-les-vrais-chiffres",[53],{"type":38,"value":54},"Coût d'hydratation : les vrais chiffres",{"type":33,"tag":34,"props":56,"children":57},{},[58],{"type":38,"value":59},"L'hydratation transforme le HTML rendu côté serveur en interface interactive côté client via JavaScript. Avant Vue 3.5, le coût moyen était de 200 à 800 ms (Chrome 120, Android mid-range). Avec React 18 et Suspense, l'hydratation en chunks réduit ce chiffre à 100–400 ms, mais jamais à zéro. Avec Next.js 15 et App Router utilisant RSC, les pages voient leur bundle client diminuer de 40 à 60 % — le coût d'hydratation suit linéairement.",{"type":33,"tag":34,"props":61,"children":62},{},[63],{"type":38,"value":64},"Les chiffres que nous avons observés chez Roibase dans les projets Shopify :",{"type":33,"tag":66,"props":67,"children":68},"table",{},[69,98],{"type":33,"tag":70,"props":71,"children":72},"thead",{},[73],{"type":33,"tag":74,"props":75,"children":76},"tr",{},[77,83,88,93],{"type":33,"tag":78,"props":79,"children":80},"th",{},[81],{"type":38,"value":82},"Scénario",{"type":33,"tag":78,"props":84,"children":85},{},[86],{"type":38,"value":87},"Taille du bundle",{"type":33,"tag":78,"props":89,"children":90},{},[91],{"type":38,"value":92},"Hydratation (P75)",{"type":33,"tag":78,"props":94,"children":95},{},[96],{"type":38,"value":97},"TBT (P75)",{"type":33,"tag":99,"props":100,"children":101},"tbody",{},[102,126,149],{"type":33,"tag":74,"props":103,"children":104},{},[105,111,116,121],{"type":33,"tag":106,"props":107,"children":108},"td",{},[109],{"type":38,"value":110},"CSR complet (Vue 3.4)",{"type":33,"tag":106,"props":112,"children":113},{},[114],{"type":38,"value":115},"240 kb",{"type":33,"tag":106,"props":117,"children":118},{},[119],{"type":38,"value":120},"680 ms",{"type":33,"tag":106,"props":122,"children":123},{},[124],{"type":38,"value":125},"1200 ms",{"type":33,"tag":74,"props":127,"children":128},{},[129,134,139,144],{"type":33,"tag":106,"props":130,"children":131},{},[132],{"type":38,"value":133},"SSR partiel + hydratation",{"type":33,"tag":106,"props":135,"children":136},{},[137],{"type":38,"value":138},"180 kb",{"type":33,"tag":106,"props":140,"children":141},{},[142],{"type":38,"value":143},"420 ms",{"type":33,"tag":106,"props":145,"children":146},{},[147],{"type":38,"value":148},"800 ms",{"type":33,"tag":74,"props":150,"children":151},{},[152,157,162,167],{"type":33,"tag":106,"props":153,"children":154},{},[155],{"type":38,"value":156},"RSC + client minimal",{"type":33,"tag":106,"props":158,"children":159},{},[160],{"type":38,"value":161},"95 kb",{"type":33,"tag":106,"props":163,"children":164},{},[165],{"type":38,"value":166},"140 ms",{"type":33,"tag":106,"props":168,"children":169},{},[170],{"type":38,"value":171},"220 ms",{"type":33,"tag":34,"props":173,"children":174},{},[175],{"type":38,"value":176},"Ce tableau repose sur des données de terrain (Moto G Power, 4 Go RAM). Une page de listage de produits en CSR complet bloque le thread principal pendant 680 ms lors de l'hydratation — l'utilisateur clique sur un filtre mais l'interface ne répond pas. Avec RSC, les cartes de produits sont rendues côté serveur, seul le composant de filtre interactif est envoyé au client : l'hydratation tombe à 140 ms, TBT à 220 ms.",{"type":33,"tag":178,"props":179,"children":181},"h3",{"id":180},"hydratation-sélective-avec-les-hooks-de-transition-de-vue-35",[182],{"type":38,"value":183},"Hydratation sélective avec les hooks de transition de Vue 3.5",{"type":33,"tag":34,"props":185,"children":186},{},[187,189,196,198,204],{"type":38,"value":188},"Vue 3.5 a stabilisé ",{"type":33,"tag":190,"props":191,"children":193},"code",{"className":192},[],[194],{"type":38,"value":195},"onBeforeMount",{"type":38,"value":197}," et ",{"type":33,"tag":190,"props":199,"children":201},{"className":200},[],[202],{"type":38,"value":203},"onServerPrefetch",{"type":38,"value":205},". Cela permet de séparer la partie du composant rendue côté serveur de celle hydratée côté client :",{"type":33,"tag":207,"props":208,"children":212},"pre",{"code":209,"language":210,"meta":17,"className":211,"style":17},"\u003Cscript setup>\nimport { ref, onServerPrefetch, onBeforeMount } from 'vue'\n\nconst products = ref([])\nconst isClient = ref(false)\n\n\u002F\u002F S'exécute côté serveur, ignoré côté client\nonServerPrefetch(async () => {\n  products.value = await fetchProducts()\n})\n\n\u002F\u002F S'exécute côté client, ignoré côté serveur\nonBeforeMount(() => {\n  isClient.value = true\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Contenu statique non hydraté -->\n    \u003CProductGrid :products=\"products\" \u002F>\n    \n    \u003C!-- Composant interactif chargé uniquement côté client -->\n    \u003CFilterPanel v-if=\"isClient\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","language-vue shiki shiki-themes github-dark",[213],{"type":33,"tag":190,"props":214,"children":215},{"__ignoreMap":17},[216,245,271,281,311,347,355,365,396,425,434,442,451,472,490,498,515,523,540,558,567,600,609,618,649,666],{"type":33,"tag":217,"props":218,"children":221},"span",{"class":219,"line":220},"line",1,[222,228,234,240],{"type":33,"tag":217,"props":223,"children":225},{"style":224},"--shiki-default:#E1E4E8",[226],{"type":38,"value":227},"\u003C",{"type":33,"tag":217,"props":229,"children":231},{"style":230},"--shiki-default:#85E89D",[232],{"type":38,"value":233},"script",{"type":33,"tag":217,"props":235,"children":237},{"style":236},"--shiki-default:#B392F0",[238],{"type":38,"value":239}," setup",{"type":33,"tag":217,"props":241,"children":242},{"style":224},[243],{"type":38,"value":244},">\n",{"type":33,"tag":217,"props":246,"children":248},{"class":219,"line":247},2,[249,255,260,265],{"type":33,"tag":217,"props":250,"children":252},{"style":251},"--shiki-default:#F97583",[253],{"type":38,"value":254},"import",{"type":33,"tag":217,"props":256,"children":257},{"style":224},[258],{"type":38,"value":259}," { ref, onServerPrefetch, onBeforeMount } ",{"type":33,"tag":217,"props":261,"children":262},{"style":251},[263],{"type":38,"value":264},"from",{"type":33,"tag":217,"props":266,"children":268},{"style":267},"--shiki-default:#9ECBFF",[269],{"type":38,"value":270}," 'vue'\n",{"type":33,"tag":217,"props":272,"children":274},{"class":219,"line":273},3,[275],{"type":33,"tag":217,"props":276,"children":278},{"emptyLinePlaceholder":277},true,[279],{"type":38,"value":280},"\n",{"type":33,"tag":217,"props":282,"children":284},{"class":219,"line":283},4,[285,290,296,301,306],{"type":33,"tag":217,"props":286,"children":287},{"style":251},[288],{"type":38,"value":289},"const",{"type":33,"tag":217,"props":291,"children":293},{"style":292},"--shiki-default:#79B8FF",[294],{"type":38,"value":295}," products",{"type":33,"tag":217,"props":297,"children":298},{"style":251},[299],{"type":38,"value":300}," =",{"type":33,"tag":217,"props":302,"children":303},{"style":236},[304],{"type":38,"value":305}," ref",{"type":33,"tag":217,"props":307,"children":308},{"style":224},[309],{"type":38,"value":310},"([])\n",{"type":33,"tag":217,"props":312,"children":314},{"class":219,"line":313},5,[315,319,324,328,332,337,342],{"type":33,"tag":217,"props":316,"children":317},{"style":251},[318],{"type":38,"value":289},{"type":33,"tag":217,"props":320,"children":321},{"style":292},[322],{"type":38,"value":323}," isClient",{"type":33,"tag":217,"props":325,"children":326},{"style":251},[327],{"type":38,"value":300},{"type":33,"tag":217,"props":329,"children":330},{"style":236},[331],{"type":38,"value":305},{"type":33,"tag":217,"props":333,"children":334},{"style":224},[335],{"type":38,"value":336},"(",{"type":33,"tag":217,"props":338,"children":339},{"style":292},[340],{"type":38,"value":341},"false",{"type":33,"tag":217,"props":343,"children":344},{"style":224},[345],{"type":38,"value":346},")\n",{"type":33,"tag":217,"props":348,"children":350},{"class":219,"line":349},6,[351],{"type":33,"tag":217,"props":352,"children":353},{"emptyLinePlaceholder":277},[354],{"type":38,"value":280},{"type":33,"tag":217,"props":356,"children":358},{"class":219,"line":357},7,[359],{"type":33,"tag":217,"props":360,"children":362},{"style":361},"--shiki-default:#6A737D",[363],{"type":38,"value":364},"\u002F\u002F S'exécute côté serveur, ignoré côté client\n",{"type":33,"tag":217,"props":366,"children":367},{"class":219,"line":27},[368,372,376,381,386,391],{"type":33,"tag":217,"props":369,"children":370},{"style":236},[371],{"type":38,"value":203},{"type":33,"tag":217,"props":373,"children":374},{"style":224},[375],{"type":38,"value":336},{"type":33,"tag":217,"props":377,"children":378},{"style":251},[379],{"type":38,"value":380},"async",{"type":33,"tag":217,"props":382,"children":383},{"style":224},[384],{"type":38,"value":385}," () ",{"type":33,"tag":217,"props":387,"children":388},{"style":251},[389],{"type":38,"value":390},"=>",{"type":33,"tag":217,"props":392,"children":393},{"style":224},[394],{"type":38,"value":395}," {\n",{"type":33,"tag":217,"props":397,"children":399},{"class":219,"line":398},9,[400,405,410,415,420],{"type":33,"tag":217,"props":401,"children":402},{"style":224},[403],{"type":38,"value":404},"  products.value ",{"type":33,"tag":217,"props":406,"children":407},{"style":251},[408],{"type":38,"value":409},"=",{"type":33,"tag":217,"props":411,"children":412},{"style":251},[413],{"type":38,"value":414}," await",{"type":33,"tag":217,"props":416,"children":417},{"style":236},[418],{"type":38,"value":419}," fetchProducts",{"type":33,"tag":217,"props":421,"children":422},{"style":224},[423],{"type":38,"value":424},"()\n",{"type":33,"tag":217,"props":426,"children":428},{"class":219,"line":427},10,[429],{"type":33,"tag":217,"props":430,"children":431},{"style":224},[432],{"type":38,"value":433},"})\n",{"type":33,"tag":217,"props":435,"children":437},{"class":219,"line":436},11,[438],{"type":33,"tag":217,"props":439,"children":440},{"emptyLinePlaceholder":277},[441],{"type":38,"value":280},{"type":33,"tag":217,"props":443,"children":445},{"class":219,"line":444},12,[446],{"type":33,"tag":217,"props":447,"children":448},{"style":361},[449],{"type":38,"value":450},"\u002F\u002F S'exécute côté client, ignoré côté serveur\n",{"type":33,"tag":217,"props":452,"children":454},{"class":219,"line":453},13,[455,459,464,468],{"type":33,"tag":217,"props":456,"children":457},{"style":236},[458],{"type":38,"value":195},{"type":33,"tag":217,"props":460,"children":461},{"style":224},[462],{"type":38,"value":463},"(() ",{"type":33,"tag":217,"props":465,"children":466},{"style":251},[467],{"type":38,"value":390},{"type":33,"tag":217,"props":469,"children":470},{"style":224},[471],{"type":38,"value":395},{"type":33,"tag":217,"props":473,"children":475},{"class":219,"line":474},14,[476,481,485],{"type":33,"tag":217,"props":477,"children":478},{"style":224},[479],{"type":38,"value":480},"  isClient.value ",{"type":33,"tag":217,"props":482,"children":483},{"style":251},[484],{"type":38,"value":409},{"type":33,"tag":217,"props":486,"children":487},{"style":292},[488],{"type":38,"value":489}," true\n",{"type":33,"tag":217,"props":491,"children":493},{"class":219,"line":492},15,[494],{"type":33,"tag":217,"props":495,"children":496},{"style":224},[497],{"type":38,"value":433},{"type":33,"tag":217,"props":499,"children":501},{"class":219,"line":500},16,[502,507,511],{"type":33,"tag":217,"props":503,"children":504},{"style":224},[505],{"type":38,"value":506},"\u003C\u002F",{"type":33,"tag":217,"props":508,"children":509},{"style":230},[510],{"type":38,"value":233},{"type":33,"tag":217,"props":512,"children":513},{"style":224},[514],{"type":38,"value":244},{"type":33,"tag":217,"props":516,"children":518},{"class":219,"line":517},17,[519],{"type":33,"tag":217,"props":520,"children":521},{"emptyLinePlaceholder":277},[522],{"type":38,"value":280},{"type":33,"tag":217,"props":524,"children":526},{"class":219,"line":525},18,[527,531,536],{"type":33,"tag":217,"props":528,"children":529},{"style":224},[530],{"type":38,"value":227},{"type":33,"tag":217,"props":532,"children":533},{"style":230},[534],{"type":38,"value":535},"template",{"type":33,"tag":217,"props":537,"children":538},{"style":224},[539],{"type":38,"value":244},{"type":33,"tag":217,"props":541,"children":543},{"class":219,"line":542},19,[544,549,554],{"type":33,"tag":217,"props":545,"children":546},{"style":224},[547],{"type":38,"value":548},"  \u003C",{"type":33,"tag":217,"props":550,"children":551},{"style":230},[552],{"type":38,"value":553},"div",{"type":33,"tag":217,"props":555,"children":556},{"style":224},[557],{"type":38,"value":244},{"type":33,"tag":217,"props":559,"children":561},{"class":219,"line":560},20,[562],{"type":33,"tag":217,"props":563,"children":564},{"style":361},[565],{"type":38,"value":566},"    \u003C!-- Contenu statique non hydraté -->\n",{"type":33,"tag":217,"props":568,"children":570},{"class":219,"line":569},21,[571,576,581,586,590,595],{"type":33,"tag":217,"props":572,"children":573},{"style":224},[574],{"type":38,"value":575},"    \u003C",{"type":33,"tag":217,"props":577,"children":578},{"style":230},[579],{"type":38,"value":580},"ProductGrid",{"type":33,"tag":217,"props":582,"children":583},{"style":236},[584],{"type":38,"value":585}," :products",{"type":33,"tag":217,"props":587,"children":588},{"style":224},[589],{"type":38,"value":409},{"type":33,"tag":217,"props":591,"children":592},{"style":267},[593],{"type":38,"value":594},"\"products\"",{"type":33,"tag":217,"props":596,"children":597},{"style":224},[598],{"type":38,"value":599}," \u002F>\n",{"type":33,"tag":217,"props":601,"children":603},{"class":219,"line":602},22,[604],{"type":33,"tag":217,"props":605,"children":606},{"style":224},[607],{"type":38,"value":608},"    \n",{"type":33,"tag":217,"props":610,"children":612},{"class":219,"line":611},23,[613],{"type":33,"tag":217,"props":614,"children":615},{"style":361},[616],{"type":38,"value":617},"    \u003C!-- Composant interactif chargé uniquement côté client -->\n",{"type":33,"tag":217,"props":619,"children":621},{"class":219,"line":620},24,[622,626,631,636,640,645],{"type":33,"tag":217,"props":623,"children":624},{"style":224},[625],{"type":38,"value":575},{"type":33,"tag":217,"props":627,"children":628},{"style":230},[629],{"type":38,"value":630},"FilterPanel",{"type":33,"tag":217,"props":632,"children":633},{"style":236},[634],{"type":38,"value":635}," v-if",{"type":33,"tag":217,"props":637,"children":638},{"style":224},[639],{"type":38,"value":409},{"type":33,"tag":217,"props":641,"children":642},{"style":267},[643],{"type":38,"value":644},"\"isClient\"",{"type":33,"tag":217,"props":646,"children":647},{"style":224},[648],{"type":38,"value":599},{"type":33,"tag":217,"props":650,"children":652},{"class":219,"line":651},25,[653,658,662],{"type":33,"tag":217,"props":654,"children":655},{"style":224},[656],{"type":38,"value":657},"  \u003C\u002F",{"type":33,"tag":217,"props":659,"children":660},{"style":230},[661],{"type":38,"value":553},{"type":33,"tag":217,"props":663,"children":664},{"style":224},[665],{"type":38,"value":244},{"type":33,"tag":217,"props":667,"children":669},{"class":219,"line":668},26,[670,674,678],{"type":33,"tag":217,"props":671,"children":672},{"style":224},[673],{"type":38,"value":506},{"type":33,"tag":217,"props":675,"children":676},{"style":230},[677],{"type":38,"value":535},{"type":33,"tag":217,"props":679,"children":680},{"style":224},[681],{"type":38,"value":244},{"type":33,"tag":34,"props":683,"children":684},{},[685,687,692],{"type":38,"value":686},"Ce pattern réduit la taille du bundle de 180 kb à 110 kb — ",{"type":33,"tag":190,"props":688,"children":690},{"className":689},[],[691],{"type":38,"value":630},{"type":38,"value":693}," est chargé en lazy-load. Le coût d'hydratation baisse de 420 ms à 180 ms car seule la partie interactive est hydratée.",{"type":33,"tag":49,"props":695,"children":697},{"id":696},"compromis-entre-taille-du-bundle-et-latence-dinteractivité",[698],{"type":38,"value":699},"Compromis entre taille du bundle et latence d'interactivité",{"type":33,"tag":34,"props":701,"children":702},{},[703,705,711,713,719,720,726],{"type":38,"value":704},"RSC ne résout pas tous les problèmes. Un composant serveur ne peut pas réagir aux actions de l'utilisateur — pas de ",{"type":33,"tag":190,"props":706,"children":708},{"className":707},[],[709],{"type":38,"value":710},"onClick",{"type":38,"value":712},", ",{"type":33,"tag":190,"props":714,"children":716},{"className":715},[],[717],{"type":38,"value":718},"useState",{"type":38,"value":712},{"type":33,"tag":190,"props":721,"children":723},{"className":722},[],[724],{"type":38,"value":725},"useEffect",{"type":38,"value":727},". Si l'utilisateur clique sur un produit pour ouvrir une modale, cette modale doit être un composant client. C'est ici que le compromis apparaît :",{"type":33,"tag":34,"props":729,"children":730},{},[731],{"type":33,"tag":732,"props":733,"children":734},"strong",{},[735],{"type":38,"value":736},"Scénario 1 : carte produit RSC + modale client",{"type":33,"tag":738,"props":739,"children":740},"ul",{},[741,747,752],{"type":33,"tag":742,"props":743,"children":744},"li",{},[745],{"type":38,"value":746},"Bundle initial : 95 kb",{"type":33,"tag":742,"props":748,"children":749},{},[750],{"type":38,"value":751},"Bundle modale (lazy load) : 45 kb",{"type":33,"tag":742,"props":753,"children":754},{},[755],{"type":38,"value":756},"Latence premier clic : 300 ms (téléchargement + parsing de 45 kb)",{"type":33,"tag":34,"props":758,"children":759},{},[760],{"type":33,"tag":732,"props":761,"children":762},{},[763],{"type":38,"value":764},"Scénario 2 : carte + modale en tant que composant client",{"type":33,"tag":738,"props":766,"children":767},{},[768,773],{"type":33,"tag":742,"props":769,"children":770},{},[771],{"type":38,"value":772},"Bundle initial : 185 kb",{"type":33,"tag":742,"props":774,"children":775},{},[776],{"type":38,"value":777},"Latence premier clic : 80 ms (code déjà présent)",{"type":33,"tag":34,"props":779,"children":780},{},[781],{"type":38,"value":782},"Selon notre analyse de conversion e-commerce (étude Roibase 2025) : 78 % des utilisateurs cliquent sur le premier produit dans les 3 secondes. Le scénario 1 pénalise ce premier clic avec 300 ms de délai — la modale ne s'ouvre pas, l'utilisateur reclique, frustration. Le scénario 2 ajoute 90 kb de bundle initial, ce qui se traduit par un coût d'hydratation, mais la latence d'interactivité est nulle.",{"type":33,"tag":34,"props":784,"children":785},{},[786,788,797],{"type":38,"value":787},"Nous avons résolu ce compromis ",{"type":33,"tag":789,"props":790,"children":794},"a",{"href":791,"rel":792},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[793],"nofollow",[795],{"type":38,"value":796},"dans notre architecture headless",{"type":38,"value":798}," en utilisant cette formule :",{"type":33,"tag":207,"props":800,"children":802},{"code":801},"Probabilité premier clic × nombre d'utilisateurs > 60 % → composant client\nSinon → RSC + lazy load\n",[803],{"type":33,"tag":190,"props":804,"children":805},{"__ignoreMap":17},[806],{"type":38,"value":801},{"type":33,"tag":34,"props":808,"children":809},{},[810],{"type":38,"value":811},"Les cartes de produits reçoivent 78 % de clics → composant client. L'accordéon « Options de livraison » reçoit 12 % d'ouvertures → RSC + lazy load.",{"type":33,"tag":49,"props":813,"children":815},{"id":814},"limite-des-composants-serveur-où-tracer-la-ligne",[816],{"type":38,"value":817},"Limite des composants serveur : où tracer la ligne ?",{"type":33,"tag":34,"props":819,"children":820},{},[821,823,829],{"type":38,"value":822},"React Server Components utilisent la directive ",{"type":33,"tag":190,"props":824,"children":826},{"className":825},[],[827],{"type":38,"value":828},"use client",{"type":38,"value":830}," pour définir les limites. Tout ce qui est au-dessus de la limite est rendu côté serveur, tout ce qui est en dessous entre dans le bundle client. Tracer cette limite au mauvais endroit signifie soit envoyer du code client inutile, soit être incapable de gérer l'état côté serveur.",{"type":33,"tag":34,"props":832,"children":833},{},[834],{"type":38,"value":835},"Le pattern que nous avons observé dans les projets Shopify Hydrogen 2.0 :",{"type":33,"tag":207,"props":837,"children":841},{"code":838,"language":839,"meta":17,"className":840,"style":17},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\nexport default function ProductPage({ product }) {\n  return (\n    \u003Cdiv>\n      {\u002F* Composant serveur — données dynamiques mais non-interactif *\u002F}\n      \u003CProductImages images={product.images} \u002F>\n      \u003CProductTitle title={product.title} \u002F>\n      \n      {\u002F* Composant client — formulaire, état, entrée utilisateur *\u002F}\n      \u003CAddToCartForm product={product} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F components\u002FAddToCartForm.tsx\n'use client'\nimport { useState } from 'react'\n\nexport function AddToCartForm({ product }) {\n  const [quantity, setQuantity] = useState(1)\n  const [loading, setLoading] = useState(false)\n\n  async function handleSubmit() {\n    setLoading(true)\n    await addToCart(product.id, quantity)\n    setLoading(false)\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput \n        type=\"number\" \n        value={quantity} \n        onChange={(e) => setQuantity(e.target.value)} \n      \u002F>\n      \u003Cbutton disabled={loading}>\n        {loading ? 'Adding...' : 'Add to Cart'}\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n","tsx","language-tsx shiki shiki-themes github-dark",[842],{"type":33,"tag":190,"props":843,"children":844},{"__ignoreMap":17},[845,853,892,905,920,938,965,991,999,1015,1041,1057,1065,1072,1079,1087,1095,1116,1123,1151,1205,1254,1261,1283,1304,1322,1341,1350,1358,1370,1397,1415,1437,1455,1497,1506,1533,1566,1583,1599,1607],{"type":33,"tag":217,"props":846,"children":847},{"class":219,"line":220},[848],{"type":33,"tag":217,"props":849,"children":850},{"style":361},[851],{"type":38,"value":852},"\u002F\u002F app\u002Froutes\u002Fproducts.$handle.tsx (RSC)\n",{"type":33,"tag":217,"props":854,"children":855},{"class":219,"line":247},[856,861,866,871,876,881,887],{"type":33,"tag":217,"props":857,"children":858},{"style":251},[859],{"type":38,"value":860},"export",{"type":33,"tag":217,"props":862,"children":863},{"style":251},[864],{"type":38,"value":865}," default",{"type":33,"tag":217,"props":867,"children":868},{"style":251},[869],{"type":38,"value":870}," function",{"type":33,"tag":217,"props":872,"children":873},{"style":236},[874],{"type":38,"value":875}," ProductPage",{"type":33,"tag":217,"props":877,"children":878},{"style":224},[879],{"type":38,"value":880},"({ ",{"type":33,"tag":217,"props":882,"children":884},{"style":883},"--shiki-default:#FFAB70",[885],{"type":38,"value":886},"product",{"type":33,"tag":217,"props":888,"children":889},{"style":224},[890],{"type":38,"value":891}," }) {\n",{"type":33,"tag":217,"props":893,"children":894},{"class":219,"line":273},[895,900],{"type":33,"tag":217,"props":896,"children":897},{"style":251},[898],{"type":38,"value":899},"  return",{"type":33,"tag":217,"props":901,"children":902},{"style":224},[903],{"type":38,"value":904}," (\n",{"type":33,"tag":217,"props":906,"children":907},{"class":219,"line":283},[908,912,916],{"type":33,"tag":217,"props":909,"children":910},{"style":224},[911],{"type":38,"value":575},{"type":33,"tag":217,"props":913,"children":914},{"style":230},[915],{"type":38,"value":553},{"type":33,"tag":217,"props":917,"children":918},{"style":224},[919],{"type":38,"value":244},{"type":33,"tag":217,"props":921,"children":922},{"class":219,"line":313},[923,928,933],{"type":33,"tag":217,"props":924,"children":925},{"style":224},[926],{"type":38,"value":927},"      {",{"type":33,"tag":217,"props":929,"children":930},{"style":361},[931],{"type":38,"value":932},"\u002F* Composant serveur — données dynamiques mais non-interactif *\u002F",{"type":33,"tag":217,"props":934,"children":935},{"style":224},[936],{"type":38,"value":937},"}\n",{"type":33,"tag":217,"props":939,"children":940},{"class":219,"line":349},[941,946,951,956,960],{"type":33,"tag":217,"props":942,"children":943},{"style":224},[944],{"type":38,"value":945},"      \u003C",{"type":33,"tag":217,"props":947,"children":948},{"style":292},[949],{"type":38,"value":950},"ProductImages",{"type":33,"tag":217,"props":952,"children":953},{"style":236},[954],{"type":38,"value":955}," images",{"type":33,"tag":217,"props":957,"children":958},{"style":251},[959],{"type":38,"value":409},{"type":33,"tag":217,"props":961,"children":962},{"style":224},[963],{"type":38,"value":964},"{product.images} \u002F>\n",{"type":33,"tag":217,"props":966,"children":967},{"class":219,"line":357},[968,972,977,982,986],{"type":33,"tag":217,"props":969,"children":970},{"style":224},[971],{"type":38,"value":945},{"type":33,"tag":217,"props":973,"children":974},{"style":292},[975],{"type":38,"value":976},"ProductTitle",{"type":33,"tag":217,"props":978,"children":979},{"style":236},[980],{"type":38,"value":981}," title",{"type":33,"tag":217,"props":983,"children":984},{"style":251},[985],{"type":38,"value":409},{"type":33,"tag":217,"props":987,"children":988},{"style":224},[989],{"type":38,"value":990},"{product.title} \u002F>\n",{"type":33,"tag":217,"props":992,"children":993},{"class":219,"line":27},[994],{"type":33,"tag":217,"props":995,"children":996},{"style":224},[997],{"type":38,"value":998},"      \n",{"type":33,"tag":217,"props":1000,"children":1001},{"class":219,"line":398},[1002,1006,1011],{"type":33,"tag":217,"props":1003,"children":1004},{"style":224},[1005],{"type":38,"value":927},{"type":33,"tag":217,"props":1007,"children":1008},{"style":361},[1009],{"type":38,"value":1010},"\u002F* Composant client — formulaire, état, entrée utilisateur *\u002F",{"type":33,"tag":217,"props":1012,"children":1013},{"style":224},[1014],{"type":38,"value":937},{"type":33,"tag":217,"props":1016,"children":1017},{"class":219,"line":427},[1018,1022,1027,1032,1036],{"type":33,"tag":217,"props":1019,"children":1020},{"style":224},[1021],{"type":38,"value":945},{"type":33,"tag":217,"props":1023,"children":1024},{"style":292},[1025],{"type":38,"value":1026},"AddToCartForm",{"type":33,"tag":217,"props":1028,"children":1029},{"style":236},[1030],{"type":38,"value":1031}," product",{"type":33,"tag":217,"props":1033,"children":1034},{"style":251},[1035],{"type":38,"value":409},{"type":33,"tag":217,"props":1037,"children":1038},{"style":224},[1039],{"type":38,"value":1040},"{product} \u002F>\n",{"type":33,"tag":217,"props":1042,"children":1043},{"class":219,"line":436},[1044,1049,1053],{"type":33,"tag":217,"props":1045,"children":1046},{"style":224},[1047],{"type":38,"value":1048},"    \u003C\u002F",{"type":33,"tag":217,"props":1050,"children":1051},{"style":230},[1052],{"type":38,"value":553},{"type":33,"tag":217,"props":1054,"children":1055},{"style":224},[1056],{"type":38,"value":244},{"type":33,"tag":217,"props":1058,"children":1059},{"class":219,"line":444},[1060],{"type":33,"tag":217,"props":1061,"children":1062},{"style":224},[1063],{"type":38,"value":1064},"  )\n",{"type":33,"tag":217,"props":1066,"children":1067},{"class":219,"line":453},[1068],{"type":33,"tag":217,"props":1069,"children":1070},{"style":224},[1071],{"type":38,"value":937},{"type":33,"tag":217,"props":1073,"children":1074},{"class":219,"line":474},[1075],{"type":33,"tag":217,"props":1076,"children":1077},{"emptyLinePlaceholder":277},[1078],{"type":38,"value":280},{"type":33,"tag":217,"props":1080,"children":1081},{"class":219,"line":492},[1082],{"type":33,"tag":217,"props":1083,"children":1084},{"style":361},[1085],{"type":38,"value":1086},"\u002F\u002F components\u002FAddToCartForm.tsx\n",{"type":33,"tag":217,"props":1088,"children":1089},{"class":219,"line":500},[1090],{"type":33,"tag":217,"props":1091,"children":1092},{"style":267},[1093],{"type":38,"value":1094},"'use client'\n",{"type":33,"tag":217,"props":1096,"children":1097},{"class":219,"line":517},[1098,1102,1107,1111],{"type":33,"tag":217,"props":1099,"children":1100},{"style":251},[1101],{"type":38,"value":254},{"type":33,"tag":217,"props":1103,"children":1104},{"style":224},[1105],{"type":38,"value":1106}," { useState } ",{"type":33,"tag":217,"props":1108,"children":1109},{"style":251},[1110],{"type":38,"value":264},{"type":33,"tag":217,"props":1112,"children":1113},{"style":267},[1114],{"type":38,"value":1115}," 'react'\n",{"type":33,"tag":217,"props":1117,"children":1118},{"class":219,"line":525},[1119],{"type":33,"tag":217,"props":1120,"children":1121},{"emptyLinePlaceholder":277},[1122],{"type":38,"value":280},{"type":33,"tag":217,"props":1124,"children":1125},{"class":219,"line":542},[1126,1130,1134,1139,1143,1147],{"type":33,"tag":217,"props":1127,"children":1128},{"style":251},[1129],{"type":38,"value":860},{"type":33,"tag":217,"props":1131,"children":1132},{"style":251},[1133],{"type":38,"value":870},{"type":33,"tag":217,"props":1135,"children":1136},{"style":236},[1137],{"type":38,"value":1138}," AddToCartForm",{"type":33,"tag":217,"props":1140,"children":1141},{"style":224},[1142],{"type":38,"value":880},{"type":33,"tag":217,"props":1144,"children":1145},{"style":883},[1146],{"type":38,"value":886},{"type":33,"tag":217,"props":1148,"children":1149},{"style":224},[1150],{"type":38,"value":891},{"type":33,"tag":217,"props":1152,"children":1153},{"class":219,"line":560},[1154,1159,1164,1169,1173,1178,1183,1187,1192,1196,1201],{"type":33,"tag":217,"props":1155,"children":1156},{"style":251},[1157],{"type":38,"value":1158},"  const",{"type":33,"tag":217,"props":1160,"children":1161},{"style":224},[1162],{"type":38,"value":1163}," [",{"type":33,"tag":217,"props":1165,"children":1166},{"style":292},[1167],{"type":38,"value":1168},"quantity",{"type":33,"tag":217,"props":1170,"children":1171},{"style":224},[1172],{"type":38,"value":712},{"type":33,"tag":217,"props":1174,"children":1175},{"style":292},[1176],{"type":38,"value":1177},"setQuantity",{"type":33,"tag":217,"props":1179,"children":1180},{"style":224},[1181],{"type":38,"value":1182},"] ",{"type":33,"tag":217,"props":1184,"children":1185},{"style":251},[1186],{"type":38,"value":409},{"type":33,"tag":217,"props":1188,"children":1189},{"style":236},[1190],{"type":38,"value":1191}," useState",{"type":33,"tag":217,"props":1193,"children":1194},{"style":224},[1195],{"type":38,"value":336},{"type":33,"tag":217,"props":1197,"children":1198},{"style":292},[1199],{"type":38,"value":1200},"1",{"type":33,"tag":217,"props":1202,"children":1203},{"style":224},[1204],{"type":38,"value":346},{"type":33,"tag":217,"props":1206,"children":1207},{"class":219,"line":569},[1208,1212,1216,1221,1225,1230,1234,1238,1242,1246,1250],{"type":33,"tag":217,"props":1209,"children":1210},{"style":251},[1211],{"type":38,"value":1158},{"type":33,"tag":217,"props":1213,"children":1214},{"style":224},[1215],{"type":38,"value":1163},{"type":33,"tag":217,"props":1217,"children":1218},{"style":292},[1219],{"type":38,"value":1220},"loading",{"type":33,"tag":217,"props":1222,"children":1223},{"style":224},[1224],{"type":38,"value":712},{"type":33,"tag":217,"props":1226,"children":1227},{"style":292},[1228],{"type":38,"value":1229},"setLoading",{"type":33,"tag":217,"props":1231,"children":1232},{"style":224},[1233],{"type":38,"value":1182},{"type":33,"tag":217,"props":1235,"children":1236},{"style":251},[1237],{"type":38,"value":409},{"type":33,"tag":217,"props":1239,"children":1240},{"style":236},[1241],{"type":38,"value":1191},{"type":33,"tag":217,"props":1243,"children":1244},{"style":224},[1245],{"type":38,"value":336},{"type":33,"tag":217,"props":1247,"children":1248},{"style":292},[1249],{"type":38,"value":341},{"type":33,"tag":217,"props":1251,"children":1252},{"style":224},[1253],{"type":38,"value":346},{"type":33,"tag":217,"props":1255,"children":1256},{"class":219,"line":602},[1257],{"type":33,"tag":217,"props":1258,"children":1259},{"emptyLinePlaceholder":277},[1260],{"type":38,"value":280},{"type":33,"tag":217,"props":1262,"children":1263},{"class":219,"line":611},[1264,1269,1273,1278],{"type":33,"tag":217,"props":1265,"children":1266},{"style":251},[1267],{"type":38,"value":1268},"  async",{"type":33,"tag":217,"props":1270,"children":1271},{"style":251},[1272],{"type":38,"value":870},{"type":33,"tag":217,"props":1274,"children":1275},{"style":236},[1276],{"type":38,"value":1277}," handleSubmit",{"type":33,"tag":217,"props":1279,"children":1280},{"style":224},[1281],{"type":38,"value":1282},"() {\n",{"type":33,"tag":217,"props":1284,"children":1285},{"class":219,"line":620},[1286,1291,1295,1300],{"type":33,"tag":217,"props":1287,"children":1288},{"style":236},[1289],{"type":38,"value":1290},"    setLoading",{"type":33,"tag":217,"props":1292,"children":1293},{"style":224},[1294],{"type":38,"value":336},{"type":33,"tag":217,"props":1296,"children":1297},{"style":292},[1298],{"type":38,"value":1299},"true",{"type":33,"tag":217,"props":1301,"children":1302},{"style":224},[1303],{"type":38,"value":346},{"type":33,"tag":217,"props":1305,"children":1306},{"class":219,"line":651},[1307,1312,1317],{"type":33,"tag":217,"props":1308,"children":1309},{"style":251},[1310],{"type":38,"value":1311},"    await",{"type":33,"tag":217,"props":1313,"children":1314},{"style":236},[1315],{"type":38,"value":1316}," addToCart",{"type":33,"tag":217,"props":1318,"children":1319},{"style":224},[1320],{"type":38,"value":1321},"(product.id, quantity)\n",{"type":33,"tag":217,"props":1323,"children":1324},{"class":219,"line":668},[1325,1329,1333,1337],{"type":33,"tag":217,"props":1326,"children":1327},{"style":236},[1328],{"type":38,"value":1290},{"type":33,"tag":217,"props":1330,"children":1331},{"style":224},[1332],{"type":38,"value":336},{"type":33,"tag":217,"props":1334,"children":1335},{"style":292},[1336],{"type":38,"value":341},{"type":33,"tag":217,"props":1338,"children":1339},{"style":224},[1340],{"type":38,"value":346},{"type":33,"tag":217,"props":1342,"children":1344},{"class":219,"line":1343},27,[1345],{"type":33,"tag":217,"props":1346,"children":1347},{"style":224},[1348],{"type":38,"value":1349},"  }\n",{"type":33,"tag":217,"props":1351,"children":1353},{"class":219,"line":1352},28,[1354],{"type":33,"tag":217,"props":1355,"children":1356},{"emptyLinePlaceholder":277},[1357],{"type":38,"value":280},{"type":33,"tag":217,"props":1359,"children":1361},{"class":219,"line":1360},29,[1362,1366],{"type":33,"tag":217,"props":1363,"children":1364},{"style":251},[1365],{"type":38,"value":899},{"type":33,"tag":217,"props":1367,"children":1368},{"style":224},[1369],{"type":38,"value":904},{"type":33,"tag":217,"props":1371,"children":1373},{"class":219,"line":1372},30,[1374,1378,1383,1388,1392],{"type":33,"tag":217,"props":1375,"children":1376},{"style":224},[1377],{"type":38,"value":575},{"type":33,"tag":217,"props":1379,"children":1380},{"style":230},[1381],{"type":38,"value":1382},"form",{"type":33,"tag":217,"props":1384,"children":1385},{"style":236},[1386],{"type":38,"value":1387}," onSubmit",{"type":33,"tag":217,"props":1389,"children":1390},{"style":251},[1391],{"type":38,"value":409},{"type":33,"tag":217,"props":1393,"children":1394},{"style":224},[1395],{"type":38,"value":1396},"{handleSubmit}>\n",{"type":33,"tag":217,"props":1398,"children":1400},{"class":219,"line":1399},31,[1401,1405,1410],{"type":33,"tag":217,"props":1402,"children":1403},{"style":224},[1404],{"type":38,"value":945},{"type":33,"tag":217,"props":1406,"children":1407},{"style":230},[1408],{"type":38,"value":1409},"input",{"type":33,"tag":217,"props":1411,"children":1412},{"style":224},[1413],{"type":38,"value":1414}," \n",{"type":33,"tag":217,"props":1416,"children":1418},{"class":219,"line":1417},32,[1419,1424,1428,1433],{"type":33,"tag":217,"props":1420,"children":1421},{"style":236},[1422],{"type":38,"value":1423},"        type",{"type":33,"tag":217,"props":1425,"children":1426},{"style":251},[1427],{"type":38,"value":409},{"type":33,"tag":217,"props":1429,"children":1430},{"style":267},[1431],{"type":38,"value":1432},"\"number\"",{"type":33,"tag":217,"props":1434,"children":1435},{"style":224},[1436],{"type":38,"value":1414},{"type":33,"tag":217,"props":1438,"children":1440},{"class":219,"line":1439},33,[1441,1446,1450],{"type":33,"tag":217,"props":1442,"children":1443},{"style":236},[1444],{"type":38,"value":1445},"        value",{"type":33,"tag":217,"props":1447,"children":1448},{"style":251},[1449],{"type":38,"value":409},{"type":33,"tag":217,"props":1451,"children":1452},{"style":224},[1453],{"type":38,"value":1454},"{quantity} \n",{"type":33,"tag":217,"props":1456,"children":1458},{"class":219,"line":1457},34,[1459,1464,1468,1473,1478,1483,1487,1492],{"type":33,"tag":217,"props":1460,"children":1461},{"style":236},[1462],{"type":38,"value":1463},"        onChange",{"type":33,"tag":217,"props":1465,"children":1466},{"style":251},[1467],{"type":38,"value":409},{"type":33,"tag":217,"props":1469,"children":1470},{"style":224},[1471],{"type":38,"value":1472},"{(",{"type":33,"tag":217,"props":1474,"children":1475},{"style":883},[1476],{"type":38,"value":1477},"e",{"type":33,"tag":217,"props":1479,"children":1480},{"style":224},[1481],{"type":38,"value":1482},") ",{"type":33,"tag":217,"props":1484,"children":1485},{"style":251},[1486],{"type":38,"value":390},{"type":33,"tag":217,"props":1488,"children":1489},{"style":236},[1490],{"type":38,"value":1491}," setQuantity",{"type":33,"tag":217,"props":1493,"children":1494},{"style":224},[1495],{"type":38,"value":1496},"(e.target.value)} \n",{"type":33,"tag":217,"props":1498,"children":1500},{"class":219,"line":1499},35,[1501],{"type":33,"tag":217,"props":1502,"children":1503},{"style":224},[1504],{"type":38,"value":1505},"      \u002F>\n",{"type":33,"tag":217,"props":1507,"children":1509},{"class":219,"line":1508},36,[1510,1514,1519,1524,1528],{"type":33,"tag":217,"props":1511,"children":1512},{"style":224},[1513],{"type":38,"value":945},{"type":33,"tag":217,"props":1515,"children":1516},{"style":230},[1517],{"type":38,"value":1518},"button",{"type":33,"tag":217,"props":1520,"children":1521},{"style":236},[1522],{"type":38,"value":1523}," disabled",{"type":33,"tag":217,"props":1525,"children":1526},{"style":251},[1527],{"type":38,"value":409},{"type":33,"tag":217,"props":1529,"children":1530},{"style":224},[1531],{"type":38,"value":1532},"{loading}>\n",{"type":33,"tag":217,"props":1534,"children":1536},{"class":219,"line":1535},37,[1537,1542,1547,1552,1557,1562],{"type":33,"tag":217,"props":1538,"children":1539},{"style":224},[1540],{"type":38,"value":1541},"        {loading ",{"type":33,"tag":217,"props":1543,"children":1544},{"style":251},[1545],{"type":38,"value":1546},"?",{"type":33,"tag":217,"props":1548,"children":1549},{"style":267},[1550],{"type":38,"value":1551}," 'Adding...'",{"type":33,"tag":217,"props":1553,"children":1554},{"style":251},[1555],{"type":38,"value":1556}," :",{"type":33,"tag":217,"props":1558,"children":1559},{"style":267},[1560],{"type":38,"value":1561}," 'Add to Cart'",{"type":33,"tag":217,"props":1563,"children":1564},{"style":224},[1565],{"type":38,"value":937},{"type":33,"tag":217,"props":1567,"children":1569},{"class":219,"line":1568},38,[1570,1575,1579],{"type":33,"tag":217,"props":1571,"children":1572},{"style":224},[1573],{"type":38,"value":1574},"      \u003C\u002F",{"type":33,"tag":217,"props":1576,"children":1577},{"style":230},[1578],{"type":38,"value":1518},{"type":33,"tag":217,"props":1580,"children":1581},{"style":224},[1582],{"type":38,"value":244},{"type":33,"tag":217,"props":1584,"children":1586},{"class":219,"line":1585},39,[1587,1591,1595],{"type":33,"tag":217,"props":1588,"children":1589},{"style":224},[1590],{"type":38,"value":1048},{"type":33,"tag":217,"props":1592,"children":1593},{"style":230},[1594],{"type":38,"value":1382},{"type":33,"tag":217,"props":1596,"children":1597},{"style":224},[1598],{"type":38,"value":244},{"type":33,"tag":217,"props":1600,"children":1602},{"class":219,"line":1601},40,[1603],{"type":33,"tag":217,"props":1604,"children":1605},{"style":224},[1606],{"type":38,"value":1064},{"type":33,"tag":217,"props":1608,"children":1610},{"class":219,"line":1609},41,[1611],{"type":33,"tag":217,"props":1612,"children":1613},{"style":224},[1614],{"type":38,"value":937},{"type":33,"tag":34,"props":1616,"children":1617},{},[1618,1620,1625],{"type":38,"value":1619},"La limite se situe au-dessus de ",{"type":33,"tag":190,"props":1621,"children":1623},{"className":1622},[],[1624],{"type":38,"value":1026},{"type":38,"value":1626},". Les images et le titre du produit sont rendus côté serveur — HTML compatible SEO, zéro JavaScript client. Le formulaire est interactif, donc composant client. Impact sur la taille du bundle : seule la logique du formulaire + les gestionnaires d'événements React vont au client, environ 8 kb. Si vous aviez rendu l'ensemble de la page comme composant client, le bundle aurait pesé 120 kb — un écart de 15×.",{"type":33,"tag":178,"props":1628,"children":1630},{"id":1629},"règle-de-non-imbrication",[1631],{"type":38,"value":1632},"Règle de non-imbrication",{"type":33,"tag":34,"props":1634,"children":1635},{},[1636],{"type":38,"value":1637},"L'erreur courante avec RSC : imbriquer un composant serveur à l'intérieur d'un composant client. React l'interdit — tout ce qui se trouve sous un composant client est inclus dans le bundle client. Solution : utiliser le pattern de composition.",{"type":33,"tag":34,"props":1639,"children":1640},{},[1641],{"type":38,"value":1642},"❌ Incorrect :",{"type":33,"tag":207,"props":1644,"children":1646},{"code":1645,"language":839,"meta":17,"className":840,"style":17},"'use client'\nfunction ClientWrapper() {\n  return \u003CServerComponent \u002F> \u002F\u002F Erreur : RSC ne peut pas être à l'intérieur d'un composant client\n}\n",[1647],{"type":33,"tag":190,"props":1648,"children":1649},{"__ignoreMap":17},[1650,1657,1674,1701],{"type":33,"tag":217,"props":1651,"children":1652},{"class":219,"line":220},[1653],{"type":33,"tag":217,"props":1654,"children":1655},{"style":267},[1656],{"type":38,"value":1094},{"type":33,"tag":217,"props":1658,"children":1659},{"class":219,"line":247},[1660,1665,1670],{"type":33,"tag":217,"props":1661,"children":1662},{"style":251},[1663],{"type":38,"value":1664},"function",{"type":33,"tag":217,"props":1666,"children":1667},{"style":236},[1668],{"type":38,"value":1669}," ClientWrapper",{"type":33,"tag":217,"props":1671,"children":1672},{"style":224},[1673],{"type":38,"value":1282},{"type":33,"tag":217,"props":1675,"children":1676},{"class":219,"line":273},[1677,1681,1686,1691,1696],{"type":33,"tag":217,"props":1678,"children":1679},{"style":251},[1680],{"type":38,"value":899},{"type":33,"tag":217,"props":1682,"children":1683},{"style":224},[1684],{"type":38,"value":1685}," \u003C",{"type":33,"tag":217,"props":1687,"children":1688},{"style":292},[1689],{"type":38,"value":1690},"ServerComponent",{"type":33,"tag":217,"props":1692,"children":1693},{"style":224},[1694],{"type":38,"value":1695}," \u002F> ",{"type":33,"tag":217,"props":1697,"children":1698},{"style":361},[1699],{"type":38,"value":1700},"\u002F\u002F Erreur : RSC ne peut pas être à l'intérieur d'un composant client\n",{"type":33,"tag":217,"props":1702,"children":1703},{"class":219,"line":283},[1704],{"type":33,"tag":217,"props":1705,"children":1706},{"style":224},[1707],{"type":38,"value":937},{"type":33,"tag":34,"props":1709,"children":1710},{},[1711],{"type":38,"value":1712},"✅ Correct :",{"type":33,"tag":207,"props":1714,"children":1716},{"code":1715,"language":839,"meta":17,"className":840,"style":17},"\u002F\u002F Layout (RSC)\nfunction Layout({ children }) {\n  return (\n    \u003Cdiv>\n      \u003CServerSidebar \u002F>\n      \u003CClientWrapper>{children}\u003C\u002FClientWrapper>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F Wrapper (client)\n'use client'\nfunction ClientWrapper({ children }) {\n  return \u003Cdiv className=\"interactive\">{children}\u003C\u002Fdiv>\n}\n",[1717],{"type":33,"tag":190,"props":1718,"children":1719},{"__ignoreMap":17},[1720,1728,1753,1764,1779,1795,1820,1835,1842,1849,1856,1864,1871,1894,1935],{"type":33,"tag":217,"props":1721,"children":1722},{"class":219,"line":220},[1723],{"type":33,"tag":217,"props":1724,"children":1725},{"style":361},[1726],{"type":38,"value":1727},"\u002F\u002F Layout (RSC)\n",{"type":33,"tag":217,"props":1729,"children":1730},{"class":219,"line":247},[1731,1735,1740,1744,1749],{"type":33,"tag":217,"props":1732,"children":1733},{"style":251},[1734],{"type":38,"value":1664},{"type":33,"tag":217,"props":1736,"children":1737},{"style":236},[1738],{"type":38,"value":1739}," Layout",{"type":33,"tag":217,"props":1741,"children":1742},{"style":224},[1743],{"type":38,"value":880},{"type":33,"tag":217,"props":1745,"children":1746},{"style":883},[1747],{"type":38,"value":1748},"children",{"type":33,"tag":217,"props":1750,"children":1751},{"style":224},[1752],{"type":38,"value":891},{"type":33,"tag":217,"props":1754,"children":1755},{"class":219,"line":273},[1756,1760],{"type":33,"tag":217,"props":1757,"children":1758},{"style":251},[1759],{"type":38,"value":899},{"type":33,"tag":217,"props":1761,"children":1762},{"style":224},[1763],{"type":38,"value":904},{"type":33,"tag":217,"props":1765,"children":1766},{"class":219,"line":283},[1767,1771,1775],{"type":33,"tag":217,"props":1768,"children":1769},{"style":224},[1770],{"type":38,"value":575},{"type":33,"tag":217,"props":1772,"children":1773},{"style":230},[1774],{"type":38,"value":553},{"type":33,"tag":217,"props":1776,"children":1777},{"style":224},[1778],{"type":38,"value":244},{"type":33,"tag":217,"props":1780,"children":1781},{"class":219,"line":313},[1782,1786,1791],{"type":33,"tag":217,"props":1783,"children":1784},{"style":224},[1785],{"type":38,"value":945},{"type":33,"tag":217,"props":1787,"children":1788},{"style":292},[1789],{"type":38,"value":1790},"ServerSidebar",{"type":33,"tag":217,"props":1792,"children":1793},{"style":224},[1794],{"type":38,"value":599},{"type":33,"tag":217,"props":1796,"children":1797},{"class":219,"line":349},[1798,1802,1807,1812,1816],{"type":33,"tag":217,"props":1799,"children":1800},{"style":224},[1801],{"type":38,"value":945},{"type":33,"tag":217,"props":1803,"children":1804},{"style":292},[1805],{"type":38,"value":1806},"ClientWrapper",{"type":33,"tag":217,"props":1808,"children":1809},{"style":224},[1810],{"type":38,"value":1811},">{children}\u003C\u002F",{"type":33,"tag":217,"props":1813,"children":1814},{"style":292},[1815],{"type":38,"value":1806},{"type":33,"tag":217,"props":1817,"children":1818},{"style":224},[1819],{"type":38,"value":244},{"type":33,"tag":217,"props":1821,"children":1822},{"class":219,"line":357},[1823,1827,1831],{"type":33,"tag":217,"props":1824,"children":1825},{"style":224},[1826],{"type":38,"value":1048},{"type":33,"tag":217,"props":1828,"children":1829},{"style":230},[1830],{"type":38,"value":553},{"type":33,"tag":217,"props":1832,"children":1833},{"style":224},[1834],{"type":38,"value":244},{"type":33,"tag":217,"props":1836,"children":1837},{"class":219,"line":27},[1838],{"type":33,"tag":217,"props":1839,"children":1840},{"style":224},[1841],{"type":38,"value":1064},{"type":33,"tag":217,"props":1843,"children":1844},{"class":219,"line":398},[1845],{"type":33,"tag":217,"props":1846,"children":1847},{"style":224},[1848],{"type":38,"value":937},{"type":33,"tag":217,"props":1850,"children":1851},{"class":219,"line":427},[1852],{"type":33,"tag":217,"props":1853,"children":1854},{"emptyLinePlaceholder":277},[1855],{"type":38,"value":280},{"type":33,"tag":217,"props":1857,"children":1858},{"class":219,"line":436},[1859],{"type":33,"tag":217,"props":1860,"children":1861},{"style":361},[1862],{"type":38,"value":1863},"\u002F\u002F Wrapper (client)\n",{"type":33,"tag":217,"props":1865,"children":1866},{"class":219,"line":444},[1867],{"type":33,"tag":217,"props":1868,"children":1869},{"style":267},[1870],{"type":38,"value":1094},{"type":33,"tag":217,"props":1872,"children":1873},{"class":219,"line":453},[1874,1878,1882,1886,1890],{"type":33,"tag":217,"props":1875,"children":1876},{"style":251},[1877],{"type":38,"value":1664},{"type":33,"tag":217,"props":1879,"children":1880},{"style":236},[1881],{"type":38,"value":1669},{"type":33,"tag":217,"props":1883,"children":1884},{"style":224},[1885],{"type":38,"value":880},{"type":33,"tag":217,"props":1887,"children":1888},{"style":883},[1889],{"type":38,"value":1748},{"type":33,"tag":217,"props":1891,"children":1892},{"style":224},[1893],{"type":38,"value":891},{"type":33,"tag":217,"props":1895,"children":1896},{"class":219,"line":474},[1897,1901,1905,1909,1914,1918,1923,1927,1931],{"type":33,"tag":217,"props":1898,"children":1899},{"style":251},[1900],{"type":38,"value":899},{"type":33,"tag":217,"props":1902,"children":1903},{"style":224},[1904],{"type":38,"value":1685},{"type":33,"tag":217,"props":1906,"children":1907},{"style":230},[1908],{"type":38,"value":553},{"type":33,"tag":217,"props":1910,"children":1911},{"style":236},[1912],{"type":38,"value":1913}," className",{"type":33,"tag":217,"props":1915,"children":1916},{"style":251},[1917],{"type":38,"value":409},{"type":33,"tag":217,"props":1919,"children":1920},{"style":267},[1921],{"type":38,"value":1922},"\"interactive\"",{"type":33,"tag":217,"props":1924,"children":1925},{"style":224},[1926],{"type":38,"value":1811},{"type":33,"tag":217,"props":1928,"children":1929},{"style":230},[1930],{"type":38,"value":553},{"type":33,"tag":217,"props":1932,"children":1933},{"style":224},[1934],{"type":38,"value":244},{"type":33,"tag":217,"props":1936,"children":1937},{"class":219,"line":492},[1938],{"type":33,"tag":217,"props":1939,"children":1940},{"style":224},[1941],{"type":38,"value":937},{"type":33,"tag":34,"props":1943,"children":1944},{},[1945,1947,1952,1954,1959],{"type":38,"value":1946},"Avec ce pattern, ",{"type":33,"tag":190,"props":1948,"children":1950},{"className":1949},[],[1951],{"type":38,"value":1790},{"type":38,"value":1953}," est rendu côté serveur, ",{"type":33,"tag":190,"props":1955,"children":1957},{"className":1956},[],[1958],{"type":38,"value":1806},{"type":38,"value":1960}," n'agit que comme conteneur interactif côté client. Le contenu de la barre latérale n'entre pas dans le bundle.",{"type":33,"tag":49,"props":1962,"children":1964},{"id":1963},"mode-vapor-de-vue-lhydratation-sans-hydratation",[1965],{"type":38,"value":1966},"Mode Vapor de Vue : l'hydratation sans hydratation",{"type":33,"tag":34,"props":1968,"children":1969},{},[1970],{"type":38,"value":1971},"Après Vue 3.5, le Mode Vapor expérimental rend le HTML rendu côté serveur interactif sans hydratation. Le concept : le compilateur injecte directement des écouteurs d'événements dans le DOM, pas de réconciliation du DOM virtuel. Résultat : coût d'hydratation zéro, taille du bundle 70 % inférieure.",{"type":33,"tag":34,"props":1973,"children":1974},{},[1975],{"type":38,"value":1976},"Benchmark expérimental (équipe Vue, Q1 2026) :",{"type":33,"tag":66,"props":1978,"children":1979},{},[1980,2001],{"type":33,"tag":70,"props":1981,"children":1982},{},[1983],{"type":33,"tag":74,"props":1984,"children":1985},{},[1986,1991,1996],{"type":33,"tag":78,"props":1987,"children":1988},{},[1989],{"type":38,"value":1990},"Métrique",{"type":33,"tag":78,"props":1992,"children":1993},{},[1994],{"type":38,"value":1995},"Vue 3.5 SSR",{"type":33,"tag":78,"props":1997,"children":1998},{},[1999],{"type":38,"value":2000},"Mode Vapor",{"type":33,"tag":99,"props":2002,"children":2003},{},[2004,2020,2037],{"type":33,"tag":74,"props":2005,"children":2006},{},[2007,2011,2015],{"type":33,"tag":106,"props":2008,"children":2009},{},[2010],{"type":38,"value":87},{"type":33,"tag":106,"props":2012,"children":2013},{},[2014],{"type":38,"value":138},{"type":33,"tag":106,"props":2016,"children":2017},{},[2018],{"type":38,"value":2019},"55 kb",{"type":33,"tag":74,"props":2021,"children":2022},{},[2023,2028,2032],{"type":33,"tag":106,"props":2024,"children":2025},{},[2026],{"type":38,"value":2027},"Temps d'hydratation",{"type":33,"tag":106,"props":2029,"children":2030},{},[2031],{"type":38,"value":143},{"type":33,"tag":106,"props":2033,"children":2034},{},[2035],{"type":38,"value":2036},"0 ms",{"type":33,"tag":74,"props":2038,"children":2039},{},[2040,2045,2050],{"type":33,"tag":106,"props":2041,"children":2042},{},[2043],{"type":38,"value":2044},"Surcharge runtime",{"type":33,"tag":106,"props":2046,"children":2047},{},[2048],{"type":38,"value":2049},"4,2 kb",{"type":33,"tag":106,"props":2051,"children":2052},{},[2053],{"type":38,"value":2054},"0,8 kb",{"type":33,"tag":34,"props":2056,"children":2057},{},[2058],{"type":38,"value":2059},"Dans notre POC storefront headless avec Mode Vapor, la page de listage de produits a vu son TBT chuter de 800 ms à 140 ms. Cependant, Mode Vapor n'est pas encore production-ready — l'intégration Vue Router est en bêta, le support des bibliothèques tierces est limité. Stabilité attendue pour Q2 2027.",{"type":33,"tag":49,"props":2061,"children":2063},{"id":2062},"sur-quels-chiffres-fonder-votre-décision",[2064],{"type":38,"value":2065},"Sur quels chiffres fonder votre décision ?",{"type":33,"tag":34,"props":2067,"children":2068},{},[2069],{"type":38,"value":2070},"Prenez la décision composant serveur vs composant client en vous basant sur ces métriques :",{"type":33,"tag":2072,"props":2073,"children":2074},"ol",{},[2075,2085,2095,2105],{"type":33,"tag":742,"props":2076,"children":2077},{},[2078,2083],{"type":33,"tag":732,"props":2079,"children":2080},{},[2081],{"type":38,"value":2082},"Probabilité d'interactivité :",{"type":38,"value":2084}," X % de vos utilisateurs interagissent-ils avec ce composant dans les 5 premières secondes ? Au-delà de 60 % → composant client.",{"type":33,"tag":742,"props":2086,"children":2087},{},[2088,2093],{"type":33,"tag":732,"props":2089,"children":2090},{},[2091],{"type":38,"value":2092},"Impact sur le bundle :",{"type":38,"value":2094}," Combien de kb supplémentaires si ce composant va côté client ? Au-delà de 50 kb → évaluer RSC + lazy load.",{"type":33,"tag":742,"props":2096,"children":2097},{},[2098,2103],{"type":33,"tag":732,"props":2099,"children":2100},{},[2101],{"type":38,"value":2102},"Importance pour le SEO :",{"type":38,"value":2104}," Le contenu doit-il être indexé par les moteurs de recherche ? Oui → RSC ou SSR.",{"type":33,"tag":742,"props":2106,"children":2107},{},[2108,2113],{"type":33,"tag":732,"props":2109,"children":2110},{},[2111],{"type":38,"value":2112},"Fraîcheur des données :",{"type":38,"value":2114}," Les données changent-elles à chaque requête ? Non → génération statique. Oui → RSC ou fetch API.",{"type":33,"tag":34,"props":2116,"children":2117},{},[2118],{"type":38,"value":2119},"Exemple de matrice de décision (projet Shopify Roibase) :",{"type":33,"tag":66,"props":2121,"children":2122},{},[2123,2154],{"type":33,"tag":70,"props":2124,"children":2125},{},[2126],{"type":33,"tag":74,"props":2127,"children":2128},{},[2129,2134,2139,2144,2149],{"type":33,"tag":78,"props":2130,"children":2131},{},[2132],{"type":38,"value":2133},"Composant",{"type":33,"tag":78,"props":2135,"children":2136},{},[2137],{"type":38,"value":2138},"Interactivité",{"type":33,"tag":78,"props":2140,"children":2141},{},[2142],{"type":38,"value":2143},"Impact bundle",{"type":33,"tag":78,"props":2145,"children":2146},{},[2147],{"type":38,"value":2148},"SEO",{"type":33,"tag":78,"props":2150,"children":2151},{},[2152],{"type":38,"value":2153},"Décision",{"type":33,"tag":99,"props":2155,"children":2156},{},[2157,2185,2213,2241],{"type":33,"tag":74,"props":2158,"children":2159},{},[2160,2165,2170,2175,2180],{"type":33,"tag":106,"props":2161,"children":2162},{},[2163],{"type":38,"value":2164},"Grille produit",{"type":33,"tag":106,"props":2166,"children":2167},{},[2168],{"type":38,"value":2169},"12 %",{"type":33,"tag":106,"props":2171,"children":2172},{},[2173],{"type":38,"value":2174},"85 kb",{"type":33,"tag":106,"props":2176,"children":2177},{},[2178],{"type":38,"value":2179},"Critique",{"type":33,"tag":106,"props":2181,"children":2182},{},[2183],{"type":38,"value":2184},"RSC",{"type":33,"tag":74,"props":2186,"children":2187},{},[2188,2193,2198,2203,2208],{"type":33,"tag":106,"props":2189,"children":2190},{},[2191],{"type":38,"value":2192},"Ajouter au panier",{"type":33,"tag":106,"props":2194,"children":2195},{},[2196],{"type":38,"value":2197},"78 %",{"type":33,"tag":106,"props":2199,"children":2200},{},[2201],{"type":38,"value":2202},"8 kb",{"type":33,"tag":106,"props":2204,"children":2205},{},[2206],{"type":38,"value":2207},"Inutile",{"type":33,"tag":106,"props":2209,"children":2210},{},[2211],{"type":38,"value":2212},"Client",{"type":33,"tag":74,"props":2214,"children":2215},{},[2216,2221,2226,2231,2236],{"type":33,"tag":106,"props":2217,"children":2218},{},[2219],{"type":38,"value":2220},"Produits associés",{"type":33,"tag":106,"props":2222,"children":2223},{},[2224],{"type":38,"value":2225},"23 %",{"type":33,"tag":106,"props":2227,"children":2228},{},[2229],{"type":38,"value":2230},"45 kb",{"type":33,"tag":106,"props":2232,"children":2233},{},[2234],{"type":38,"value":2235},"Moyen",{"type":33,"tag":106,"props":2237,"children":2238},{},[2239],{"type":38,"value":2240},"RSC + lazy",{"type":33,"tag":74,"props":2242,"children":2243},{},[2244,2249,2254,2259,2264],{"type":33,"tag":106,"props":2245,"children":2246},{},[2247],{"type":38,"value":2248},"Modale recherche",{"type":33,"tag":106,"props":2250,"children":2251},{},[2252],{"type":38,"value":2253},"55 %",{"type":33,"tag":106,"props":2255,"children":2256},{},[2257],{"type":38,"value":2258},"62 kb",{"type":33,"tag":106,"props":2260,"children":2261},{},[2262],{"type":38,"value":2263},"Faible",{"type":33,"tag":106,"props":2265,"children":2266},{},[2267],{"type":38,"value":2268},"Client (préchargée)",{"type":33,"tag":34,"props":2270,"children":2271},{},[2272,2274,2280],{"type":38,"value":2273},"La modale recherche affiche 55 % d'interactivité — sous le seuil critique, mais l'expérience utilisateur est délicate. Solution : précharger le composant modale avec ",{"type":33,"tag":190,"props":2275,"children":2277},{"className":2276},[],[2278],{"type":38,"value":2279},"\u003Clink rel=\"modulepreload\">",{"type":38,"value":2281},". La latence au premier clic tombe à 40 ms.",{"type":33,"tag":49,"props":2283,"children":2285},{"id":2284},"application-pratique-exemple-shopify-hydrogen-20",[2286],{"type":38,"value":2287},"Application pratique : exemple Shopify Hydrogen 2.0",{"type":33,"tag":34,"props":2289,"children":2290},{},[2291],{"type":38,"value":2292},"Comment nous traçons les limites des composants sur un storefront e-commerce :",{"type":33,"tag":207,"props":2294,"children":2296},{"code":2295,"language":839,"meta":17,"className":840,"style":17},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\nimport { json } from '@shopify\u002Fremix-oxygen'\nimport { useLoaderData } from '@remix-run\u002Freact'\n\nexport async function loader({ params, context }) {\n  const { collection } = await context.storefront.query(COLLECTION_QUERY, {\n    variables: { handle: params.handle }\n  })\n  return json({ collection })\n}\n\nexport default function Collection() {\n  const { collection } = useLoaderData()\n  \n  return (\n    \u003Cdiv>\n      {\u002F* Composant serveur — métadonnées statiques *\u002F}\n      \u003CCollectionHeader \n        title={collection.title} \n        description={collection.description} \n      \u002F>\n      \n      {\u002F* Composant client — filtrage, tri *\u002F}\n      \u003CProductFilters facets={collection.facets} \u002F>\n      \n      {\u002F* Composant serveur — cartes produit *\u002F}\n      \u003CProductGrid products={collection.products} \u002F>\n    \u003C\u002Fdiv>\n  )\n}\n",[2297],{"type":33,"tag":190,"props":2298,"children":2299},{"__ignoreMap":17},[2300,2308,2329,2350,2357,2400,2454,2462,2470,2487,2494,2501,2525,2557,2565,2576,2591,2607,2623,2640,2657,2664,2671,2687,2713,2720,2736,2760,2775,2782],{"type":33,"tag":217,"props":2301,"children":2302},{"class":219,"line":220},[2303],{"type":33,"tag":217,"props":2304,"children":2305},{"style":361},[2306],{"type":38,"value":2307},"\u002F\u002F app\u002Froutes\u002Fcollections.$handle.tsx (RSC)\n",{"type":33,"tag":217,"props":2309,"children":2310},{"class":219,"line":247},[2311,2315,2320,2324],{"type":33,"tag":217,"props":2312,"children":2313},{"style":251},[2314],{"type":38,"value":254},{"type":33,"tag":217,"props":2316,"children":2317},{"style":224},[2318],{"type":38,"value":2319}," { json } ",{"type":33,"tag":217,"props":2321,"children":2322},{"style":251},[2323],{"type":38,"value":264},{"type":33,"tag":217,"props":2325,"children":2326},{"style":267},[2327],{"type":38,"value":2328}," '@shopify\u002Fremix-oxygen'\n",{"type":33,"tag":217,"props":2330,"children":2331},{"class":219,"line":273},[2332,2336,2341,2345],{"type":33,"tag":217,"props":2333,"children":2334},{"style":251},[2335],{"type":38,"value":254},{"type":33,"tag":217,"props":2337,"children":2338},{"style":224},[2339],{"type":38,"value":2340}," { useLoaderData } ",{"type":33,"tag":217,"props":2342,"children":2343},{"style":251},[2344],{"type":38,"value":264},{"type":33,"tag":217,"props":2346,"children":2347},{"style":267},[2348],{"type":38,"value":2349}," '@remix-run\u002Freact'\n",{"type":33,"tag":217,"props":2351,"children":2352},{"class":219,"line":283},[2353],{"type":33,"tag":217,"props":2354,"children":2355},{"emptyLinePlaceholder":277},[2356],{"type":38,"value":280},{"type":33,"tag":217,"props":2358,"children":2359},{"class":219,"line":313},[2360,2364,2369,2373,2378,2382,2387,2391,2396],{"type":33,"tag":217,"props":2361,"children":2362},{"style":251},[2363],{"type":38,"value":860},{"type":33,"tag":217,"props":2365,"children":2366},{"style":251},[2367],{"type":38,"value":2368}," async",{"type":33,"tag":217,"props":2370,"children":2371},{"style":251},[2372],{"type":38,"value":870},{"type":33,"tag":217,"props":2374,"children":2375},{"style":236},[2376],{"type":38,"value":2377}," loader",{"type":33,"tag":217,"props":2379,"children":2380},{"style":224},[2381],{"type":38,"value":880},{"type":33,"tag":217,"props":2383,"children":2384},{"style":883},[2385],{"type":38,"value":2386},"params",{"type":33,"tag":217,"props":2388,"children":2389},{"style":224},[2390],{"type":38,"value":712},{"type":33,"tag":217,"props":2392,"children":2393},{"style":883},[2394],{"type":38,"value":2395},"context",{"type":33,"tag":217,"props":2397,"children":2398},{"style":224},[2399],{"type":38,"value":891},{"type":33,"tag":217,"props":2401,"children":2402},{"class":219,"line":349},[2403,2407,2412,2417,2422,2426,2430,2435,2440,2444,2449],{"type":33,"tag":217,"props":2404,"children":2405},{"style":251},[2406],{"type":38,"value":1158},{"type":33,"tag":217,"props":2408,"children":2409},{"style":224},[2410],{"type":38,"value":2411}," { ",{"type":33,"tag":217,"props":2413,"children":2414},{"style":292},[2415],{"type":38,"value":2416},"collection",{"type":33,"tag":217,"props":2418,"children":2419},{"style":224},[2420],{"type":38,"value":2421}," } ",{"type":33,"tag":217,"props":2423,"children":2424},{"style":251},[2425],{"type":38,"value":409},{"type":33,"tag":217,"props":2427,"children":2428},{"style":251},[2429],{"type":38,"value":414},{"type":33,"tag":217,"props":2431,"children":2432},{"style":224},[2433],{"type":38,"value":2434}," context.storefront.",{"type":33,"tag":217,"props":2436,"children":2437},{"style":236},[2438],{"type":38,"value":2439},"query",{"type":33,"tag":217,"props":2441,"children":2442},{"style":224},[2443],{"type":38,"value":336},{"type":33,"tag":217,"props":2445,"children":2446},{"style":292},[2447],{"type":38,"value":2448},"COLLECTION_QUERY",{"type":33,"tag":217,"props":2450,"children":2451},{"style":224},[2452],{"type":38,"value":2453},", {\n",{"type":33,"tag":217,"props":2455,"children":2456},{"class":219,"line":357},[2457],{"type":33,"tag":217,"props":2458,"children":2459},{"style":224},[2460],{"type":38,"value":2461},"    variables: { handle: params.handle }\n",{"type":33,"tag":217,"props":2463,"children":2464},{"class":219,"line":27},[2465],{"type":33,"tag":217,"props":2466,"children":2467},{"style":224},[2468],{"type":38,"value":2469},"  })\n",{"type":33,"tag":217,"props":2471,"children":2472},{"class":219,"line":398},[2473,2477,2482],{"type":33,"tag":217,"props":2474,"children":2475},{"style":251},[2476],{"type":38,"value":899},{"type":33,"tag":217,"props":2478,"children":2479},{"style":236},[2480],{"type":38,"value":2481}," json",{"type":33,"tag":217,"props":2483,"children":2484},{"style":224},[2485],{"type":38,"value":2486},"({ collection })\n",{"type":33,"tag":217,"props":2488,"children":2489},{"class":219,"line":427},[2490],{"type":33,"tag":217,"props":2491,"children":2492},{"style":224},[2493],{"type":38,"value":937},{"type":33,"tag":217,"props":2495,"children":2496},{"class":219,"line":436},[2497],{"type":33,"tag":217,"props":2498,"children":2499},{"emptyLinePlaceholder":277},[2500],{"type":38,"value":280},{"type":33,"tag":217,"props":2502,"children":2503},{"class":219,"line":444},[2504,2508,2512,2516,2521],{"type":33,"tag":217,"props":2505,"children":2506},{"style":251},[2507],{"type":38,"value":860},{"type":33,"tag":217,"props":2509,"children":2510},{"style":251},[2511],{"type":38,"value":865},{"type":33,"tag":217,"props":2513,"children":2514},{"style":251},[2515],{"type":38,"value":870},{"type":33,"tag":217,"props":2517,"children":2518},{"style":236},[2519],{"type":38,"value":2520}," Collection",{"type":33,"tag":217,"props":2522,"children":2523},{"style":224},[2524],{"type":38,"value":1282},{"type":33,"tag":217,"props":2526,"children":2527},{"class":219,"line":453},[2528,2532,2536,2540,2544,2548,2553],{"type":33,"tag":217,"props":2529,"children":2530},{"style":251},[2531],{"type":38,"value":1158},{"type":33,"tag":217,"props":2533,"children":2534},{"style":224},[2535],{"type":38,"value":2411},{"type":33,"tag":217,"props":2537,"children":2538},{"style":292},[2539],{"type":38,"value":2416},{"type":33,"tag":217,"props":2541,"children":2542},{"style":224},[2543],{"type":38,"value":2421},{"type":33,"tag":217,"props":2545,"children":2546},{"style":251},[2547],{"type":38,"value":409},{"type":33,"tag":217,"props":2549,"children":2550},{"style":236},[2551],{"type":38,"value":2552}," useLoaderData",{"type":33,"tag":217,"props":2554,"children":2555},{"style":224},[2556],{"type":38,"value":424},{"type":33,"tag":217,"props":2558,"children":2559},{"class":219,"line":474},[2560],{"type":33,"tag":217,"props":2561,"children":2562},{"style":224},[2563],{"type":38,"value":2564},"  \n",{"type":33,"tag":217,"props":2566,"children":2567},{"class":219,"line":492},[2568,2572],{"type":33,"tag":217,"props":2569,"children":2570},{"style":251},[2571],{"type":38,"value":899},{"type":33,"tag":217,"props":2573,"children":2574},{"style":224},[2575],{"type":38,"value":904},{"type":33,"tag":217,"props":2577,"children":2578},{"class":219,"line":500},[2579,2583,2587],{"type":33,"tag":217,"props":2580,"children":2581},{"style":224},[2582],{"type":38,"value":575},{"type":33,"tag":217,"props":2584,"children":2585},{"style":230},[2586],{"type":38,"value":553},{"type":33,"tag":217,"props":2588,"children":2589},{"style":224},[2590],{"type":38,"value":244},{"type":33,"tag":217,"props":2592,"children":2593},{"class":219,"line":517},[2594,2598,2603],{"type":33,"tag":217,"props":2595,"children":2596},{"style":224},[2597],{"type":38,"value":927},{"type":33,"tag":217,"props":2599,"children":2600},{"style":361},[2601],{"type":38,"value":2602},"\u002F* Composant serveur — métadonnées statiques *\u002F",{"type":33,"tag":217,"props":2604,"children":2605},{"style":224},[2606],{"type":38,"value":937},{"type":33,"tag":217,"props":2608,"children":2609},{"class":219,"line":525},[2610,2614,2619],{"type":33,"tag":217,"props":2611,"children":2612},{"style":224},[2613],{"type":38,"value":945},{"type":33,"tag":217,"props":2615,"children":2616},{"style":292},[2617],{"type":38,"value":2618},"CollectionHeader",{"type":33,"tag":217,"props":2620,"children":2621},{"style":224},[2622],{"type":38,"value":1414},{"type":33,"tag":217,"props":2624,"children":2625},{"class":219,"line":542},[2626,2631,2635],{"type":33,"tag":217,"props":2627,"children":2628},{"style":236},[2629],{"type":38,"value":2630},"        title",{"type":33,"tag":217,"props":2632,"children":2633},{"style":251},[2634],{"type":38,"value":409},{"type":33,"tag":217,"props":2636,"children":2637},{"style":224},[2638],{"type":38,"value":2639},"{collection.title} \n",{"type":33,"tag":217,"props":2641,"children":2642},{"class":219,"line":560},[2643,2648,2652],{"type":33,"tag":217,"props":2644,"children":2645},{"style":236},[2646],{"type":38,"value":2647},"        description",{"type":33,"tag":217,"props":2649,"children":2650},{"style":251},[2651],{"type":38,"value":409},{"type":33,"tag":217,"props":2653,"children":2654},{"style":224},[2655],{"type":38,"value":2656},"{collection.description} \n",{"type":33,"tag":217,"props":2658,"children":2659},{"class":219,"line":569},[2660],{"type":33,"tag":217,"props":2661,"children":2662},{"style":224},[2663],{"type":38,"value":1505},{"type":33,"tag":217,"props":2665,"children":2666},{"class":219,"line":602},[2667],{"type":33,"tag":217,"props":2668,"children":2669},{"style":224},[2670],{"type":38,"value":998},{"type":33,"tag":217,"props":2672,"children":2673},{"class":219,"line":611},[2674,2678,2683],{"type":33,"tag":217,"props":2675,"children":2676},{"style":224},[2677],{"type":38,"value":927},{"type":33,"tag":217,"props":2679,"children":2680},{"style":361},[2681],{"type":38,"value":2682},"\u002F* Composant client — filtrage, tri *\u002F",{"type":33,"tag":217,"props":2684,"children":2685},{"style":224},[2686],{"type":38,"value":937},{"type":33,"tag":217,"props":2688,"children":2689},{"class":219,"line":620},[2690,2694,2699,2704,2708],{"type":33,"tag":217,"props":2691,"children":2692},{"style":224},[2693],{"type":38,"value":945},{"type":33,"tag":217,"props":2695,"children":2696},{"style":292},[2697],{"type":38,"value":2698},"ProductFilters",{"type":33,"tag":217,"props":2700,"children":2701},{"style":236},[2702],{"type":38,"value":2703}," facets",{"type":33,"tag":217,"props":2705,"children":2706},{"style":251},[2707],{"type":38,"value":409},{"type":33,"tag":217,"props":2709,"children":2710},{"style":224},[2711],{"type":38,"value":2712},"{collection.facets} \u002F>\n",{"type":33,"tag":217,"props":2714,"children":2715},{"class":219,"line":651},[2716],{"type":33,"tag":217,"props":2717,"children":2718},{"style":224},[2719],{"type":38,"value":998},{"type":33,"tag":217,"props":2721,"children":2722},{"class":219,"line":668},[2723,2727,2732],{"type":33,"tag":217,"props":2724,"children":2725},{"style":224},[2726],{"type":38,"value":927},{"type":33,"tag":217,"props":2728,"children":2729},{"style":361},[2730],{"type":38,"value":2731},"\u002F* Composant serveur — cartes produit *\u002F",{"type":33,"tag":217,"props":2733,"children":2734},{"style":224},[2735],{"type":38,"value":937},{"type":33,"tag":217,"props":2737,"children":2738},{"class":219,"line":1343},[2739,2743,2747,2751,2755],{"type":33,"tag":217,"props":2740,"children":2741},{"style":224},[2742],{"type":38,"value":945},{"type":33,"tag":217,"props":2744,"children":2745},{"style":292},[2746],{"type":38,"value":580},{"type":33,"tag":217,"props":2748,"children":2749},{"style":236},[2750],{"type":38,"value":295},{"type":33,"tag":217,"props":2752,"children":2753},{"style":251},[2754],{"type":38,"value":409},{"type":33,"tag":217,"props":2756,"children":2757},{"style":224},[2758],{"type":38,"value":2759},"{collection.products} \u002F>\n",{"type":33,"tag":217,"props":2761,"children":2762},{"class":219,"line":1352},[2763,2767,2771],{"type":33,"tag":217,"props":2764,"children":2765},{"style":224},[2766],{"type":38,"value":1048},{"type":33,"tag":217,"props":2768,"children":2769},{"style":230},[2770],{"type":38,"value":553},{"type":33,"tag":217,"props":2772,"children":2773},{"style":224},[2774],{"type":38,"value":244},{"type":33,"tag":217,"props":2776,"children":2777},{"class":219,"line":1360},[2778],{"type":33,"tag":217,"props":2779,"children":2780},{"style":224},[2781],{"type":38,"value":1064},{"type":33,"tag":217,"props":2783,"children":2784},{"class":219,"line":1372},[2785],{"type":33,"tag":217,"props":2786,"children":2787},{"style":224},[2788],{"type":38,"value":937},{"type":33,"tag":34,"props":2790,"children":2791},{},[2792],{"type":38,"value":2793},"Cette architecture livre :",{"type":33,"tag":738,"props":2795,"children":2796},{},[2797,2802,2807,2812,2817],{"type":33,"tag":742,"props":2798,"children":2799},{},[2800],{"type":38,"value":2801},"Les métadonnées de collection et les cartes de produits rendues côté serveur → compatible SEO, bundle réduit",{"type":33,"tag":742,"props":2803,"children":2804},{},[2805],{"type":38,"value":2806},"L'interface de filtre comme composant client → interactivité, gestion d'état",{"type":33,"tag":742,"props":2808,"children":2809},{},[2810],{"type":38,"value":2811},"Bundle initial : 72 kb (filtres + gestionnaires d'événements)",{"type":33,"tag":742,"props":2813,"children":2814},{},[2815],{"type":38,"value":2816},"Temps d'hydratation : 160 ms",{"type":33,"tag":742,"props":2818,"children":2819},{},[2820],{"type":38,"value":2821},"TBT : 240 ms",{"type":33,"tag":34,"props":2823,"children":2824},{},[2825],{"type":38,"value":2826},"Si vous aviez rendu l'ensemble de la page en CSR, le bundle aurait été 210 kb, TBT 1100 ms. Impact sur la conversion : +4,2 % (test A\u002FB, 14 jours, n = 48 000).",{"type":33,"tag":34,"props":2828,"children":2829},{},[2830,2832,2839],{"type":38,"value":2831},"La décision se prend au niveau du composant — le compromis entre taille du bundle et latence d'interactivité est mesurable. Cette architecture produit aussi une matrice de priorité des composants dans ",{"type":33,"tag":789,"props":2833,"children":2836},{"href":2834,"rel":2835},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fui-ux",[793],[2837],{"type":38,"value":2838},"notre processus UI\u002FUX",{"type":38,"value":2840},", basée sur les données de comportement utilisateur — quel élément doit être côté client, quel élément peut être RSC ?",{"type":33,"tag":2842,"props":2843,"children":2844},"style",{},[2845],{"type":38,"value":2846},"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":273,"depth":273,"links":2848},[2849,2852,2853,2856,2857,2858],{"id":51,"depth":247,"text":54,"children":2850},[2851],{"id":180,"depth":273,"text":183},{"id":696,"depth":247,"text":699},{"id":814,"depth":247,"text":817,"children":2854},[2855],{"id":1629,"depth":273,"text":1632},{"id":1963,"depth":247,"text":1966},{"id":2062,"depth":247,"text":2065},{"id":2284,"depth":247,"text":2287},"markdown","content:fr:tech:composants-serveur-vs-client-tracer-la-bonne-ligne-en-2026.md","content","fr\u002Ftech\u002Fcomposants-serveur-vs-client-tracer-la-bonne-ligne-en-2026.md","fr\u002Ftech\u002Fcomposants-serveur-vs-client-tracer-la-bonne-ligne-en-2026","md",1785967483970]