[{"data":1,"prerenderedAt":2900},["ShallowReactive",2],{"article-alternates":3,"article-\u002Ffr\u002Ftech\u002Fserver-components-vs-client-2026":13},{"i18nKey":4,"paths":5},"tech-008-2026-06",{"de":6,"en":7,"es":8,"fr":9,"it":10,"ru":11,"tr":12},"\u002Fde\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026","\u002Fes\u002Ftech\u002Fserver-components-vs-client-2026","\u002Ffr\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fit\u002Ftech\u002Fserver-components-vs-client-2026","\u002Fru\u002Ftech\u002Fserver-components-vs-client-2026","\u002Ftr\u002Ftech\u002Fserver-components-vs-client-2026da-dogru-cizgiyi-cizmek",{"_path":9,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":20,"i18nKey":4,"tags":21,"readingTime":27,"author":28,"body":29,"_type":2894,"_id":2895,"_source":2896,"_file":2897,"_stem":2898,"_extension":2899},"tech",false,"","Server Components vs Client : Tracer la Bonne Ligne en 2026","React Server Components et la transition Vue 3.5 réduisent les coûts d'hydratation tout en maintenant l'interactivité. Guide de décision architecturale avec chiffres réels.","2026-06-14","headless",[22,23,24,25,26],"react-server-components","vue-transition","hydration-cost","web-performance","frontend-architecture",9,"Roibase",{"type":30,"children":31,"toc":2877},"root",[32,48,55,60,65,100,107,256,262,276,884,889,895,907,1002,1015,1021,1042,1306,1332,1355,1361,1374,1554,1559,1565,1570,1582,1869,1874,1880,1885,2464,2482,2488,2517,2568,2573,2579,2584,2647,2652,2703,2714,2720,2725,2871],{"type":33,"tag":34,"props":35,"children":36},"element","p",{},[37,40,46],{"type":38,"value":39},"text","En 2026, les débats sur l'architecture frontend ont évolué. On ne se demande plus « que devrais-je utiliser ? », mais « où exécuter sur le serveur, où sur le client ? ». React Server Components (RSC) sont en production depuis 18 mois, l'API de transition de Vue 3.5 est stable, Svelte 5 a réécrit son modèle de réactivité avec les ",{"type":33,"tag":41,"props":42,"children":43},"em",{},[44],{"type":38,"value":45},"runes",{"type":38,"value":47},". Le dénominateur commun : réduire les coûts d'hydratation, fournir l'interactivité exactement où elle est nécessaire. Cet article montre quels chiffres examiner pour prendre des décisions architecturales.",{"type":33,"tag":49,"props":50,"children":52},"h2",{"id":51},"le-coût-réel-de-lhydratation-données-de-benchmark-2026",[53],{"type":38,"value":54},"Le Coût Réel de l'Hydratation : Données de Benchmark 2026",{"type":33,"tag":34,"props":56,"children":57},{},[58],{"type":38,"value":59},"L'hydratation est le processus qui rend le HTML rendu côté serveur interactif dans le navigateur. En 2024, un site de commerce électronique moyen consommait 400 ms de temps CPU (Chrome User Experience Report, Q4 2024). En 2026, les sites utilisant React 19 + RSC ont réduit ce coût à 80 ms, et ceux utilisant Vue 3.5 + hydratation partielle à 120 ms.",{"type":33,"tag":34,"props":61,"children":62},{},[63],{"type":38,"value":64},"La différence numérique est importante : une hydratation de 400 ms peut seule placer votre métrique Interaction to Next Paint (INP) dans la bande « needs improvement ». Une hydratation de 80 ms vous permet de rester dans le budget et d'accorder une attention à d'autres optimisations. Cet écart est particulièrement notable sur les appareils mobiles (processeur Snapdragon 7 Gen 1, segment intermédiaire).",{"type":33,"tag":34,"props":66,"children":67},{},[68,70,75,77,81,83,92,94,98],{"type":38,"value":69},"L'avantage de RSC est limpide : résoudre une partie de l'arborescence des composants sur le serveur, puis envoyer uniquement le HTML, sans jamais l'inclure dans le ",{"type":33,"tag":41,"props":71,"children":72},{},[73],{"type":38,"value":74},"bundle",{"type":38,"value":76}," client. Avec l'approche SSR classique, tout le code des composants était envoyé au client et hydraté. Avec RSC, les listes de produits, les barres latérales de filtre, les formulaires de paiement — des sections qui demandent beaucoup de données mais peu d'interactivité — disparaissent du ",{"type":33,"tag":41,"props":78,"children":79},{},[80],{"type":38,"value":74},{"type":38,"value":82},". Dans les projets ",{"type":33,"tag":84,"props":85,"children":89},"a",{"href":86,"rel":87},"https:\u002F\u002Fwww.roibase.com.tr\u002Ffr\u002Fheadless",[88],"nofollow",[90],{"type":38,"value":91},"Headless",{"type":38,"value":93}," de Roibase, cette approche a réduit la taille moyenne du ",{"type":33,"tag":41,"props":95,"children":96},{},[97],{"type":38,"value":74},{"type":38,"value":99}," JS de 40 %.",{"type":33,"tag":101,"props":102,"children":104},"h3",{"id":103},"matrice-de-décision-server-vs-client",[105],{"type":38,"value":106},"Matrice de Décision Server vs Client",{"type":33,"tag":108,"props":109,"children":110},"table",{},[111,140],{"type":33,"tag":112,"props":113,"children":114},"thead",{},[115],{"type":33,"tag":116,"props":117,"children":118},"tr",{},[119,125,130,135],{"type":33,"tag":120,"props":121,"children":122},"th",{},[123],{"type":38,"value":124},"Type de Composant",{"type":33,"tag":120,"props":126,"children":127},{},[128],{"type":38,"value":129},"Hydratation",{"type":33,"tag":120,"props":131,"children":132},{},[133],{"type":38,"value":134},"Impact du Bundle",{"type":33,"tag":120,"props":136,"children":137},{},[138],{"type":38,"value":139},"Server\u002FClient",{"type":33,"tag":141,"props":142,"children":143},"tbody",{},[144,168,188,211,233],{"type":33,"tag":116,"props":145,"children":146},{},[147,153,158,163],{"type":33,"tag":148,"props":149,"children":150},"td",{},[151],{"type":38,"value":152},"Bloc de contenu statique",{"type":33,"tag":148,"props":154,"children":155},{},[156],{"type":38,"value":157},"0ms",{"type":33,"tag":148,"props":159,"children":160},{},[161],{"type":38,"value":162},"0kB",{"type":33,"tag":148,"props":164,"children":165},{},[166],{"type":38,"value":167},"Server",{"type":33,"tag":116,"props":169,"children":170},{},[171,176,180,184],{"type":33,"tag":148,"props":172,"children":173},{},[174],{"type":38,"value":175},"Liste avec récupération de données (non-interactive)",{"type":33,"tag":148,"props":177,"children":178},{},[179],{"type":38,"value":157},{"type":33,"tag":148,"props":181,"children":182},{},[183],{"type":38,"value":162},{"type":33,"tag":148,"props":185,"children":186},{},[187],{"type":38,"value":167},{"type":33,"tag":116,"props":189,"children":190},{},[191,196,201,206],{"type":33,"tag":148,"props":192,"children":193},{},[194],{"type":38,"value":195},"Entrée de formulaire + validation",{"type":33,"tag":148,"props":197,"children":198},{},[199],{"type":38,"value":200},"15-30ms",{"type":33,"tag":148,"props":202,"children":203},{},[204],{"type":38,"value":205},"8-12kB",{"type":33,"tag":148,"props":207,"children":208},{},[209],{"type":38,"value":210},"Client",{"type":33,"tag":116,"props":212,"children":213},{},[214,219,224,229],{"type":33,"tag":148,"props":215,"children":216},{},[217],{"type":38,"value":218},"Widget de chat en temps réel",{"type":33,"tag":148,"props":220,"children":221},{},[222],{"type":38,"value":223},"40-60ms",{"type":33,"tag":148,"props":225,"children":226},{},[227],{"type":38,"value":228},"25-40kB",{"type":33,"tag":148,"props":230,"children":231},{},[232],{"type":38,"value":210},{"type":33,"tag":116,"props":234,"children":235},{},[236,241,246,251],{"type":33,"tag":148,"props":237,"children":238},{},[239],{"type":38,"value":240},"Conteneur de défilement infini",{"type":33,"tag":148,"props":242,"children":243},{},[244],{"type":38,"value":245},"20-35ms",{"type":33,"tag":148,"props":247,"children":248},{},[249],{"type":38,"value":250},"15-20kB",{"type":33,"tag":148,"props":252,"children":253},{},[254],{"type":38,"value":255},"Hybride (première page serveur, suiv. client)",{"type":33,"tag":49,"props":257,"children":259},{"id":258},"react-server-components-architecture-pratique",[260],{"type":38,"value":261},"React Server Components : Architecture Pratique",{"type":33,"tag":34,"props":263,"children":264},{},[265,267,274],{"type":38,"value":266},"L'essence de RSC en production : tracer correctement les limites client. Avec Next.js 15, par défaut, tous les composants sont des Server Components. Vous tracez la limite avec la directive ",{"type":33,"tag":268,"props":269,"children":271},"code",{"className":270},[],[272],{"type":38,"value":273},"'use client'",{"type":38,"value":275}," lorsque l'interactivité est nécessaire.",{"type":33,"tag":277,"props":278,"children":282},"pre",{"className":279,"code":280,"language":281,"meta":16,"style":16},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fproduct\u002F[id]\u002Fpage.tsx — Server Component (par défaut)\nasync function ProductPage({ params }: { params: { id: string } }) {\n  \u002F\u002F Requêtes DB, appels API directs — pas inclus dans le bundle client\n  const product = await db.product.findUnique({ \n    where: { id: params.id } \n  });\n\n  return (\n    \u003Cdiv>\n      \u003CProductImage src={product.image} \u002F> {\u002F* Server Component *\u002F}\n      \u003CProductDetails data={product} \u002F> {\u002F* Server Component *\u002F}\n      \u003CAddToCartButton productId={product.id} \u002F> {\u002F* Client Component *\u002F}\n    \u003C\u002Fdiv>\n  );\n}\n\n\u002F\u002F components\u002FAddToCartButton.tsx\n'use client';\nimport { useState } from 'react';\n\nexport function AddToCartButton({ productId }: { productId: string }) {\n  const [loading, setLoading] = useState(false);\n  \u002F\u002F Gestionnaire onClick, gestion d'état — cette partie nécessite l'hydratation\n  return \u003Cbutton onClick={() => addToCart(productId)}>Ajouter au Panier\u003C\u002Fbutton>;\n}\n","tsx",[283],{"type":33,"tag":268,"props":284,"children":285},{"__ignoreMap":16},[286,298,378,387,426,435,444,454,468,487,526,561,597,614,623,631,639,648,662,690,698,754,811,820,876],{"type":33,"tag":287,"props":288,"children":291},"span",{"class":289,"line":290},"line",1,[292],{"type":33,"tag":287,"props":293,"children":295},{"style":294},"--shiki-default:#6A737D",[296],{"type":38,"value":297},"\u002F\u002F app\u002Fproduct\u002F[id]\u002Fpage.tsx — Server Component (par défaut)\n",{"type":33,"tag":287,"props":299,"children":301},{"class":289,"line":300},2,[302,308,313,319,325,331,336,341,346,350,354,358,363,367,373],{"type":33,"tag":287,"props":303,"children":305},{"style":304},"--shiki-default:#F97583",[306],{"type":38,"value":307},"async",{"type":33,"tag":287,"props":309,"children":310},{"style":304},[311],{"type":38,"value":312}," function",{"type":33,"tag":287,"props":314,"children":316},{"style":315},"--shiki-default:#B392F0",[317],{"type":38,"value":318}," ProductPage",{"type":33,"tag":287,"props":320,"children":322},{"style":321},"--shiki-default:#E1E4E8",[323],{"type":38,"value":324},"({ ",{"type":33,"tag":287,"props":326,"children":328},{"style":327},"--shiki-default:#FFAB70",[329],{"type":38,"value":330},"params",{"type":33,"tag":287,"props":332,"children":333},{"style":321},[334],{"type":38,"value":335}," }",{"type":33,"tag":287,"props":337,"children":338},{"style":304},[339],{"type":38,"value":340},":",{"type":33,"tag":287,"props":342,"children":343},{"style":321},[344],{"type":38,"value":345}," { ",{"type":33,"tag":287,"props":347,"children":348},{"style":327},[349],{"type":38,"value":330},{"type":33,"tag":287,"props":351,"children":352},{"style":304},[353],{"type":38,"value":340},{"type":33,"tag":287,"props":355,"children":356},{"style":321},[357],{"type":38,"value":345},{"type":33,"tag":287,"props":359,"children":360},{"style":327},[361],{"type":38,"value":362},"id",{"type":33,"tag":287,"props":364,"children":365},{"style":304},[366],{"type":38,"value":340},{"type":33,"tag":287,"props":368,"children":370},{"style":369},"--shiki-default:#79B8FF",[371],{"type":38,"value":372}," string",{"type":33,"tag":287,"props":374,"children":375},{"style":321},[376],{"type":38,"value":377}," } }) {\n",{"type":33,"tag":287,"props":379,"children":381},{"class":289,"line":380},3,[382],{"type":33,"tag":287,"props":383,"children":384},{"style":294},[385],{"type":38,"value":386},"  \u002F\u002F Requêtes DB, appels API directs — pas inclus dans le bundle client\n",{"type":33,"tag":287,"props":388,"children":390},{"class":289,"line":389},4,[391,396,401,406,411,416,421],{"type":33,"tag":287,"props":392,"children":393},{"style":304},[394],{"type":38,"value":395},"  const",{"type":33,"tag":287,"props":397,"children":398},{"style":369},[399],{"type":38,"value":400}," product",{"type":33,"tag":287,"props":402,"children":403},{"style":304},[404],{"type":38,"value":405}," =",{"type":33,"tag":287,"props":407,"children":408},{"style":304},[409],{"type":38,"value":410}," await",{"type":33,"tag":287,"props":412,"children":413},{"style":321},[414],{"type":38,"value":415}," db.product.",{"type":33,"tag":287,"props":417,"children":418},{"style":315},[419],{"type":38,"value":420},"findUnique",{"type":33,"tag":287,"props":422,"children":423},{"style":321},[424],{"type":38,"value":425},"({ \n",{"type":33,"tag":287,"props":427,"children":429},{"class":289,"line":428},5,[430],{"type":33,"tag":287,"props":431,"children":432},{"style":321},[433],{"type":38,"value":434},"    where: { id: params.id } \n",{"type":33,"tag":287,"props":436,"children":438},{"class":289,"line":437},6,[439],{"type":33,"tag":287,"props":440,"children":441},{"style":321},[442],{"type":38,"value":443},"  });\n",{"type":33,"tag":287,"props":445,"children":447},{"class":289,"line":446},7,[448],{"type":33,"tag":287,"props":449,"children":451},{"emptyLinePlaceholder":450},true,[452],{"type":38,"value":453},"\n",{"type":33,"tag":287,"props":455,"children":457},{"class":289,"line":456},8,[458,463],{"type":33,"tag":287,"props":459,"children":460},{"style":304},[461],{"type":38,"value":462},"  return",{"type":33,"tag":287,"props":464,"children":465},{"style":321},[466],{"type":38,"value":467}," (\n",{"type":33,"tag":287,"props":469,"children":470},{"class":289,"line":27},[471,476,482],{"type":33,"tag":287,"props":472,"children":473},{"style":321},[474],{"type":38,"value":475},"    \u003C",{"type":33,"tag":287,"props":477,"children":479},{"style":478},"--shiki-default:#85E89D",[480],{"type":38,"value":481},"div",{"type":33,"tag":287,"props":483,"children":484},{"style":321},[485],{"type":38,"value":486},">\n",{"type":33,"tag":287,"props":488,"children":490},{"class":289,"line":489},10,[491,496,501,506,511,516,521],{"type":33,"tag":287,"props":492,"children":493},{"style":321},[494],{"type":38,"value":495},"      \u003C",{"type":33,"tag":287,"props":497,"children":498},{"style":369},[499],{"type":38,"value":500},"ProductImage",{"type":33,"tag":287,"props":502,"children":503},{"style":315},[504],{"type":38,"value":505}," src",{"type":33,"tag":287,"props":507,"children":508},{"style":304},[509],{"type":38,"value":510},"=",{"type":33,"tag":287,"props":512,"children":513},{"style":321},[514],{"type":38,"value":515},"{product.image} \u002F> {",{"type":33,"tag":287,"props":517,"children":518},{"style":294},[519],{"type":38,"value":520},"\u002F* Server Component *\u002F",{"type":33,"tag":287,"props":522,"children":523},{"style":321},[524],{"type":38,"value":525},"}\n",{"type":33,"tag":287,"props":527,"children":529},{"class":289,"line":528},11,[530,534,539,544,548,553,557],{"type":33,"tag":287,"props":531,"children":532},{"style":321},[533],{"type":38,"value":495},{"type":33,"tag":287,"props":535,"children":536},{"style":369},[537],{"type":38,"value":538},"ProductDetails",{"type":33,"tag":287,"props":540,"children":541},{"style":315},[542],{"type":38,"value":543}," data",{"type":33,"tag":287,"props":545,"children":546},{"style":304},[547],{"type":38,"value":510},{"type":33,"tag":287,"props":549,"children":550},{"style":321},[551],{"type":38,"value":552},"{product} \u002F> {",{"type":33,"tag":287,"props":554,"children":555},{"style":294},[556],{"type":38,"value":520},{"type":33,"tag":287,"props":558,"children":559},{"style":321},[560],{"type":38,"value":525},{"type":33,"tag":287,"props":562,"children":564},{"class":289,"line":563},12,[565,569,574,579,583,588,593],{"type":33,"tag":287,"props":566,"children":567},{"style":321},[568],{"type":38,"value":495},{"type":33,"tag":287,"props":570,"children":571},{"style":369},[572],{"type":38,"value":573},"AddToCartButton",{"type":33,"tag":287,"props":575,"children":576},{"style":315},[577],{"type":38,"value":578}," productId",{"type":33,"tag":287,"props":580,"children":581},{"style":304},[582],{"type":38,"value":510},{"type":33,"tag":287,"props":584,"children":585},{"style":321},[586],{"type":38,"value":587},"{product.id} \u002F> {",{"type":33,"tag":287,"props":589,"children":590},{"style":294},[591],{"type":38,"value":592},"\u002F* Client Component *\u002F",{"type":33,"tag":287,"props":594,"children":595},{"style":321},[596],{"type":38,"value":525},{"type":33,"tag":287,"props":598,"children":600},{"class":289,"line":599},13,[601,606,610],{"type":33,"tag":287,"props":602,"children":603},{"style":321},[604],{"type":38,"value":605},"    \u003C\u002F",{"type":33,"tag":287,"props":607,"children":608},{"style":478},[609],{"type":38,"value":481},{"type":33,"tag":287,"props":611,"children":612},{"style":321},[613],{"type":38,"value":486},{"type":33,"tag":287,"props":615,"children":617},{"class":289,"line":616},14,[618],{"type":33,"tag":287,"props":619,"children":620},{"style":321},[621],{"type":38,"value":622},"  );\n",{"type":33,"tag":287,"props":624,"children":626},{"class":289,"line":625},15,[627],{"type":33,"tag":287,"props":628,"children":629},{"style":321},[630],{"type":38,"value":525},{"type":33,"tag":287,"props":632,"children":634},{"class":289,"line":633},16,[635],{"type":33,"tag":287,"props":636,"children":637},{"emptyLinePlaceholder":450},[638],{"type":38,"value":453},{"type":33,"tag":287,"props":640,"children":642},{"class":289,"line":641},17,[643],{"type":33,"tag":287,"props":644,"children":645},{"style":294},[646],{"type":38,"value":647},"\u002F\u002F components\u002FAddToCartButton.tsx\n",{"type":33,"tag":287,"props":649,"children":651},{"class":289,"line":650},18,[652,657],{"type":33,"tag":287,"props":653,"children":655},{"style":654},"--shiki-default:#9ECBFF",[656],{"type":38,"value":273},{"type":33,"tag":287,"props":658,"children":659},{"style":321},[660],{"type":38,"value":661},";\n",{"type":33,"tag":287,"props":663,"children":665},{"class":289,"line":664},19,[666,671,676,681,686],{"type":33,"tag":287,"props":667,"children":668},{"style":304},[669],{"type":38,"value":670},"import",{"type":33,"tag":287,"props":672,"children":673},{"style":321},[674],{"type":38,"value":675}," { useState } ",{"type":33,"tag":287,"props":677,"children":678},{"style":304},[679],{"type":38,"value":680},"from",{"type":33,"tag":287,"props":682,"children":683},{"style":654},[684],{"type":38,"value":685}," 'react'",{"type":33,"tag":287,"props":687,"children":688},{"style":321},[689],{"type":38,"value":661},{"type":33,"tag":287,"props":691,"children":693},{"class":289,"line":692},20,[694],{"type":33,"tag":287,"props":695,"children":696},{"emptyLinePlaceholder":450},[697],{"type":38,"value":453},{"type":33,"tag":287,"props":699,"children":701},{"class":289,"line":700},21,[702,707,711,716,720,725,729,733,737,741,745,749],{"type":33,"tag":287,"props":703,"children":704},{"style":304},[705],{"type":38,"value":706},"export",{"type":33,"tag":287,"props":708,"children":709},{"style":304},[710],{"type":38,"value":312},{"type":33,"tag":287,"props":712,"children":713},{"style":315},[714],{"type":38,"value":715}," AddToCartButton",{"type":33,"tag":287,"props":717,"children":718},{"style":321},[719],{"type":38,"value":324},{"type":33,"tag":287,"props":721,"children":722},{"style":327},[723],{"type":38,"value":724},"productId",{"type":33,"tag":287,"props":726,"children":727},{"style":321},[728],{"type":38,"value":335},{"type":33,"tag":287,"props":730,"children":731},{"style":304},[732],{"type":38,"value":340},{"type":33,"tag":287,"props":734,"children":735},{"style":321},[736],{"type":38,"value":345},{"type":33,"tag":287,"props":738,"children":739},{"style":327},[740],{"type":38,"value":724},{"type":33,"tag":287,"props":742,"children":743},{"style":304},[744],{"type":38,"value":340},{"type":33,"tag":287,"props":746,"children":747},{"style":369},[748],{"type":38,"value":372},{"type":33,"tag":287,"props":750,"children":751},{"style":321},[752],{"type":38,"value":753}," }) {\n",{"type":33,"tag":287,"props":755,"children":757},{"class":289,"line":756},22,[758,762,767,772,777,782,787,791,796,801,806],{"type":33,"tag":287,"props":759,"children":760},{"style":304},[761],{"type":38,"value":395},{"type":33,"tag":287,"props":763,"children":764},{"style":321},[765],{"type":38,"value":766}," [",{"type":33,"tag":287,"props":768,"children":769},{"style":369},[770],{"type":38,"value":771},"loading",{"type":33,"tag":287,"props":773,"children":774},{"style":321},[775],{"type":38,"value":776},", ",{"type":33,"tag":287,"props":778,"children":779},{"style":369},[780],{"type":38,"value":781},"setLoading",{"type":33,"tag":287,"props":783,"children":784},{"style":321},[785],{"type":38,"value":786},"] ",{"type":33,"tag":287,"props":788,"children":789},{"style":304},[790],{"type":38,"value":510},{"type":33,"tag":287,"props":792,"children":793},{"style":315},[794],{"type":38,"value":795}," useState",{"type":33,"tag":287,"props":797,"children":798},{"style":321},[799],{"type":38,"value":800},"(",{"type":33,"tag":287,"props":802,"children":803},{"style":369},[804],{"type":38,"value":805},"false",{"type":33,"tag":287,"props":807,"children":808},{"style":321},[809],{"type":38,"value":810},");\n",{"type":33,"tag":287,"props":812,"children":814},{"class":289,"line":813},23,[815],{"type":33,"tag":287,"props":816,"children":817},{"style":294},[818],{"type":38,"value":819},"  \u002F\u002F Gestionnaire onClick, gestion d'état — cette partie nécessite l'hydratation\n",{"type":33,"tag":287,"props":821,"children":823},{"class":289,"line":822},24,[824,828,833,838,843,847,852,857,862,867,871],{"type":33,"tag":287,"props":825,"children":826},{"style":304},[827],{"type":38,"value":462},{"type":33,"tag":287,"props":829,"children":830},{"style":321},[831],{"type":38,"value":832}," \u003C",{"type":33,"tag":287,"props":834,"children":835},{"style":478},[836],{"type":38,"value":837},"button",{"type":33,"tag":287,"props":839,"children":840},{"style":315},[841],{"type":38,"value":842}," onClick",{"type":33,"tag":287,"props":844,"children":845},{"style":304},[846],{"type":38,"value":510},{"type":33,"tag":287,"props":848,"children":849},{"style":321},[850],{"type":38,"value":851},"{() ",{"type":33,"tag":287,"props":853,"children":854},{"style":304},[855],{"type":38,"value":856},"=>",{"type":33,"tag":287,"props":858,"children":859},{"style":315},[860],{"type":38,"value":861}," addToCart",{"type":33,"tag":287,"props":863,"children":864},{"style":321},[865],{"type":38,"value":866},"(productId)}>Ajouter au Panier\u003C\u002F",{"type":33,"tag":287,"props":868,"children":869},{"style":478},[870],{"type":38,"value":837},{"type":33,"tag":287,"props":872,"children":873},{"style":321},[874],{"type":38,"value":875},">;\n",{"type":33,"tag":287,"props":877,"children":879},{"class":289,"line":878},25,[880],{"type":33,"tag":287,"props":881,"children":882},{"style":321},[883],{"type":38,"value":525},{"type":33,"tag":34,"props":885,"children":886},{},[887],{"type":38,"value":888},"Avec cette architecture, ProductPage et ProductDetails ne sont pas hydratés. Seul AddToCartButton est hydraté, c'est-à-dire qu'il devient interactif dans le navigateur. Mesure : le coût d'hydratation de cette page était de 180 ms en SSR classique, 35 ms avec RSC. La différence devient plus nette pour une liste de 50 produits : 9000 ms → 350 ms.",{"type":33,"tag":101,"props":890,"children":892},{"id":891},"tradeoff-streaming-et-limite-suspense",[893],{"type":38,"value":894},"Tradeoff : Streaming et Limite Suspense",{"type":33,"tag":34,"props":896,"children":897},{},[898,900,905],{"type":38,"value":899},"Le deuxième grand avantage de RSC est le ",{"type":33,"tag":41,"props":901,"children":902},{},[903],{"type":38,"value":904},"streaming",{"type":38,"value":906},". Un composant serveur peut envoyer des chunks au client au fur et à mesure de son rendu, sans attendre la page entière. Cela nécessite une limite Suspense :",{"type":33,"tag":277,"props":908,"children":910},{"className":279,"code":909,"language":281,"meta":16,"style":16},"\u003CSuspense fallback={\u003CProductSkeleton \u002F>}>\n  \u003CProductReviews productId={id} \u002F> {\u002F* Appel API lent *\u002F}\n\u003C\u002FSuspense>\n",[911],{"type":33,"tag":268,"props":912,"children":913},{"__ignoreMap":16},[914,951,986],{"type":33,"tag":287,"props":915,"children":916},{"class":289,"line":290},[917,922,927,932,936,941,946],{"type":33,"tag":287,"props":918,"children":919},{"style":321},[920],{"type":38,"value":921},"\u003C",{"type":33,"tag":287,"props":923,"children":924},{"style":369},[925],{"type":38,"value":926},"Suspense",{"type":33,"tag":287,"props":928,"children":929},{"style":315},[930],{"type":38,"value":931}," fallback",{"type":33,"tag":287,"props":933,"children":934},{"style":304},[935],{"type":38,"value":510},{"type":33,"tag":287,"props":937,"children":938},{"style":321},[939],{"type":38,"value":940},"{\u003C",{"type":33,"tag":287,"props":942,"children":943},{"style":369},[944],{"type":38,"value":945},"ProductSkeleton",{"type":33,"tag":287,"props":947,"children":948},{"style":321},[949],{"type":38,"value":950}," \u002F>}>\n",{"type":33,"tag":287,"props":952,"children":953},{"class":289,"line":300},[954,959,964,968,972,977,982],{"type":33,"tag":287,"props":955,"children":956},{"style":321},[957],{"type":38,"value":958},"  \u003C",{"type":33,"tag":287,"props":960,"children":961},{"style":369},[962],{"type":38,"value":963},"ProductReviews",{"type":33,"tag":287,"props":965,"children":966},{"style":315},[967],{"type":38,"value":578},{"type":33,"tag":287,"props":969,"children":970},{"style":304},[971],{"type":38,"value":510},{"type":33,"tag":287,"props":973,"children":974},{"style":321},[975],{"type":38,"value":976},"{id} \u002F> {",{"type":33,"tag":287,"props":978,"children":979},{"style":294},[980],{"type":38,"value":981},"\u002F* Appel API lent *\u002F",{"type":33,"tag":287,"props":983,"children":984},{"style":321},[985],{"type":38,"value":525},{"type":33,"tag":287,"props":987,"children":988},{"class":289,"line":380},[989,994,998],{"type":33,"tag":287,"props":990,"children":991},{"style":321},[992],{"type":38,"value":993},"\u003C\u002F",{"type":33,"tag":287,"props":995,"children":996},{"style":369},[997],{"type":38,"value":926},{"type":33,"tag":287,"props":999,"children":1000},{"style":321},[1001],{"type":38,"value":486},{"type":33,"tag":34,"props":1003,"children":1004},{},[1005,1007,1013],{"type":38,"value":1006},"Pendant que ProductReviews est en cours de chargement, un squelette est affiché ; le reste de la page est déjà chargé. Mesure : Time to Interactive (TTI) passe de 2,4 s à 1,1 s, car les dépendances sur le chemin critique diminuent. Tradeoff : les Server Components étant asynchrones, vous devez gérer les erreurs avec ",{"type":33,"tag":268,"props":1008,"children":1010},{"className":1009},[],[1011],{"type":38,"value":1012},"\u003CErrorBoundary>",{"type":38,"value":1014},".",{"type":33,"tag":49,"props":1016,"children":1018},{"id":1017},"vue-35-transition-api-alternative-dhydratation-partielle",[1019],{"type":38,"value":1020},"Vue 3.5 Transition API : Alternative d'Hydratation Partielle",{"type":33,"tag":34,"props":1022,"children":1023},{},[1024,1026,1032,1034,1040],{"type":38,"value":1025},"L'écosystème Vue n'offre pas une structure équivalente à RSC (Nuxt a des « server components » expérimentaux, mais moins matures que RSC). À la place, l'API de transition de Vue 3.5 et les directives ",{"type":33,"tag":268,"props":1027,"children":1029},{"className":1028},[],[1030],{"type":38,"value":1031},"v-once",{"type":38,"value":1033},"\u002F",{"type":33,"tag":268,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":38,"value":1039},"v-memo",{"type":38,"value":1041}," implémentent l'hydratation partielle.",{"type":33,"tag":277,"props":1043,"children":1047},{"className":1044,"code":1045,"language":1046,"meta":16,"style":16},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Section statique, non incluse dans l'hydratation -->\n    \u003Cdiv v-once>\n      \u003CProductHeader :title=\"product.title\" \u002F>\n      \u003CProductDescription :text=\"product.description\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Section interactive, hydratée -->\n    \u003CProductOptions v-model=\"selectedVariant\" :options=\"product.options\" \u002F>\n    \u003CAddToCart :product-id=\"product.id\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[1048],{"type":33,"tag":268,"props":1049,"children":1050},{"__ignoreMap":16},[1051,1067,1082,1090,1110,1141,1171,1186,1193,1201,1245,1275,1291],{"type":33,"tag":287,"props":1052,"children":1053},{"class":289,"line":290},[1054,1058,1063],{"type":33,"tag":287,"props":1055,"children":1056},{"style":321},[1057],{"type":38,"value":921},{"type":33,"tag":287,"props":1059,"children":1060},{"style":478},[1061],{"type":38,"value":1062},"template",{"type":33,"tag":287,"props":1064,"children":1065},{"style":321},[1066],{"type":38,"value":486},{"type":33,"tag":287,"props":1068,"children":1069},{"class":289,"line":300},[1070,1074,1078],{"type":33,"tag":287,"props":1071,"children":1072},{"style":321},[1073],{"type":38,"value":958},{"type":33,"tag":287,"props":1075,"children":1076},{"style":478},[1077],{"type":38,"value":481},{"type":33,"tag":287,"props":1079,"children":1080},{"style":321},[1081],{"type":38,"value":486},{"type":33,"tag":287,"props":1083,"children":1084},{"class":289,"line":380},[1085],{"type":33,"tag":287,"props":1086,"children":1087},{"style":294},[1088],{"type":38,"value":1089},"    \u003C!-- Section statique, non incluse dans l'hydratation -->\n",{"type":33,"tag":287,"props":1091,"children":1092},{"class":289,"line":389},[1093,1097,1101,1106],{"type":33,"tag":287,"props":1094,"children":1095},{"style":321},[1096],{"type":38,"value":475},{"type":33,"tag":287,"props":1098,"children":1099},{"style":478},[1100],{"type":38,"value":481},{"type":33,"tag":287,"props":1102,"children":1103},{"style":315},[1104],{"type":38,"value":1105}," v-once",{"type":33,"tag":287,"props":1107,"children":1108},{"style":321},[1109],{"type":38,"value":486},{"type":33,"tag":287,"props":1111,"children":1112},{"class":289,"line":428},[1113,1117,1122,1127,1131,1136],{"type":33,"tag":287,"props":1114,"children":1115},{"style":321},[1116],{"type":38,"value":495},{"type":33,"tag":287,"props":1118,"children":1119},{"style":478},[1120],{"type":38,"value":1121},"ProductHeader",{"type":33,"tag":287,"props":1123,"children":1124},{"style":315},[1125],{"type":38,"value":1126}," :title",{"type":33,"tag":287,"props":1128,"children":1129},{"style":321},[1130],{"type":38,"value":510},{"type":33,"tag":287,"props":1132,"children":1133},{"style":654},[1134],{"type":38,"value":1135},"\"product.title\"",{"type":33,"tag":287,"props":1137,"children":1138},{"style":321},[1139],{"type":38,"value":1140}," \u002F>\n",{"type":33,"tag":287,"props":1142,"children":1143},{"class":289,"line":437},[1144,1148,1153,1158,1162,1167],{"type":33,"tag":287,"props":1145,"children":1146},{"style":321},[1147],{"type":38,"value":495},{"type":33,"tag":287,"props":1149,"children":1150},{"style":478},[1151],{"type":38,"value":1152},"ProductDescription",{"type":33,"tag":287,"props":1154,"children":1155},{"style":315},[1156],{"type":38,"value":1157}," :text",{"type":33,"tag":287,"props":1159,"children":1160},{"style":321},[1161],{"type":38,"value":510},{"type":33,"tag":287,"props":1163,"children":1164},{"style":654},[1165],{"type":38,"value":1166},"\"product.description\"",{"type":33,"tag":287,"props":1168,"children":1169},{"style":321},[1170],{"type":38,"value":1140},{"type":33,"tag":287,"props":1172,"children":1173},{"class":289,"line":446},[1174,1178,1182],{"type":33,"tag":287,"props":1175,"children":1176},{"style":321},[1177],{"type":38,"value":605},{"type":33,"tag":287,"props":1179,"children":1180},{"style":478},[1181],{"type":38,"value":481},{"type":33,"tag":287,"props":1183,"children":1184},{"style":321},[1185],{"type":38,"value":486},{"type":33,"tag":287,"props":1187,"children":1188},{"class":289,"line":456},[1189],{"type":33,"tag":287,"props":1190,"children":1191},{"emptyLinePlaceholder":450},[1192],{"type":38,"value":453},{"type":33,"tag":287,"props":1194,"children":1195},{"class":289,"line":27},[1196],{"type":33,"tag":287,"props":1197,"children":1198},{"style":294},[1199],{"type":38,"value":1200},"    \u003C!-- Section interactive, hydratée -->\n",{"type":33,"tag":287,"props":1202,"children":1203},{"class":289,"line":489},[1204,1208,1213,1218,1222,1227,1232,1236,1241],{"type":33,"tag":287,"props":1205,"children":1206},{"style":321},[1207],{"type":38,"value":475},{"type":33,"tag":287,"props":1209,"children":1210},{"style":478},[1211],{"type":38,"value":1212},"ProductOptions",{"type":33,"tag":287,"props":1214,"children":1215},{"style":315},[1216],{"type":38,"value":1217}," v-model",{"type":33,"tag":287,"props":1219,"children":1220},{"style":321},[1221],{"type":38,"value":510},{"type":33,"tag":287,"props":1223,"children":1224},{"style":654},[1225],{"type":38,"value":1226},"\"selectedVariant\"",{"type":33,"tag":287,"props":1228,"children":1229},{"style":315},[1230],{"type":38,"value":1231}," :options",{"type":33,"tag":287,"props":1233,"children":1234},{"style":321},[1235],{"type":38,"value":510},{"type":33,"tag":287,"props":1237,"children":1238},{"style":654},[1239],{"type":38,"value":1240},"\"product.options\"",{"type":33,"tag":287,"props":1242,"children":1243},{"style":321},[1244],{"type":38,"value":1140},{"type":33,"tag":287,"props":1246,"children":1247},{"class":289,"line":528},[1248,1252,1257,1262,1266,1271],{"type":33,"tag":287,"props":1249,"children":1250},{"style":321},[1251],{"type":38,"value":475},{"type":33,"tag":287,"props":1253,"children":1254},{"style":478},[1255],{"type":38,"value":1256},"AddToCart",{"type":33,"tag":287,"props":1258,"children":1259},{"style":315},[1260],{"type":38,"value":1261}," :product-id",{"type":33,"tag":287,"props":1263,"children":1264},{"style":321},[1265],{"type":38,"value":510},{"type":33,"tag":287,"props":1267,"children":1268},{"style":654},[1269],{"type":38,"value":1270},"\"product.id\"",{"type":33,"tag":287,"props":1272,"children":1273},{"style":321},[1274],{"type":38,"value":1140},{"type":33,"tag":287,"props":1276,"children":1277},{"class":289,"line":563},[1278,1283,1287],{"type":33,"tag":287,"props":1279,"children":1280},{"style":321},[1281],{"type":38,"value":1282},"  \u003C\u002F",{"type":33,"tag":287,"props":1284,"children":1285},{"style":478},[1286],{"type":38,"value":481},{"type":33,"tag":287,"props":1288,"children":1289},{"style":321},[1290],{"type":38,"value":486},{"type":33,"tag":287,"props":1292,"children":1293},{"class":289,"line":599},[1294,1298,1302],{"type":33,"tag":287,"props":1295,"children":1296},{"style":321},[1297],{"type":38,"value":993},{"type":33,"tag":287,"props":1299,"children":1300},{"style":478},[1301],{"type":38,"value":1062},{"type":33,"tag":287,"props":1303,"children":1304},{"style":321},[1305],{"type":38,"value":486},{"type":33,"tag":34,"props":1307,"children":1308},{},[1309,1311,1316,1318,1323,1325,1330],{"type":38,"value":1310},"La directive ",{"type":33,"tag":268,"props":1312,"children":1314},{"className":1313},[],[1315],{"type":38,"value":1031},{"type":38,"value":1317}," indique au composant qu'il ne changera pas après son premier rendu. Vue omet cette section de l'hydratation. Benchmark : sur une liste de 400 produits, la combinaison ",{"type":33,"tag":268,"props":1319,"children":1321},{"className":1320},[],[1322],{"type":38,"value":1031},{"type":38,"value":1324}," + ",{"type":33,"tag":268,"props":1326,"children":1328},{"className":1327},[],[1329],{"type":38,"value":1039},{"type":38,"value":1331}," a réduit le temps d'hydratation de 520 ms à 140 ms.",{"type":33,"tag":34,"props":1333,"children":1334},{},[1335,1337,1341,1343,1347,1349,1353],{"type":38,"value":1336},"Différence : contrairement à RSC, cela n'enlève pas de code du ",{"type":33,"tag":41,"props":1338,"children":1339},{},[1340],{"type":38,"value":74},{"type":38,"value":1342},", mais l'omet de l'hydratation. Le code JS va au client, mais n'est pas exécuté. Gain du ",{"type":33,"tag":41,"props":1344,"children":1345},{},[1346],{"type":38,"value":74},{"type":38,"value":1348}," : 15–20 %, gain d'hydratation : 70–75 %. Avec RSC, le gain du ",{"type":33,"tag":41,"props":1350,"children":1351},{},[1352],{"type":38,"value":74},{"type":38,"value":1354}," est de 40 %, d'hydratation de 80 %.",{"type":33,"tag":101,"props":1356,"children":1358},{"id":1357},"nuxt-3-architecture-en-îles",[1359],{"type":38,"value":1360},"Nuxt 3 + Architecture en Îles",{"type":33,"tag":34,"props":1362,"children":1363},{},[1364,1366,1372],{"type":38,"value":1365},"Nuxt 3 offre le composant ",{"type":33,"tag":268,"props":1367,"children":1369},{"className":1368},[],[1370],{"type":38,"value":1371},"\u003CNuxtIsland>",{"type":38,"value":1373}," qui se comporte comme RSC (fonctionnalité expérimentale, stable à partir de Nuxt 3.9). Vous pouvez définir des composants isolés rendus sur le serveur et non hydratés au client :",{"type":33,"tag":277,"props":1375,"children":1377},{"className":1044,"code":1376,"language":1046,"meta":16,"style":16},"\u003C!-- pages\u002Fproduct\u002F[id].vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtIsland name=\"ProductHero\" :props=\"{ product }\" \u002F>\n    \u003CClientOnly>\n      \u003CProductConfigurator :product=\"product\" \u002F>\n    \u003C\u002FClientOnly>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1378],{"type":33,"tag":268,"props":1379,"children":1380},{"__ignoreMap":16},[1381,1389,1404,1419,1463,1479,1509,1524,1539],{"type":33,"tag":287,"props":1382,"children":1383},{"class":289,"line":290},[1384],{"type":33,"tag":287,"props":1385,"children":1386},{"style":294},[1387],{"type":38,"value":1388},"\u003C!-- pages\u002Fproduct\u002F[id].vue -->\n",{"type":33,"tag":287,"props":1390,"children":1391},{"class":289,"line":300},[1392,1396,1400],{"type":33,"tag":287,"props":1393,"children":1394},{"style":321},[1395],{"type":38,"value":921},{"type":33,"tag":287,"props":1397,"children":1398},{"style":478},[1399],{"type":38,"value":1062},{"type":33,"tag":287,"props":1401,"children":1402},{"style":321},[1403],{"type":38,"value":486},{"type":33,"tag":287,"props":1405,"children":1406},{"class":289,"line":380},[1407,1411,1415],{"type":33,"tag":287,"props":1408,"children":1409},{"style":321},[1410],{"type":38,"value":958},{"type":33,"tag":287,"props":1412,"children":1413},{"style":478},[1414],{"type":38,"value":481},{"type":33,"tag":287,"props":1416,"children":1417},{"style":321},[1418],{"type":38,"value":486},{"type":33,"tag":287,"props":1420,"children":1421},{"class":289,"line":389},[1422,1426,1431,1436,1440,1445,1450,1454,1459],{"type":33,"tag":287,"props":1423,"children":1424},{"style":321},[1425],{"type":38,"value":475},{"type":33,"tag":287,"props":1427,"children":1428},{"style":478},[1429],{"type":38,"value":1430},"NuxtIsland",{"type":33,"tag":287,"props":1432,"children":1433},{"style":315},[1434],{"type":38,"value":1435}," name",{"type":33,"tag":287,"props":1437,"children":1438},{"style":321},[1439],{"type":38,"value":510},{"type":33,"tag":287,"props":1441,"children":1442},{"style":654},[1443],{"type":38,"value":1444},"\"ProductHero\"",{"type":33,"tag":287,"props":1446,"children":1447},{"style":315},[1448],{"type":38,"value":1449}," :props",{"type":33,"tag":287,"props":1451,"children":1452},{"style":321},[1453],{"type":38,"value":510},{"type":33,"tag":287,"props":1455,"children":1456},{"style":654},[1457],{"type":38,"value":1458},"\"{ product }\"",{"type":33,"tag":287,"props":1460,"children":1461},{"style":321},[1462],{"type":38,"value":1140},{"type":33,"tag":287,"props":1464,"children":1465},{"class":289,"line":428},[1466,1470,1475],{"type":33,"tag":287,"props":1467,"children":1468},{"style":321},[1469],{"type":38,"value":475},{"type":33,"tag":287,"props":1471,"children":1472},{"style":478},[1473],{"type":38,"value":1474},"ClientOnly",{"type":33,"tag":287,"props":1476,"children":1477},{"style":321},[1478],{"type":38,"value":486},{"type":33,"tag":287,"props":1480,"children":1481},{"class":289,"line":437},[1482,1486,1491,1496,1500,1505],{"type":33,"tag":287,"props":1483,"children":1484},{"style":321},[1485],{"type":38,"value":495},{"type":33,"tag":287,"props":1487,"children":1488},{"style":478},[1489],{"type":38,"value":1490},"ProductConfigurator",{"type":33,"tag":287,"props":1492,"children":1493},{"style":315},[1494],{"type":38,"value":1495}," :product",{"type":33,"tag":287,"props":1497,"children":1498},{"style":321},[1499],{"type":38,"value":510},{"type":33,"tag":287,"props":1501,"children":1502},{"style":654},[1503],{"type":38,"value":1504},"\"product\"",{"type":33,"tag":287,"props":1506,"children":1507},{"style":321},[1508],{"type":38,"value":1140},{"type":33,"tag":287,"props":1510,"children":1511},{"class":289,"line":446},[1512,1516,1520],{"type":33,"tag":287,"props":1513,"children":1514},{"style":321},[1515],{"type":38,"value":605},{"type":33,"tag":287,"props":1517,"children":1518},{"style":478},[1519],{"type":38,"value":1474},{"type":33,"tag":287,"props":1521,"children":1522},{"style":321},[1523],{"type":38,"value":486},{"type":33,"tag":287,"props":1525,"children":1526},{"class":289,"line":456},[1527,1531,1535],{"type":33,"tag":287,"props":1528,"children":1529},{"style":321},[1530],{"type":38,"value":1282},{"type":33,"tag":287,"props":1532,"children":1533},{"style":478},[1534],{"type":38,"value":481},{"type":33,"tag":287,"props":1536,"children":1537},{"style":321},[1538],{"type":38,"value":486},{"type":33,"tag":287,"props":1540,"children":1541},{"class":289,"line":27},[1542,1546,1550],{"type":33,"tag":287,"props":1543,"children":1544},{"style":321},[1545],{"type":38,"value":993},{"type":33,"tag":287,"props":1547,"children":1548},{"style":478},[1549],{"type":38,"value":1062},{"type":33,"tag":287,"props":1551,"children":1552},{"style":321},[1553],{"type":38,"value":486},{"type":33,"tag":34,"props":1555,"children":1556},{},[1557],{"type":38,"value":1558},"ProductHero est rendu en tant qu'île sur le serveur, ProductConfigurator est monté uniquement au client. Coût d'hydratation : 200 ms → 45 ms. Attention : le partage d'état réactif entre îles est difficile ; vous devez le gérer via un store global (Pinia).",{"type":33,"tag":49,"props":1560,"children":1562},{"id":1561},"ssr-aux-limites-la-forme-distribuée-des-server-components",[1563],{"type":38,"value":1564},"SSR aux Limites : La Forme Distribuée des Server Components",{"type":33,"tag":34,"props":1566,"children":1567},{},[1568],{"type":38,"value":1569},"Les runtimes en périphérie comme Cloudflare Workers, Vercel Edge Functions, Deno Deploy rapprochent le SSR géographiquement de l'utilisateur. Le TTFB (Time to First Byte) moyen passe de 450 ms en SSR classique à 80–120 ms en SSR en périphérie (Cloudflare Q4 2025).",{"type":33,"tag":34,"props":1571,"children":1572},{},[1573,1575,1580],{"type":38,"value":1574},"L'utilisation de RSC sur des runtimes en périphérie est particulièrement efficace : le rendu du Server Component se fait à partir de la périphérie, les appels API se font aussi à partir de la périphérie, sans besoin de revenir à l'origine. Exemple : Next.js 15 + Cloudflare Pages + R2 ",{"type":33,"tag":41,"props":1576,"children":1577},{},[1578],{"type":38,"value":1579},"object storage",{"type":38,"value":1581}," où les images de produits sont servies à partir de la périphérie, les données de produit sont rendues en RSC à partir de la périphérie, seul l'état du panier reste au client.",{"type":33,"tag":277,"props":1583,"children":1587},{"className":1584,"code":1585,"language":1586,"meta":16,"style":16},"language-typescript shiki shiki-themes github-dark","\u002F\u002F middleware.ts — Edge Runtime\nexport const config = { runtime: 'edge' };\n\nexport default async function middleware(request: Request) {\n  const url = new URL(request.url);\n  if (url.pathname.startsWith('\u002Fproduct\u002F')) {\n    \u002F\u002F Recherche en cache à la périphérie\n    const cached = await caches.default.match(request);\n    if (cached) return cached;\n    \n    \u002F\u002F Rendu du Server Component en périphérie\n    return fetch(request);\n  }\n}\n","typescript",[1588],{"type":33,"tag":268,"props":1589,"children":1590},{"__ignoreMap":16},[1591,1599,1635,1642,1691,1722,1754,1762,1798,1821,1829,1837,1854,1862],{"type":33,"tag":287,"props":1592,"children":1593},{"class":289,"line":290},[1594],{"type":33,"tag":287,"props":1595,"children":1596},{"style":294},[1597],{"type":38,"value":1598},"\u002F\u002F middleware.ts — Edge Runtime\n",{"type":33,"tag":287,"props":1600,"children":1601},{"class":289,"line":300},[1602,1606,1611,1616,1620,1625,1630],{"type":33,"tag":287,"props":1603,"children":1604},{"style":304},[1605],{"type":38,"value":706},{"type":33,"tag":287,"props":1607,"children":1608},{"style":304},[1609],{"type":38,"value":1610}," const",{"type":33,"tag":287,"props":1612,"children":1613},{"style":369},[1614],{"type":38,"value":1615}," config",{"type":33,"tag":287,"props":1617,"children":1618},{"style":304},[1619],{"type":38,"value":405},{"type":33,"tag":287,"props":1621,"children":1622},{"style":321},[1623],{"type":38,"value":1624}," { runtime: ",{"type":33,"tag":287,"props":1626,"children":1627},{"style":654},[1628],{"type":38,"value":1629},"'edge'",{"type":33,"tag":287,"props":1631,"children":1632},{"style":321},[1633],{"type":38,"value":1634}," };\n",{"type":33,"tag":287,"props":1636,"children":1637},{"class":289,"line":380},[1638],{"type":33,"tag":287,"props":1639,"children":1640},{"emptyLinePlaceholder":450},[1641],{"type":38,"value":453},{"type":33,"tag":287,"props":1643,"children":1644},{"class":289,"line":389},[1645,1649,1654,1659,1663,1668,1672,1677,1681,1686],{"type":33,"tag":287,"props":1646,"children":1647},{"style":304},[1648],{"type":38,"value":706},{"type":33,"tag":287,"props":1650,"children":1651},{"style":304},[1652],{"type":38,"value":1653}," default",{"type":33,"tag":287,"props":1655,"children":1656},{"style":304},[1657],{"type":38,"value":1658}," async",{"type":33,"tag":287,"props":1660,"children":1661},{"style":304},[1662],{"type":38,"value":312},{"type":33,"tag":287,"props":1664,"children":1665},{"style":315},[1666],{"type":38,"value":1667}," middleware",{"type":33,"tag":287,"props":1669,"children":1670},{"style":321},[1671],{"type":38,"value":800},{"type":33,"tag":287,"props":1673,"children":1674},{"style":327},[1675],{"type":38,"value":1676},"request",{"type":33,"tag":287,"props":1678,"children":1679},{"style":304},[1680],{"type":38,"value":340},{"type":33,"tag":287,"props":1682,"children":1683},{"style":315},[1684],{"type":38,"value":1685}," Request",{"type":33,"tag":287,"props":1687,"children":1688},{"style":321},[1689],{"type":38,"value":1690},") {\n",{"type":33,"tag":287,"props":1692,"children":1693},{"class":289,"line":428},[1694,1698,1703,1707,1712,1717],{"type":33,"tag":287,"props":1695,"children":1696},{"style":304},[1697],{"type":38,"value":395},{"type":33,"tag":287,"props":1699,"children":1700},{"style":369},[1701],{"type":38,"value":1702}," url",{"type":33,"tag":287,"props":1704,"children":1705},{"style":304},[1706],{"type":38,"value":405},{"type":33,"tag":287,"props":1708,"children":1709},{"style":304},[1710],{"type":38,"value":1711}," new",{"type":33,"tag":287,"props":1713,"children":1714},{"style":315},[1715],{"type":38,"value":1716}," URL",{"type":33,"tag":287,"props":1718,"children":1719},{"style":321},[1720],{"type":38,"value":1721},"(request.url);\n",{"type":33,"tag":287,"props":1723,"children":1724},{"class":289,"line":437},[1725,1730,1735,1740,1744,1749],{"type":33,"tag":287,"props":1726,"children":1727},{"style":304},[1728],{"type":38,"value":1729},"  if",{"type":33,"tag":287,"props":1731,"children":1732},{"style":321},[1733],{"type":38,"value":1734}," (url.pathname.",{"type":33,"tag":287,"props":1736,"children":1737},{"style":315},[1738],{"type":38,"value":1739},"startsWith",{"type":33,"tag":287,"props":1741,"children":1742},{"style":321},[1743],{"type":38,"value":800},{"type":33,"tag":287,"props":1745,"children":1746},{"style":654},[1747],{"type":38,"value":1748},"'\u002Fproduct\u002F'",{"type":33,"tag":287,"props":1750,"children":1751},{"style":321},[1752],{"type":38,"value":1753},")) {\n",{"type":33,"tag":287,"props":1755,"children":1756},{"class":289,"line":446},[1757],{"type":33,"tag":287,"props":1758,"children":1759},{"style":294},[1760],{"type":38,"value":1761},"    \u002F\u002F Recherche en cache à la périphérie\n",{"type":33,"tag":287,"props":1763,"children":1764},{"class":289,"line":456},[1765,1770,1775,1779,1783,1788,1793],{"type":33,"tag":287,"props":1766,"children":1767},{"style":304},[1768],{"type":38,"value":1769},"    const",{"type":33,"tag":287,"props":1771,"children":1772},{"style":369},[1773],{"type":38,"value":1774}," cached",{"type":33,"tag":287,"props":1776,"children":1777},{"style":304},[1778],{"type":38,"value":405},{"type":33,"tag":287,"props":1780,"children":1781},{"style":304},[1782],{"type":38,"value":410},{"type":33,"tag":287,"props":1784,"children":1785},{"style":321},[1786],{"type":38,"value":1787}," caches.default.",{"type":33,"tag":287,"props":1789,"children":1790},{"style":315},[1791],{"type":38,"value":1792},"match",{"type":33,"tag":287,"props":1794,"children":1795},{"style":321},[1796],{"type":38,"value":1797},"(request);\n",{"type":33,"tag":287,"props":1799,"children":1800},{"class":289,"line":27},[1801,1806,1811,1816],{"type":33,"tag":287,"props":1802,"children":1803},{"style":304},[1804],{"type":38,"value":1805},"    if",{"type":33,"tag":287,"props":1807,"children":1808},{"style":321},[1809],{"type":38,"value":1810}," (cached) ",{"type":33,"tag":287,"props":1812,"children":1813},{"style":304},[1814],{"type":38,"value":1815},"return",{"type":33,"tag":287,"props":1817,"children":1818},{"style":321},[1819],{"type":38,"value":1820}," cached;\n",{"type":33,"tag":287,"props":1822,"children":1823},{"class":289,"line":489},[1824],{"type":33,"tag":287,"props":1825,"children":1826},{"style":321},[1827],{"type":38,"value":1828},"    \n",{"type":33,"tag":287,"props":1830,"children":1831},{"class":289,"line":528},[1832],{"type":33,"tag":287,"props":1833,"children":1834},{"style":294},[1835],{"type":38,"value":1836},"    \u002F\u002F Rendu du Server Component en périphérie\n",{"type":33,"tag":287,"props":1838,"children":1839},{"class":289,"line":563},[1840,1845,1850],{"type":33,"tag":287,"props":1841,"children":1842},{"style":304},[1843],{"type":38,"value":1844},"    return",{"type":33,"tag":287,"props":1846,"children":1847},{"style":315},[1848],{"type":38,"value":1849}," fetch",{"type":33,"tag":287,"props":1851,"children":1852},{"style":321},[1853],{"type":38,"value":1797},{"type":33,"tag":287,"props":1855,"children":1856},{"class":289,"line":599},[1857],{"type":33,"tag":287,"props":1858,"children":1859},{"style":321},[1860],{"type":38,"value":1861},"  }\n",{"type":33,"tag":287,"props":1863,"children":1864},{"class":289,"line":616},[1865],{"type":33,"tag":287,"props":1866,"children":1867},{"style":321},[1868],{"type":38,"value":525},{"type":33,"tag":34,"props":1870,"children":1871},{},[1872],{"type":38,"value":1873},"Mesure : pour un utilisateur accédant depuis Istanbul, TTFB de 240 ms (PoP de périphérie à Francfort), hydratation 80 ms, INP 120 ms. Avec SSR classique à l'origine : 580 ms, 400 ms, 650 ms respectivement. Passage en bande « good » pour les trois métriques Core Web Vitals.",{"type":33,"tag":49,"props":1875,"children":1877},{"id":1876},"reporter-linteractivité-pattern-idle-until-urgent",[1878],{"type":38,"value":1879},"Reporter l'Interactivité : Pattern Idle Until Urgent",{"type":33,"tag":34,"props":1881,"children":1882},{},[1883],{"type":38,"value":1884},"RSC et l'hydratation partielle trouvent un complément dans le report de l'interactivité inutile. Le pattern « idle until urgent » signifie ne pas hydrater un composant jusqu'à ce que l'utilisateur interagisse.",{"type":33,"tag":277,"props":1886,"children":1888},{"className":279,"code":1887,"language":281,"meta":16,"style":16},"\u002F\u002F React 19 + Next.js 15\n'use client';\nimport { useEffect, useState } from 'react';\n\nexport function ProductRecommendations({ productId }: { productId: string }) {\n  const [hydrated, setHydrated] = useState(false);\n\n  useEffect(() => {\n    \u002F\u002F Hydrater 2 secondes après le chargement de la page ou à l'arrivée du viewport\n    const timer = setTimeout(() => setHydrated(true), 2000);\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) setHydrated(true);\n    });\n    observer.observe(document.getElementById('recommendations')!);\n    \n    return () => {\n      clearTimeout(timer);\n      observer.disconnect();\n    };\n  }, []);\n\n  if (!hydrated) {\n    return \u003Cdiv id=\"recommendations\">Chargement...\u003C\u002Fdiv>;\n  }\n\n  return \u003CRecommendationCarousel productId={productId} \u002F>;\n}\n",[1889],{"type":33,"tag":268,"props":1890,"children":1891},{"__ignoreMap":16},[1892,1900,1911,1935,1942,1994,2043,2050,2072,2080,2137,2185,2214,2222,2268,2275,2295,2308,2326,2334,2342,2349,2370,2412,2419,2426,2456],{"type":33,"tag":287,"props":1893,"children":1894},{"class":289,"line":290},[1895],{"type":33,"tag":287,"props":1896,"children":1897},{"style":294},[1898],{"type":38,"value":1899},"\u002F\u002F React 19 + Next.js 15\n",{"type":33,"tag":287,"props":1901,"children":1902},{"class":289,"line":300},[1903,1907],{"type":33,"tag":287,"props":1904,"children":1905},{"style":654},[1906],{"type":38,"value":273},{"type":33,"tag":287,"props":1908,"children":1909},{"style":321},[1910],{"type":38,"value":661},{"type":33,"tag":287,"props":1912,"children":1913},{"class":289,"line":380},[1914,1918,1923,1927,1931],{"type":33,"tag":287,"props":1915,"children":1916},{"style":304},[1917],{"type":38,"value":670},{"type":33,"tag":287,"props":1919,"children":1920},{"style":321},[1921],{"type":38,"value":1922}," { useEffect, useState } ",{"type":33,"tag":287,"props":1924,"children":1925},{"style":304},[1926],{"type":38,"value":680},{"type":33,"tag":287,"props":1928,"children":1929},{"style":654},[1930],{"type":38,"value":685},{"type":33,"tag":287,"props":1932,"children":1933},{"style":321},[1934],{"type":38,"value":661},{"type":33,"tag":287,"props":1936,"children":1937},{"class":289,"line":389},[1938],{"type":33,"tag":287,"props":1939,"children":1940},{"emptyLinePlaceholder":450},[1941],{"type":38,"value":453},{"type":33,"tag":287,"props":1943,"children":1944},{"class":289,"line":428},[1945,1949,1953,1958,1962,1966,1970,1974,1978,1982,1986,1990],{"type":33,"tag":287,"props":1946,"children":1947},{"style":304},[1948],{"type":38,"value":706},{"type":33,"tag":287,"props":1950,"children":1951},{"style":304},[1952],{"type":38,"value":312},{"type":33,"tag":287,"props":1954,"children":1955},{"style":315},[1956],{"type":38,"value":1957}," ProductRecommendations",{"type":33,"tag":287,"props":1959,"children":1960},{"style":321},[1961],{"type":38,"value":324},{"type":33,"tag":287,"props":1963,"children":1964},{"style":327},[1965],{"type":38,"value":724},{"type":33,"tag":287,"props":1967,"children":1968},{"style":321},[1969],{"type":38,"value":335},{"type":33,"tag":287,"props":1971,"children":1972},{"style":304},[1973],{"type":38,"value":340},{"type":33,"tag":287,"props":1975,"children":1976},{"style":321},[1977],{"type":38,"value":345},{"type":33,"tag":287,"props":1979,"children":1980},{"style":327},[1981],{"type":38,"value":724},{"type":33,"tag":287,"props":1983,"children":1984},{"style":304},[1985],{"type":38,"value":340},{"type":33,"tag":287,"props":1987,"children":1988},{"style":369},[1989],{"type":38,"value":372},{"type":33,"tag":287,"props":1991,"children":1992},{"style":321},[1993],{"type":38,"value":753},{"type":33,"tag":287,"props":1995,"children":1996},{"class":289,"line":437},[1997,2001,2005,2010,2014,2019,2023,2027,2031,2035,2039],{"type":33,"tag":287,"props":1998,"children":1999},{"style":304},[2000],{"type":38,"value":395},{"type":33,"tag":287,"props":2002,"children":2003},{"style":321},[2004],{"type":38,"value":766},{"type":33,"tag":287,"props":2006,"children":2007},{"style":369},[2008],{"type":38,"value":2009},"hydrated",{"type":33,"tag":287,"props":2011,"children":2012},{"style":321},[2013],{"type":38,"value":776},{"type":33,"tag":287,"props":2015,"children":2016},{"style":369},[2017],{"type":38,"value":2018},"setHydrated",{"type":33,"tag":287,"props":2020,"children":2021},{"style":321},[2022],{"type":38,"value":786},{"type":33,"tag":287,"props":2024,"children":2025},{"style":304},[2026],{"type":38,"value":510},{"type":33,"tag":287,"props":2028,"children":2029},{"style":315},[2030],{"type":38,"value":795},{"type":33,"tag":287,"props":2032,"children":2033},{"style":321},[2034],{"type":38,"value":800},{"type":33,"tag":287,"props":2036,"children":2037},{"style":369},[2038],{"type":38,"value":805},{"type":33,"tag":287,"props":2040,"children":2041},{"style":321},[2042],{"type":38,"value":810},{"type":33,"tag":287,"props":2044,"children":2045},{"class":289,"line":446},[2046],{"type":33,"tag":287,"props":2047,"children":2048},{"emptyLinePlaceholder":450},[2049],{"type":38,"value":453},{"type":33,"tag":287,"props":2051,"children":2052},{"class":289,"line":456},[2053,2058,2063,2067],{"type":33,"tag":287,"props":2054,"children":2055},{"style":315},[2056],{"type":38,"value":2057},"  useEffect",{"type":33,"tag":287,"props":2059,"children":2060},{"style":321},[2061],{"type":38,"value":2062},"(() ",{"type":33,"tag":287,"props":2064,"children":2065},{"style":304},[2066],{"type":38,"value":856},{"type":33,"tag":287,"props":2068,"children":2069},{"style":321},[2070],{"type":38,"value":2071}," {\n",{"type":33,"tag":287,"props":2073,"children":2074},{"class":289,"line":27},[2075],{"type":33,"tag":287,"props":2076,"children":2077},{"style":294},[2078],{"type":38,"value":2079},"    \u002F\u002F Hydrater 2 secondes après le chargement de la page ou à l'arrivée du viewport\n",{"type":33,"tag":287,"props":2081,"children":2082},{"class":289,"line":489},[2083,2087,2092,2096,2101,2105,2109,2114,2118,2123,2128,2133],{"type":33,"tag":287,"props":2084,"children":2085},{"style":304},[2086],{"type":38,"value":1769},{"type":33,"tag":287,"props":2088,"children":2089},{"style":369},[2090],{"type":38,"value":2091}," timer",{"type":33,"tag":287,"props":2093,"children":2094},{"style":304},[2095],{"type":38,"value":405},{"type":33,"tag":287,"props":2097,"children":2098},{"style":315},[2099],{"type":38,"value":2100}," setTimeout",{"type":33,"tag":287,"props":2102,"children":2103},{"style":321},[2104],{"type":38,"value":2062},{"type":33,"tag":287,"props":2106,"children":2107},{"style":304},[2108],{"type":38,"value":856},{"type":33,"tag":287,"props":2110,"children":2111},{"style":315},[2112],{"type":38,"value":2113}," setHydrated",{"type":33,"tag":287,"props":2115,"children":2116},{"style":321},[2117],{"type":38,"value":800},{"type":33,"tag":287,"props":2119,"children":2120},{"style":369},[2121],{"type":38,"value":2122},"true",{"type":33,"tag":287,"props":2124,"children":2125},{"style":321},[2126],{"type":38,"value":2127},"), ",{"type":33,"tag":287,"props":2129,"children":2130},{"style":369},[2131],{"type":38,"value":2132},"2000",{"type":33,"tag":287,"props":2134,"children":2135},{"style":321},[2136],{"type":38,"value":810},{"type":33,"tag":287,"props":2138,"children":2139},{"class":289,"line":528},[2140,2144,2149,2153,2157,2162,2167,2172,2177,2181],{"type":33,"tag":287,"props":2141,"children":2142},{"style":304},[2143],{"type":38,"value":1769},{"type":33,"tag":287,"props":2145,"children":2146},{"style":369},[2147],{"type":38,"value":2148}," observer",{"type":33,"tag":287,"props":2150,"children":2151},{"style":304},[2152],{"type":38,"value":405},{"type":33,"tag":287,"props":2154,"children":2155},{"style":304},[2156],{"type":38,"value":1711},{"type":33,"tag":287,"props":2158,"children":2159},{"style":315},[2160],{"type":38,"value":2161}," IntersectionObserver",{"type":33,"tag":287,"props":2163,"children":2164},{"style":321},[2165],{"type":38,"value":2166},"(([",{"type":33,"tag":287,"props":2168,"children":2169},{"style":327},[2170],{"type":38,"value":2171},"entry",{"type":33,"tag":287,"props":2173,"children":2174},{"style":321},[2175],{"type":38,"value":2176},"]) ",{"type":33,"tag":287,"props":2178,"children":2179},{"style":304},[2180],{"type":38,"value":856},{"type":33,"tag":287,"props":2182,"children":2183},{"style":321},[2184],{"type":38,"value":2071},{"type":33,"tag":287,"props":2186,"children":2187},{"class":289,"line":563},[2188,2193,2198,2202,2206,2210],{"type":33,"tag":287,"props":2189,"children":2190},{"style":304},[2191],{"type":38,"value":2192},"      if",{"type":33,"tag":287,"props":2194,"children":2195},{"style":321},[2196],{"type":38,"value":2197}," (entry.isIntersecting) ",{"type":33,"tag":287,"props":2199,"children":2200},{"style":315},[2201],{"type":38,"value":2018},{"type":33,"tag":287,"props":2203,"children":2204},{"style":321},[2205],{"type":38,"value":800},{"type":33,"tag":287,"props":2207,"children":2208},{"style":369},[2209],{"type":38,"value":2122},{"type":33,"tag":287,"props":2211,"children":2212},{"style":321},[2213],{"type":38,"value":810},{"type":33,"tag":287,"props":2215,"children":2216},{"class":289,"line":599},[2217],{"type":33,"tag":287,"props":2218,"children":2219},{"style":321},[2220],{"type":38,"value":2221},"    });\n",{"type":33,"tag":287,"props":2223,"children":2224},{"class":289,"line":616},[2225,2230,2235,2240,2245,2249,2254,2259,2264],{"type":33,"tag":287,"props":2226,"children":2227},{"style":321},[2228],{"type":38,"value":2229},"    observer.",{"type":33,"tag":287,"props":2231,"children":2232},{"style":315},[2233],{"type":38,"value":2234},"observe",{"type":33,"tag":287,"props":2236,"children":2237},{"style":321},[2238],{"type":38,"value":2239},"(document.",{"type":33,"tag":287,"props":2241,"children":2242},{"style":315},[2243],{"type":38,"value":2244},"getElementById",{"type":33,"tag":287,"props":2246,"children":2247},{"style":321},[2248],{"type":38,"value":800},{"type":33,"tag":287,"props":2250,"children":2251},{"style":654},[2252],{"type":38,"value":2253},"'recommendations'",{"type":33,"tag":287,"props":2255,"children":2256},{"style":321},[2257],{"type":38,"value":2258},")",{"type":33,"tag":287,"props":2260,"children":2261},{"style":304},[2262],{"type":38,"value":2263},"!",{"type":33,"tag":287,"props":2265,"children":2266},{"style":321},[2267],{"type":38,"value":810},{"type":33,"tag":287,"props":2269,"children":2270},{"class":289,"line":625},[2271],{"type":33,"tag":287,"props":2272,"children":2273},{"style":321},[2274],{"type":38,"value":1828},{"type":33,"tag":287,"props":2276,"children":2277},{"class":289,"line":633},[2278,2282,2287,2291],{"type":33,"tag":287,"props":2279,"children":2280},{"style":304},[2281],{"type":38,"value":1844},{"type":33,"tag":287,"props":2283,"children":2284},{"style":321},[2285],{"type":38,"value":2286}," () ",{"type":33,"tag":287,"props":2288,"children":2289},{"style":304},[2290],{"type":38,"value":856},{"type":33,"tag":287,"props":2292,"children":2293},{"style":321},[2294],{"type":38,"value":2071},{"type":33,"tag":287,"props":2296,"children":2297},{"class":289,"line":641},[2298,2303],{"type":33,"tag":287,"props":2299,"children":2300},{"style":315},[2301],{"type":38,"value":2302},"      clearTimeout",{"type":33,"tag":287,"props":2304,"children":2305},{"style":321},[2306],{"type":38,"value":2307},"(timer);\n",{"type":33,"tag":287,"props":2309,"children":2310},{"class":289,"line":650},[2311,2316,2321],{"type":33,"tag":287,"props":2312,"children":2313},{"style":321},[2314],{"type":38,"value":2315},"      observer.",{"type":33,"tag":287,"props":2317,"children":2318},{"style":315},[2319],{"type":38,"value":2320},"disconnect",{"type":33,"tag":287,"props":2322,"children":2323},{"style":321},[2324],{"type":38,"value":2325},"();\n",{"type":33,"tag":287,"props":2327,"children":2328},{"class":289,"line":664},[2329],{"type":33,"tag":287,"props":2330,"children":2331},{"style":321},[2332],{"type":38,"value":2333},"    };\n",{"type":33,"tag":287,"props":2335,"children":2336},{"class":289,"line":692},[2337],{"type":33,"tag":287,"props":2338,"children":2339},{"style":321},[2340],{"type":38,"value":2341},"  }, []);\n",{"type":33,"tag":287,"props":2343,"children":2344},{"class":289,"line":700},[2345],{"type":33,"tag":287,"props":2346,"children":2347},{"emptyLinePlaceholder":450},[2348],{"type":38,"value":453},{"type":33,"tag":287,"props":2350,"children":2351},{"class":289,"line":756},[2352,2356,2361,2365],{"type":33,"tag":287,"props":2353,"children":2354},{"style":304},[2355],{"type":38,"value":1729},{"type":33,"tag":287,"props":2357,"children":2358},{"style":321},[2359],{"type":38,"value":2360}," (",{"type":33,"tag":287,"props":2362,"children":2363},{"style":304},[2364],{"type":38,"value":2263},{"type":33,"tag":287,"props":2366,"children":2367},{"style":321},[2368],{"type":38,"value":2369},"hydrated) {\n",{"type":33,"tag":287,"props":2371,"children":2372},{"class":289,"line":813},[2373,2377,2381,2385,2390,2394,2399,2404,2408],{"type":33,"tag":287,"props":2374,"children":2375},{"style":304},[2376],{"type":38,"value":1844},{"type":33,"tag":287,"props":2378,"children":2379},{"style":321},[2380],{"type":38,"value":832},{"type":33,"tag":287,"props":2382,"children":2383},{"style":478},[2384],{"type":38,"value":481},{"type":33,"tag":287,"props":2386,"children":2387},{"style":315},[2388],{"type":38,"value":2389}," id",{"type":33,"tag":287,"props":2391,"children":2392},{"style":304},[2393],{"type":38,"value":510},{"type":33,"tag":287,"props":2395,"children":2396},{"style":654},[2397],{"type":38,"value":2398},"\"recommendations\"",{"type":33,"tag":287,"props":2400,"children":2401},{"style":321},[2402],{"type":38,"value":2403},">Chargement...\u003C\u002F",{"type":33,"tag":287,"props":2405,"children":2406},{"style":478},[2407],{"type":38,"value":481},{"type":33,"tag":287,"props":2409,"children":2410},{"style":321},[2411],{"type":38,"value":875},{"type":33,"tag":287,"props":2413,"children":2414},{"class":289,"line":822},[2415],{"type":33,"tag":287,"props":2416,"children":2417},{"style":321},[2418],{"type":38,"value":1861},{"type":33,"tag":287,"props":2420,"children":2421},{"class":289,"line":878},[2422],{"type":33,"tag":287,"props":2423,"children":2424},{"emptyLinePlaceholder":450},[2425],{"type":38,"value":453},{"type":33,"tag":287,"props":2427,"children":2429},{"class":289,"line":2428},26,[2430,2434,2438,2443,2447,2451],{"type":33,"tag":287,"props":2431,"children":2432},{"style":304},[2433],{"type":38,"value":462},{"type":33,"tag":287,"props":2435,"children":2436},{"style":321},[2437],{"type":38,"value":832},{"type":33,"tag":287,"props":2439,"children":2440},{"style":369},[2441],{"type":38,"value":2442},"RecommendationCarousel",{"type":33,"tag":287,"props":2444,"children":2445},{"style":315},[2446],{"type":38,"value":578},{"type":33,"tag":287,"props":2448,"children":2449},{"style":304},[2450],{"type":38,"value":510},{"type":33,"tag":287,"props":2452,"children":2453},{"style":321},[2454],{"type":38,"value":2455},"{productId} \u002F>;\n",{"type":33,"tag":287,"props":2457,"children":2459},{"class":289,"line":2458},27,[2460],{"type":33,"tag":287,"props":2461,"children":2462},{"style":321},[2463],{"type":38,"value":525},{"type":33,"tag":34,"props":2465,"children":2466},{},[2467,2469,2473,2475,2480],{"type":38,"value":2468},"Avec cette approche, la bibliothèque carousel (30 kB gzip) ne figure pas dans le ",{"type":33,"tag":41,"props":2470,"children":2471},{},[2472],{"type":38,"value":74},{"type":38,"value":2474}," initial, elle est chargée en mode ",{"type":33,"tag":41,"props":2476,"children":2477},{},[2478],{"type":38,"value":2479},"lazy",{"type":38,"value":2481}," lorsque l'utilisateur s'en rapproche. Impact sur INP : si l'utilisateur ne consulte pas le carousel pendant les 5 premières secondes, ce coût d'hydratation de 30 kB n'affecte pas le TTI.",{"type":33,"tag":101,"props":2483,"children":2485},{"id":2484},"lazy-hydration-support-des-bibliothèques",[2486],{"type":38,"value":2487},"Lazy Hydration : Support des Bibliothèques",{"type":33,"tag":34,"props":2489,"children":2490},{},[2491,2493,2499,2501,2507,2509,2515],{"type":38,"value":2492},"Les bibliothèques ",{"type":33,"tag":268,"props":2494,"children":2496},{"className":2495},[],[2497],{"type":38,"value":2498},"@builder.io\u002Freact-hydration-on-demand",{"type":38,"value":2500}," pour React et ",{"type":33,"tag":268,"props":2502,"children":2504},{"className":2503},[],[2505],{"type":38,"value":2506},"vue-lazy-hydration",{"type":38,"value":2508}," pour Vue facilitent ce pattern. Nuxt a un composant intégré ",{"type":33,"tag":268,"props":2510,"children":2512},{"className":2511},[],[2513],{"type":38,"value":2514},"\u003CLazyHydrate>",{"type":38,"value":2516}," :",{"type":33,"tag":277,"props":2518,"children":2520},{"className":1044,"code":2519,"language":1046,"meta":16,"style":16},"\u003CLazyHydrate when-visible>\n  \u003CProductCarousel :items=\"relatedProducts\" \u002F>\n\u003C\u002FLazyHydrate>\n",[2521],{"type":33,"tag":268,"props":2522,"children":2523},{"__ignoreMap":16},[2524,2545,2553],{"type":33,"tag":287,"props":2525,"children":2526},{"class":289,"line":290},[2527,2531,2536,2541],{"type":33,"tag":287,"props":2528,"children":2529},{"style":321},[2530],{"type":38,"value":921},{"type":33,"tag":287,"props":2532,"children":2533},{"style":478},[2534],{"type":38,"value":2535},"LazyHydrate",{"type":33,"tag":287,"props":2537,"children":2538},{"style":315},[2539],{"type":38,"value":2540}," when-visible",{"type":33,"tag":287,"props":2542,"children":2543},{"style":321},[2544],{"type":38,"value":486},{"type":33,"tag":287,"props":2546,"children":2547},{"class":289,"line":300},[2548],{"type":33,"tag":287,"props":2549,"children":2550},{"style":321},[2551],{"type":38,"value":2552},"  \u003CProductCarousel :items=\"relatedProducts\" \u002F>\n",{"type":33,"tag":287,"props":2554,"children":2555},{"class":289,"line":380},[2556,2560,2564],{"type":33,"tag":287,"props":2557,"children":2558},{"style":321},[2559],{"type":38,"value":993},{"type":33,"tag":287,"props":2561,"children":2562},{"style":478},[2563],{"type":38,"value":2535},{"type":33,"tag":287,"props":2565,"children":2566},{"style":321},[2567],{"type":38,"value":486},{"type":33,"tag":34,"props":2569,"children":2570},{},[2571],{"type":38,"value":2572},"Benchmark : une page détail produit avec 12 composants — hydratation impatiente de 680 ms, hydratation paresseuse de 180 ms (composants visibles dans le viewport). Si l'utilisateur ne fait pas défiler, les composants restants ne sont jamais hydratés.",{"type":33,"tag":49,"props":2574,"children":2576},{"id":2575},"arbre-de-décision-où-placer-quel-composant",[2577],{"type":38,"value":2578},"Arbre de Décision : Où Placer Quel Composant ?",{"type":33,"tag":34,"props":2580,"children":2581},{},[2582],{"type":38,"value":2583},"En 2026, la décision architecturale suit cet arbre :",{"type":33,"tag":2585,"props":2586,"children":2587},"ol",{},[2588,2607,2617,2627,2637],{"type":33,"tag":2589,"props":2590,"children":2591},"li",{},[2592,2598,2600,2605],{"type":33,"tag":2593,"props":2594,"children":2595},"strong",{},[2596],{"type":38,"value":2597},"Le composant n'est jamais interactif ?",{"type":38,"value":2599}," (texte statique, images, markdown) → Server Component (RSC) ou ",{"type":33,"tag":268,"props":2601,"children":2603},{"className":2602},[],[2604],{"type":38,"value":1031},{"type":38,"value":2606}," (Vue)",{"type":33,"tag":2589,"props":2608,"children":2609},{},[2610,2615],{"type":33,"tag":2593,"props":2611,"children":2612},{},[2613],{"type":38,"value":2614},"Y a-t-il récupération de données, mais pas d'interactivité ?",{"type":38,"value":2616}," (listes de produits, flux de blogs) → Server Component + Suspense",{"type":33,"tag":2589,"props":2618,"children":2619},{},[2620,2625],{"type":33,"tag":2593,"props":2621,"children":2622},{},[2623],{"type":38,"value":2624},"Y a-t-il entrée de formulaire, validation ?",{"type":38,"value":2626}," → Client Component, hydratation obligatoire",{"type":33,"tag":2589,"props":2628,"children":2629},{},[2630,2635],{"type":33,"tag":2593,"props":2631,"children":2632},{},[2633],{"type":38,"value":2634},"Actualité en temps réel nécessaire ?",{"type":38,"value":2636}," (chat, scores en direct) → Client Component + WebSocket",{"type":33,"tag":2589,"props":2638,"children":2639},{},[2640,2645],{"type":33,"tag":2593,"props":2641,"children":2642},{},[2643],{"type":38,"value":2644},"Non visible avant défilement ?",{"type":38,"value":2646}," → Lazy hydration (idle until urgent)",{"type":33,"tag":34,"props":2648,"children":2649},{},[2650],{"type":38,"value":2651},"Exemple : flux de paiement en commerce électronique :",{"type":33,"tag":2653,"props":2654,"children":2655},"ul",{},[2656,2668,2680,2692],{"type":33,"tag":2589,"props":2657,"children":2658},{},[2659,2661,2666],{"type":38,"value":2660},"En-tête du paiement, formulaire d'expédition, résumé du paiement : ",{"type":33,"tag":2593,"props":2662,"children":2663},{},[2664],{"type":38,"value":2665},"Server Component",{"type":38,"value":2667}," (statique)",{"type":33,"tag":2589,"props":2669,"children":2670},{},[2671,2673,2678],{"type":38,"value":2672},"Champs d'adresse, information de carte : ",{"type":33,"tag":2593,"props":2674,"children":2675},{},[2676],{"type":38,"value":2677},"Client Component",{"type":38,"value":2679}," (validation obligatoire)",{"type":33,"tag":2589,"props":2681,"children":2682},{},[2683,2685,2690],{"type":38,"value":2684},"Widget « Articles similaires » : ",{"type":33,"tag":2593,"props":2686,"children":2687},{},[2688],{"type":38,"value":2689},"Lazy hydration",{"type":38,"value":2691}," (seuil de viewport)",{"type":33,"tag":2589,"props":2693,"children":2694},{},[2695,2697,2701],{"type":38,"value":2696},"Suivi de livraison en direct : ",{"type":33,"tag":2593,"props":2698,"children":2699},{},[2700],{"type":38,"value":2677},{"type":38,"value":2702}," (temps réel)",{"type":33,"tag":34,"props":2704,"children":2705},{},[2706,2708,2712],{"type":38,"value":2707},"Cette répartition réduit le coût d'hydratation de la page de paiement de 420 ms à 95 ms. La taille du ",{"type":33,"tag":41,"props":2709,"children":2710},{},[2711],{"type":38,"value":74},{"type":38,"value":2713}," passe de 180 kB à 95 kB.",{"type":33,"tag":49,"props":2715,"children":2717},{"id":2716},"chiffres-de-performance-avantaprès",[2718],{"type":38,"value":2719},"Chiffres de Performance : Avant\u002FAprès",{"type":33,"tag":34,"props":2721,"children":2722},{},[2723],{"type":38,"value":2724},"Projet réel : commerce électronique de taille moyenne (50 000 SKU, 200 pages). Stack : Next.js 14 (SSR classique) → Next.js 15 (RSC + lazy hydration).",{"type":33,"tag":108,"props":2726,"children":2727},{},[2728,2754],{"type":33,"tag":112,"props":2729,"children":2730},{},[2731],{"type":33,"tag":116,"props":2732,"children":2733},{},[2734,2739,2744,2749],{"type":33,"tag":120,"props":2735,"children":2736},{},[2737],{"type":38,"value":2738},"Métrique",{"type":33,"tag":120,"props":2740,"children":2741},{},[2742],{"type":38,"value":2743},"Avant (SSR)",{"type":33,"tag":120,"props":2745,"children":2746},{},[2747],{"type":38,"value":2748},"Après (RSC)",{"type":33,"tag":120,"props":2750,"children":2751},{},[2752],{"type":38,"value":2753},"Gain",{"type":33,"tag":141,"props":2755,"children":2756},{},[2757,2785,2808,2831,2854],{"type":33,"tag":116,"props":2758,"children":2759},{},[2760,2770,2775,2780],{"type":33,"tag":148,"props":2761,"children":2762},{},[2763,2768],{"type":33,"tag":41,"props":2764,"children":2765},{},[2766],{"type":38,"value":2767},"Bundle",{"type":38,"value":2769}," JS initial",{"type":33,"tag":148,"props":2771,"children":2772},{},[2773],{"type":38,"value":2774},"240kB",{"type":33,"tag":148,"props":2776,"children":2777},{},[2778],{"type":38,"value":2779},"135kB",{"type":33,"tag":148,"props":2781,"children":2782},{},[2783],{"type":38,"value":2784},"44 % ↓",{"type":33,"tag":116,"props":2786,"children":2787},{},[2788,2793,2798,2803],{"type":33,"tag":148,"props":2789,"children":2790},{},[2791],{"type":38,"value":2792},"Hydratation (composant LCP)",{"type":33,"tag":148,"props":2794,"children":2795},{},[2796],{"type":38,"value":2797},"380ms",{"type":33,"tag":148,"props":2799,"children":2800},{},[2801],{"type":38,"value":2802},"85ms",{"type":33,"tag":148,"props":2804,"children":2805},{},[2806],{"type":38,"value":2807},"78 % ↓",{"type":33,"tag":116,"props":2809,"children":2810},{},[2811,2816,2821,2826],{"type":33,"tag":148,"props":2812,"children":2813},{},[2814],{"type":38,"value":2815},"Time to Interactive (TTI)",{"type":33,"tag":148,"props":2817,"children":2818},{},[2819],{"type":38,"value":2820},"2.8s",{"type":33,"tag":148,"props":2822,"children":2823},{},[2824],{"type":38,"value":2825},"1.3s",{"type":33,"tag":148,"props":2827,"children":2828},{},[2829],{"type":38,"value":2830},"54 % ↓",{"type":33,"tag":116,"props":2832,"children":2833},{},[2834,2839,2844,2849],{"type":33,"tag":148,"props":2835,"children":2836},{},[2837],{"type":38,"value":2838},"Interaction to Next Paint (INP)",{"type":33,"tag":148,"props":2840,"children":2841},{},[2842],{"type":38,"value":2843},"320ms",{"type":33,"tag":148,"props":2845,"children":2846},{},[2847],{"type":38,"value":2848},"140ms",{"type":33,"tag":148,"props":2850,"children":2851},{},[2852],{"type":38,"value":2853},"56 % ↓",{"type":33,"tag":116,"props":2855,"children":2856},{},[2857,2862,2865,2868],{"type":33,"tag":148,"props":2858,"children":2859},{},[2860],{"type":38,"value":2861},"Largest Contentful Paint (LCP)",{"type":33,"tag":148,"props":2863,"children":2864},{},[],{"type":33,"tag":148,"props":2866,"children":2867},{},[],{"type":33,"tag":148,"props":2869,"children":2870},{},[],{"type":33,"tag":2872,"props":2873,"children":2874},"style",{},[2875],{"type":38,"value":2876},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":16,"searchDepth":380,"depth":380,"links":2878},[2879,2882,2885,2888,2889,2892,2893],{"id":51,"depth":300,"text":54,"children":2880},[2881],{"id":103,"depth":380,"text":106},{"id":258,"depth":300,"text":261,"children":2883},[2884],{"id":891,"depth":380,"text":894},{"id":1017,"depth":300,"text":1020,"children":2886},[2887],{"id":1357,"depth":380,"text":1360},{"id":1561,"depth":300,"text":1564},{"id":1876,"depth":300,"text":1879,"children":2890},[2891],{"id":2484,"depth":380,"text":2487},{"id":2575,"depth":300,"text":2578},{"id":2716,"depth":300,"text":2719},"markdown","content:fr:tech:server-components-vs-client-2026.md","content","fr\u002Ftech\u002Fserver-components-vs-client-2026.md","fr\u002Ftech\u002Fserver-components-vs-client-2026","md",1782050756731]