[{"data":1,"prerenderedAt":2831},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fru\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":11,"_dir":14,"_draft":15,"_partial":15,"_locale":16,"title":17,"description":18,"publishedAt":19,"modifiedAt":19,"category":14,"i18nKey":4,"tags":20,"readingTime":26,"author":27,"body":28,"_type":2825,"_id":2826,"_source":2827,"_file":2828,"_stem":2829,"_extension":2830},"tech",false,"","Server Components vs Client: Drawing the Right Line in 2026","React Server Components and Vue 3.5 transition reduce hydration costs while maintaining interactivity balance. Architectural decision guide with real numbers.","2026-06-14",[21,22,23,24,25],"react-server-components","vue-transition","hydration-cost","web-performance","frontend-architecture",8,"Roibase",{"type":29,"children":30,"toc":2808},"root",[31,39,46,51,56,72,79,228,234,248,856,861,867,872,967,980,986,1007,1271,1297,1302,1308,1321,1501,1506,1512,1517,1522,1809,1814,1820,1825,2404,2409,2415,2443,2494,2499,2505,2510,2573,2578,2629,2634,2640,2645,2792,2797,2802],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","By 2026, frontend architecture discussions have shifted from \"what should we use\" to \"where should it run on the server, where on the client.\" React Server Components (RSC) have been in production for 18 months, Vue 3.5's transition API is now stable, Svelte 5 has rewritten its reactivity model with runes. The common thread: reducing hydration costs, delivering interactivity exactly where needed. This article shows you which numbers to look at when making architectural decisions.",{"type":32,"tag":40,"props":41,"children":43},"h2",{"id":42},"the-real-cost-of-hydration-2026-benchmark-data",[44],{"type":37,"value":45},"The Real Cost of Hydration: 2026 Benchmark Data",{"type":32,"tag":33,"props":47,"children":48},{},[49],{"type":37,"value":50},"Hydration is the process of making server-rendered HTML interactive in the browser. In 2024, the average e-commerce site consumed 400ms of CPU time for hydration (Chrome User Experience Report, Q4 2024). By 2026, sites using React 19 + RSC see this down to 80ms, and Vue 3.5 + partial hydration projects see 120ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"The numerical difference matters: 400ms hydration can single-handedly push your Interaction to Next Paint (INP) metric into the \"needs improvement\" band. 80ms hydration stays within budget and opens room for other optimizations. This difference is especially noticeable on mobile devices (Snapdragon 7 Gen 1 mid-range processor).",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,70],{"type":37,"value":60},"RSC's advantage is clear: resolve part of the component tree on the server and send only HTML, never including it in the client bundle. Classical SSR would send all component code to the client for hydration. With RSC, product lists, filter sidebars, checkout forms—data-heavy but non-interactive sections—leave the bundle entirely. In Roibase's ",{"type":32,"tag":62,"props":63,"children":67},"a",{"href":64,"rel":65},"https:\u002F\u002Fwww.roibase.com.tr\u002Fru\u002Fheadless",[66],"nofollow",[68],{"type":37,"value":69},"Headless Commerce",{"type":37,"value":71}," projects, this approach cut average JS bundle size by 40%.",{"type":32,"tag":73,"props":74,"children":76},"h3",{"id":75},"server-vs-client-decision-matrix",[77],{"type":37,"value":78},"Server vs Client Decision Matrix",{"type":32,"tag":80,"props":81,"children":82},"table",{},[83,112],{"type":32,"tag":84,"props":85,"children":86},"thead",{},[87],{"type":32,"tag":88,"props":89,"children":90},"tr",{},[91,97,102,107],{"type":32,"tag":92,"props":93,"children":94},"th",{},[95],{"type":37,"value":96},"Component Type",{"type":32,"tag":92,"props":98,"children":99},{},[100],{"type":37,"value":101},"Hydration",{"type":32,"tag":92,"props":103,"children":104},{},[105],{"type":37,"value":106},"Bundle Impact",{"type":32,"tag":92,"props":108,"children":109},{},[110],{"type":37,"value":111},"Server\u002FClient",{"type":32,"tag":113,"props":114,"children":115},"tbody",{},[116,140,160,183,205],{"type":32,"tag":88,"props":117,"children":118},{},[119,125,130,135],{"type":32,"tag":120,"props":121,"children":122},"td",{},[123],{"type":37,"value":124},"Static content block",{"type":32,"tag":120,"props":126,"children":127},{},[128],{"type":37,"value":129},"0ms",{"type":32,"tag":120,"props":131,"children":132},{},[133],{"type":37,"value":134},"0kB",{"type":32,"tag":120,"props":136,"children":137},{},[138],{"type":37,"value":139},"Server",{"type":32,"tag":88,"props":141,"children":142},{},[143,148,152,156],{"type":32,"tag":120,"props":144,"children":145},{},[146],{"type":37,"value":147},"Data-fetching list (non-interactive)",{"type":32,"tag":120,"props":149,"children":150},{},[151],{"type":37,"value":129},{"type":32,"tag":120,"props":153,"children":154},{},[155],{"type":37,"value":134},{"type":32,"tag":120,"props":157,"children":158},{},[159],{"type":37,"value":139},{"type":32,"tag":88,"props":161,"children":162},{},[163,168,173,178],{"type":32,"tag":120,"props":164,"children":165},{},[166],{"type":37,"value":167},"Form input + validation",{"type":32,"tag":120,"props":169,"children":170},{},[171],{"type":37,"value":172},"15-30ms",{"type":32,"tag":120,"props":174,"children":175},{},[176],{"type":37,"value":177},"8-12kB",{"type":32,"tag":120,"props":179,"children":180},{},[181],{"type":37,"value":182},"Client",{"type":32,"tag":88,"props":184,"children":185},{},[186,191,196,201],{"type":32,"tag":120,"props":187,"children":188},{},[189],{"type":37,"value":190},"Real-time chat widget",{"type":32,"tag":120,"props":192,"children":193},{},[194],{"type":37,"value":195},"40-60ms",{"type":32,"tag":120,"props":197,"children":198},{},[199],{"type":37,"value":200},"25-40kB",{"type":32,"tag":120,"props":202,"children":203},{},[204],{"type":37,"value":182},{"type":32,"tag":88,"props":206,"children":207},{},[208,213,218,223],{"type":32,"tag":120,"props":209,"children":210},{},[211],{"type":37,"value":212},"Infinite scroll container",{"type":32,"tag":120,"props":214,"children":215},{},[216],{"type":37,"value":217},"20-35ms",{"type":32,"tag":120,"props":219,"children":220},{},[221],{"type":37,"value":222},"15-20kB",{"type":32,"tag":120,"props":224,"children":225},{},[226],{"type":37,"value":227},"Hybrid (first page server, next pages client)",{"type":32,"tag":40,"props":229,"children":231},{"id":230},"react-server-components-practical-architecture",[232],{"type":37,"value":233},"React Server Components: Practical Architecture",{"type":32,"tag":33,"props":235,"children":236},{},[237,239,246],{"type":37,"value":238},"The core of using RSC in production: drawing client boundaries correctly. In Next.js 15, all components are Server Components by default; you mark interactive boundaries with the ",{"type":32,"tag":240,"props":241,"children":243},"code",{"className":242},[],[244],{"type":37,"value":245},"'use client'",{"type":37,"value":247}," directive.",{"type":32,"tag":249,"props":250,"children":254},"pre",{"className":251,"code":252,"language":253,"meta":16,"style":16},"language-tsx shiki shiki-themes github-dark","\u002F\u002F app\u002Fproduct\u002F[id]\u002Fpage.tsx — Server Component (default)\nasync function ProductPage({ params }: { params: { id: string } }) {\n  \u002F\u002F Direct DB query, API call — not in client bundle\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 onClick handler, state management — this part requires hydration\n  return \u003Cbutton onClick={() => addToCart(productId)}>Add to Cart\u003C\u002Fbutton>;\n}\n","tsx",[255],{"type":32,"tag":240,"props":256,"children":257},{"__ignoreMap":16},[258,270,350,359,398,407,416,426,439,459,498,533,569,586,595,603,611,620,634,662,670,726,783,792,848],{"type":32,"tag":259,"props":260,"children":263},"span",{"class":261,"line":262},"line",1,[264],{"type":32,"tag":259,"props":265,"children":267},{"style":266},"--shiki-default:#6A737D",[268],{"type":37,"value":269},"\u002F\u002F app\u002Fproduct\u002F[id]\u002Fpage.tsx — Server Component (default)\n",{"type":32,"tag":259,"props":271,"children":273},{"class":261,"line":272},2,[274,280,285,291,297,303,308,313,318,322,326,330,335,339,345],{"type":32,"tag":259,"props":275,"children":277},{"style":276},"--shiki-default:#F97583",[278],{"type":37,"value":279},"async",{"type":32,"tag":259,"props":281,"children":282},{"style":276},[283],{"type":37,"value":284}," function",{"type":32,"tag":259,"props":286,"children":288},{"style":287},"--shiki-default:#B392F0",[289],{"type":37,"value":290}," ProductPage",{"type":32,"tag":259,"props":292,"children":294},{"style":293},"--shiki-default:#E1E4E8",[295],{"type":37,"value":296},"({ ",{"type":32,"tag":259,"props":298,"children":300},{"style":299},"--shiki-default:#FFAB70",[301],{"type":37,"value":302},"params",{"type":32,"tag":259,"props":304,"children":305},{"style":293},[306],{"type":37,"value":307}," }",{"type":32,"tag":259,"props":309,"children":310},{"style":276},[311],{"type":37,"value":312},":",{"type":32,"tag":259,"props":314,"children":315},{"style":293},[316],{"type":37,"value":317}," { ",{"type":32,"tag":259,"props":319,"children":320},{"style":299},[321],{"type":37,"value":302},{"type":32,"tag":259,"props":323,"children":324},{"style":276},[325],{"type":37,"value":312},{"type":32,"tag":259,"props":327,"children":328},{"style":293},[329],{"type":37,"value":317},{"type":32,"tag":259,"props":331,"children":332},{"style":299},[333],{"type":37,"value":334},"id",{"type":32,"tag":259,"props":336,"children":337},{"style":276},[338],{"type":37,"value":312},{"type":32,"tag":259,"props":340,"children":342},{"style":341},"--shiki-default:#79B8FF",[343],{"type":37,"value":344}," string",{"type":32,"tag":259,"props":346,"children":347},{"style":293},[348],{"type":37,"value":349}," } }) {\n",{"type":32,"tag":259,"props":351,"children":353},{"class":261,"line":352},3,[354],{"type":32,"tag":259,"props":355,"children":356},{"style":266},[357],{"type":37,"value":358},"  \u002F\u002F Direct DB query, API call — not in client bundle\n",{"type":32,"tag":259,"props":360,"children":362},{"class":261,"line":361},4,[363,368,373,378,383,388,393],{"type":32,"tag":259,"props":364,"children":365},{"style":276},[366],{"type":37,"value":367},"  const",{"type":32,"tag":259,"props":369,"children":370},{"style":341},[371],{"type":37,"value":372}," product",{"type":32,"tag":259,"props":374,"children":375},{"style":276},[376],{"type":37,"value":377}," =",{"type":32,"tag":259,"props":379,"children":380},{"style":276},[381],{"type":37,"value":382}," await",{"type":32,"tag":259,"props":384,"children":385},{"style":293},[386],{"type":37,"value":387}," db.product.",{"type":32,"tag":259,"props":389,"children":390},{"style":287},[391],{"type":37,"value":392},"findUnique",{"type":32,"tag":259,"props":394,"children":395},{"style":293},[396],{"type":37,"value":397},"({ \n",{"type":32,"tag":259,"props":399,"children":401},{"class":261,"line":400},5,[402],{"type":32,"tag":259,"props":403,"children":404},{"style":293},[405],{"type":37,"value":406},"    where: { id: params.id } \n",{"type":32,"tag":259,"props":408,"children":410},{"class":261,"line":409},6,[411],{"type":32,"tag":259,"props":412,"children":413},{"style":293},[414],{"type":37,"value":415},"  });\n",{"type":32,"tag":259,"props":417,"children":419},{"class":261,"line":418},7,[420],{"type":32,"tag":259,"props":421,"children":423},{"emptyLinePlaceholder":422},true,[424],{"type":37,"value":425},"\n",{"type":32,"tag":259,"props":427,"children":428},{"class":261,"line":26},[429,434],{"type":32,"tag":259,"props":430,"children":431},{"style":276},[432],{"type":37,"value":433},"  return",{"type":32,"tag":259,"props":435,"children":436},{"style":293},[437],{"type":37,"value":438}," (\n",{"type":32,"tag":259,"props":440,"children":442},{"class":261,"line":441},9,[443,448,454],{"type":32,"tag":259,"props":444,"children":445},{"style":293},[446],{"type":37,"value":447},"    \u003C",{"type":32,"tag":259,"props":449,"children":451},{"style":450},"--shiki-default:#85E89D",[452],{"type":37,"value":453},"div",{"type":32,"tag":259,"props":455,"children":456},{"style":293},[457],{"type":37,"value":458},">\n",{"type":32,"tag":259,"props":460,"children":462},{"class":261,"line":461},10,[463,468,473,478,483,488,493],{"type":32,"tag":259,"props":464,"children":465},{"style":293},[466],{"type":37,"value":467},"      \u003C",{"type":32,"tag":259,"props":469,"children":470},{"style":341},[471],{"type":37,"value":472},"ProductImage",{"type":32,"tag":259,"props":474,"children":475},{"style":287},[476],{"type":37,"value":477}," src",{"type":32,"tag":259,"props":479,"children":480},{"style":276},[481],{"type":37,"value":482},"=",{"type":32,"tag":259,"props":484,"children":485},{"style":293},[486],{"type":37,"value":487},"{product.image} \u002F> {",{"type":32,"tag":259,"props":489,"children":490},{"style":266},[491],{"type":37,"value":492},"\u002F* Server Component *\u002F",{"type":32,"tag":259,"props":494,"children":495},{"style":293},[496],{"type":37,"value":497},"}\n",{"type":32,"tag":259,"props":499,"children":501},{"class":261,"line":500},11,[502,506,511,516,520,525,529],{"type":32,"tag":259,"props":503,"children":504},{"style":293},[505],{"type":37,"value":467},{"type":32,"tag":259,"props":507,"children":508},{"style":341},[509],{"type":37,"value":510},"ProductDetails",{"type":32,"tag":259,"props":512,"children":513},{"style":287},[514],{"type":37,"value":515}," data",{"type":32,"tag":259,"props":517,"children":518},{"style":276},[519],{"type":37,"value":482},{"type":32,"tag":259,"props":521,"children":522},{"style":293},[523],{"type":37,"value":524},"{product} \u002F> {",{"type":32,"tag":259,"props":526,"children":527},{"style":266},[528],{"type":37,"value":492},{"type":32,"tag":259,"props":530,"children":531},{"style":293},[532],{"type":37,"value":497},{"type":32,"tag":259,"props":534,"children":536},{"class":261,"line":535},12,[537,541,546,551,555,560,565],{"type":32,"tag":259,"props":538,"children":539},{"style":293},[540],{"type":37,"value":467},{"type":32,"tag":259,"props":542,"children":543},{"style":341},[544],{"type":37,"value":545},"AddToCartButton",{"type":32,"tag":259,"props":547,"children":548},{"style":287},[549],{"type":37,"value":550}," productId",{"type":32,"tag":259,"props":552,"children":553},{"style":276},[554],{"type":37,"value":482},{"type":32,"tag":259,"props":556,"children":557},{"style":293},[558],{"type":37,"value":559},"{product.id} \u002F> {",{"type":32,"tag":259,"props":561,"children":562},{"style":266},[563],{"type":37,"value":564},"\u002F* Client Component *\u002F",{"type":32,"tag":259,"props":566,"children":567},{"style":293},[568],{"type":37,"value":497},{"type":32,"tag":259,"props":570,"children":572},{"class":261,"line":571},13,[573,578,582],{"type":32,"tag":259,"props":574,"children":575},{"style":293},[576],{"type":37,"value":577},"    \u003C\u002F",{"type":32,"tag":259,"props":579,"children":580},{"style":450},[581],{"type":37,"value":453},{"type":32,"tag":259,"props":583,"children":584},{"style":293},[585],{"type":37,"value":458},{"type":32,"tag":259,"props":587,"children":589},{"class":261,"line":588},14,[590],{"type":32,"tag":259,"props":591,"children":592},{"style":293},[593],{"type":37,"value":594},"  );\n",{"type":32,"tag":259,"props":596,"children":598},{"class":261,"line":597},15,[599],{"type":32,"tag":259,"props":600,"children":601},{"style":293},[602],{"type":37,"value":497},{"type":32,"tag":259,"props":604,"children":606},{"class":261,"line":605},16,[607],{"type":32,"tag":259,"props":608,"children":609},{"emptyLinePlaceholder":422},[610],{"type":37,"value":425},{"type":32,"tag":259,"props":612,"children":614},{"class":261,"line":613},17,[615],{"type":32,"tag":259,"props":616,"children":617},{"style":266},[618],{"type":37,"value":619},"\u002F\u002F components\u002FAddToCartButton.tsx\n",{"type":32,"tag":259,"props":621,"children":623},{"class":261,"line":622},18,[624,629],{"type":32,"tag":259,"props":625,"children":627},{"style":626},"--shiki-default:#9ECBFF",[628],{"type":37,"value":245},{"type":32,"tag":259,"props":630,"children":631},{"style":293},[632],{"type":37,"value":633},";\n",{"type":32,"tag":259,"props":635,"children":637},{"class":261,"line":636},19,[638,643,648,653,658],{"type":32,"tag":259,"props":639,"children":640},{"style":276},[641],{"type":37,"value":642},"import",{"type":32,"tag":259,"props":644,"children":645},{"style":293},[646],{"type":37,"value":647}," { useState } ",{"type":32,"tag":259,"props":649,"children":650},{"style":276},[651],{"type":37,"value":652},"from",{"type":32,"tag":259,"props":654,"children":655},{"style":626},[656],{"type":37,"value":657}," 'react'",{"type":32,"tag":259,"props":659,"children":660},{"style":293},[661],{"type":37,"value":633},{"type":32,"tag":259,"props":663,"children":665},{"class":261,"line":664},20,[666],{"type":32,"tag":259,"props":667,"children":668},{"emptyLinePlaceholder":422},[669],{"type":37,"value":425},{"type":32,"tag":259,"props":671,"children":673},{"class":261,"line":672},21,[674,679,683,688,692,697,701,705,709,713,717,721],{"type":32,"tag":259,"props":675,"children":676},{"style":276},[677],{"type":37,"value":678},"export",{"type":32,"tag":259,"props":680,"children":681},{"style":276},[682],{"type":37,"value":284},{"type":32,"tag":259,"props":684,"children":685},{"style":287},[686],{"type":37,"value":687}," AddToCartButton",{"type":32,"tag":259,"props":689,"children":690},{"style":293},[691],{"type":37,"value":296},{"type":32,"tag":259,"props":693,"children":694},{"style":299},[695],{"type":37,"value":696},"productId",{"type":32,"tag":259,"props":698,"children":699},{"style":293},[700],{"type":37,"value":307},{"type":32,"tag":259,"props":702,"children":703},{"style":276},[704],{"type":37,"value":312},{"type":32,"tag":259,"props":706,"children":707},{"style":293},[708],{"type":37,"value":317},{"type":32,"tag":259,"props":710,"children":711},{"style":299},[712],{"type":37,"value":696},{"type":32,"tag":259,"props":714,"children":715},{"style":276},[716],{"type":37,"value":312},{"type":32,"tag":259,"props":718,"children":719},{"style":341},[720],{"type":37,"value":344},{"type":32,"tag":259,"props":722,"children":723},{"style":293},[724],{"type":37,"value":725}," }) {\n",{"type":32,"tag":259,"props":727,"children":729},{"class":261,"line":728},22,[730,734,739,744,749,754,759,763,768,773,778],{"type":32,"tag":259,"props":731,"children":732},{"style":276},[733],{"type":37,"value":367},{"type":32,"tag":259,"props":735,"children":736},{"style":293},[737],{"type":37,"value":738}," [",{"type":32,"tag":259,"props":740,"children":741},{"style":341},[742],{"type":37,"value":743},"loading",{"type":32,"tag":259,"props":745,"children":746},{"style":293},[747],{"type":37,"value":748},", ",{"type":32,"tag":259,"props":750,"children":751},{"style":341},[752],{"type":37,"value":753},"setLoading",{"type":32,"tag":259,"props":755,"children":756},{"style":293},[757],{"type":37,"value":758},"] ",{"type":32,"tag":259,"props":760,"children":761},{"style":276},[762],{"type":37,"value":482},{"type":32,"tag":259,"props":764,"children":765},{"style":287},[766],{"type":37,"value":767}," useState",{"type":32,"tag":259,"props":769,"children":770},{"style":293},[771],{"type":37,"value":772},"(",{"type":32,"tag":259,"props":774,"children":775},{"style":341},[776],{"type":37,"value":777},"false",{"type":32,"tag":259,"props":779,"children":780},{"style":293},[781],{"type":37,"value":782},");\n",{"type":32,"tag":259,"props":784,"children":786},{"class":261,"line":785},23,[787],{"type":32,"tag":259,"props":788,"children":789},{"style":266},[790],{"type":37,"value":791},"  \u002F\u002F onClick handler, state management — this part requires hydration\n",{"type":32,"tag":259,"props":793,"children":795},{"class":261,"line":794},24,[796,800,805,810,815,819,824,829,834,839,843],{"type":32,"tag":259,"props":797,"children":798},{"style":276},[799],{"type":37,"value":433},{"type":32,"tag":259,"props":801,"children":802},{"style":293},[803],{"type":37,"value":804}," \u003C",{"type":32,"tag":259,"props":806,"children":807},{"style":450},[808],{"type":37,"value":809},"button",{"type":32,"tag":259,"props":811,"children":812},{"style":287},[813],{"type":37,"value":814}," onClick",{"type":32,"tag":259,"props":816,"children":817},{"style":276},[818],{"type":37,"value":482},{"type":32,"tag":259,"props":820,"children":821},{"style":293},[822],{"type":37,"value":823},"{() ",{"type":32,"tag":259,"props":825,"children":826},{"style":276},[827],{"type":37,"value":828},"=>",{"type":32,"tag":259,"props":830,"children":831},{"style":287},[832],{"type":37,"value":833}," addToCart",{"type":32,"tag":259,"props":835,"children":836},{"style":293},[837],{"type":37,"value":838},"(productId)}>Add to Cart\u003C\u002F",{"type":32,"tag":259,"props":840,"children":841},{"style":450},[842],{"type":37,"value":809},{"type":32,"tag":259,"props":844,"children":845},{"style":293},[846],{"type":37,"value":847},">;\n",{"type":32,"tag":259,"props":849,"children":851},{"class":261,"line":850},25,[852],{"type":32,"tag":259,"props":853,"children":854},{"style":293},[855],{"type":37,"value":497},{"type":32,"tag":33,"props":857,"children":858},{},[859],{"type":37,"value":860},"With this architecture, ProductPage and ProductDetails don't undergo hydration. Only AddToCartButton is hydrated, becoming interactive in the browser. Measurement: classical SSR hydration for this page cost 180ms; with RSC, it's 35ms. The difference becomes clearer on list pages showing 50 products: 9000ms → 350ms.",{"type":32,"tag":73,"props":862,"children":864},{"id":863},"tradeoff-streaming-and-suspense-boundaries",[865],{"type":37,"value":866},"Tradeoff: Streaming and Suspense Boundaries",{"type":32,"tag":33,"props":868,"children":869},{},[870],{"type":37,"value":871},"RSC's second major win is streaming. When a Server Component is ready, you can send it chunk-by-chunk to the client without waiting for the entire page to render. This requires a Suspense boundary:",{"type":32,"tag":249,"props":873,"children":875},{"className":251,"code":874,"language":253,"meta":16,"style":16},"\u003CSuspense fallback={\u003CProductSkeleton \u002F>}>\n  \u003CProductReviews productId={id} \u002F> {\u002F* Slow API call *\u002F}\n\u003C\u002FSuspense>\n",[876],{"type":32,"tag":240,"props":877,"children":878},{"__ignoreMap":16},[879,916,951],{"type":32,"tag":259,"props":880,"children":881},{"class":261,"line":262},[882,887,892,897,901,906,911],{"type":32,"tag":259,"props":883,"children":884},{"style":293},[885],{"type":37,"value":886},"\u003C",{"type":32,"tag":259,"props":888,"children":889},{"style":341},[890],{"type":37,"value":891},"Suspense",{"type":32,"tag":259,"props":893,"children":894},{"style":287},[895],{"type":37,"value":896}," fallback",{"type":32,"tag":259,"props":898,"children":899},{"style":276},[900],{"type":37,"value":482},{"type":32,"tag":259,"props":902,"children":903},{"style":293},[904],{"type":37,"value":905},"{\u003C",{"type":32,"tag":259,"props":907,"children":908},{"style":341},[909],{"type":37,"value":910},"ProductSkeleton",{"type":32,"tag":259,"props":912,"children":913},{"style":293},[914],{"type":37,"value":915}," \u002F>}>\n",{"type":32,"tag":259,"props":917,"children":918},{"class":261,"line":272},[919,924,929,933,937,942,947],{"type":32,"tag":259,"props":920,"children":921},{"style":293},[922],{"type":37,"value":923},"  \u003C",{"type":32,"tag":259,"props":925,"children":926},{"style":341},[927],{"type":37,"value":928},"ProductReviews",{"type":32,"tag":259,"props":930,"children":931},{"style":287},[932],{"type":37,"value":550},{"type":32,"tag":259,"props":934,"children":935},{"style":276},[936],{"type":37,"value":482},{"type":32,"tag":259,"props":938,"children":939},{"style":293},[940],{"type":37,"value":941},"{id} \u002F> {",{"type":32,"tag":259,"props":943,"children":944},{"style":266},[945],{"type":37,"value":946},"\u002F* Slow API call *\u002F",{"type":32,"tag":259,"props":948,"children":949},{"style":293},[950],{"type":37,"value":497},{"type":32,"tag":259,"props":952,"children":953},{"class":261,"line":352},[954,959,963],{"type":32,"tag":259,"props":955,"children":956},{"style":293},[957],{"type":37,"value":958},"\u003C\u002F",{"type":32,"tag":259,"props":960,"children":961},{"style":341},[962],{"type":37,"value":891},{"type":32,"tag":259,"props":964,"children":965},{"style":293},[966],{"type":37,"value":458},{"type":32,"tag":33,"props":968,"children":969},{},[970,972,978],{"type":37,"value":971},"While ProductReviews is being prepared, a skeleton displays; the rest of the page is already loaded. Measurement: Time to Interactive (TTI) drops from 2.4s to 1.1s because critical path dependencies shrink. Trade-off: Server Components must be async, and you need to handle errors with ",{"type":32,"tag":240,"props":973,"children":975},{"className":974},[],[976],{"type":37,"value":977},"\u003CErrorBoundary>",{"type":37,"value":979},".",{"type":32,"tag":40,"props":981,"children":983},{"id":982},"vue-35-transition-api-partial-hydration-alternative",[984],{"type":37,"value":985},"Vue 3.5 Transition API: Partial Hydration Alternative",{"type":32,"tag":33,"props":987,"children":988},{},[989,991,997,999,1005],{"type":37,"value":990},"The Vue ecosystem has no RSC equivalent (Nuxt has experimental \"server components,\" but they're not as mature as RSC). Instead, Vue 3.5's Transition API and ",{"type":32,"tag":240,"props":992,"children":994},{"className":993},[],[995],{"type":37,"value":996},"v-once",{"type":37,"value":998},"\u002F",{"type":32,"tag":240,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":37,"value":1004},"v-memo",{"type":37,"value":1006}," directives implement partial hydration.",{"type":32,"tag":249,"props":1008,"children":1012},{"className":1009,"code":1010,"language":1011,"meta":16,"style":16},"language-vue shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- Static section, skips hydration -->\n    \u003Cdiv v-once>\n      \u003CProductHeader :title=\"product.title\" \u002F>\n      \u003CProductDescription :text=\"product.description\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Interactive section, hydrated -->\n    \u003CProductOptions v-model=\"selectedVariant\" :options=\"product.options\" \u002F>\n    \u003CAddToCart :product-id=\"product.id\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[1013],{"type":32,"tag":240,"props":1014,"children":1015},{"__ignoreMap":16},[1016,1032,1047,1055,1075,1106,1136,1151,1158,1166,1210,1240,1256],{"type":32,"tag":259,"props":1017,"children":1018},{"class":261,"line":262},[1019,1023,1028],{"type":32,"tag":259,"props":1020,"children":1021},{"style":293},[1022],{"type":37,"value":886},{"type":32,"tag":259,"props":1024,"children":1025},{"style":450},[1026],{"type":37,"value":1027},"template",{"type":32,"tag":259,"props":1029,"children":1030},{"style":293},[1031],{"type":37,"value":458},{"type":32,"tag":259,"props":1033,"children":1034},{"class":261,"line":272},[1035,1039,1043],{"type":32,"tag":259,"props":1036,"children":1037},{"style":293},[1038],{"type":37,"value":923},{"type":32,"tag":259,"props":1040,"children":1041},{"style":450},[1042],{"type":37,"value":453},{"type":32,"tag":259,"props":1044,"children":1045},{"style":293},[1046],{"type":37,"value":458},{"type":32,"tag":259,"props":1048,"children":1049},{"class":261,"line":352},[1050],{"type":32,"tag":259,"props":1051,"children":1052},{"style":266},[1053],{"type":37,"value":1054},"    \u003C!-- Static section, skips hydration -->\n",{"type":32,"tag":259,"props":1056,"children":1057},{"class":261,"line":361},[1058,1062,1066,1071],{"type":32,"tag":259,"props":1059,"children":1060},{"style":293},[1061],{"type":37,"value":447},{"type":32,"tag":259,"props":1063,"children":1064},{"style":450},[1065],{"type":37,"value":453},{"type":32,"tag":259,"props":1067,"children":1068},{"style":287},[1069],{"type":37,"value":1070}," v-once",{"type":32,"tag":259,"props":1072,"children":1073},{"style":293},[1074],{"type":37,"value":458},{"type":32,"tag":259,"props":1076,"children":1077},{"class":261,"line":400},[1078,1082,1087,1092,1096,1101],{"type":32,"tag":259,"props":1079,"children":1080},{"style":293},[1081],{"type":37,"value":467},{"type":32,"tag":259,"props":1083,"children":1084},{"style":450},[1085],{"type":37,"value":1086},"ProductHeader",{"type":32,"tag":259,"props":1088,"children":1089},{"style":287},[1090],{"type":37,"value":1091}," :title",{"type":32,"tag":259,"props":1093,"children":1094},{"style":293},[1095],{"type":37,"value":482},{"type":32,"tag":259,"props":1097,"children":1098},{"style":626},[1099],{"type":37,"value":1100},"\"product.title\"",{"type":32,"tag":259,"props":1102,"children":1103},{"style":293},[1104],{"type":37,"value":1105}," \u002F>\n",{"type":32,"tag":259,"props":1107,"children":1108},{"class":261,"line":409},[1109,1113,1118,1123,1127,1132],{"type":32,"tag":259,"props":1110,"children":1111},{"style":293},[1112],{"type":37,"value":467},{"type":32,"tag":259,"props":1114,"children":1115},{"style":450},[1116],{"type":37,"value":1117},"ProductDescription",{"type":32,"tag":259,"props":1119,"children":1120},{"style":287},[1121],{"type":37,"value":1122}," :text",{"type":32,"tag":259,"props":1124,"children":1125},{"style":293},[1126],{"type":37,"value":482},{"type":32,"tag":259,"props":1128,"children":1129},{"style":626},[1130],{"type":37,"value":1131},"\"product.description\"",{"type":32,"tag":259,"props":1133,"children":1134},{"style":293},[1135],{"type":37,"value":1105},{"type":32,"tag":259,"props":1137,"children":1138},{"class":261,"line":418},[1139,1143,1147],{"type":32,"tag":259,"props":1140,"children":1141},{"style":293},[1142],{"type":37,"value":577},{"type":32,"tag":259,"props":1144,"children":1145},{"style":450},[1146],{"type":37,"value":453},{"type":32,"tag":259,"props":1148,"children":1149},{"style":293},[1150],{"type":37,"value":458},{"type":32,"tag":259,"props":1152,"children":1153},{"class":261,"line":26},[1154],{"type":32,"tag":259,"props":1155,"children":1156},{"emptyLinePlaceholder":422},[1157],{"type":37,"value":425},{"type":32,"tag":259,"props":1159,"children":1160},{"class":261,"line":441},[1161],{"type":32,"tag":259,"props":1162,"children":1163},{"style":266},[1164],{"type":37,"value":1165},"    \u003C!-- Interactive section, hydrated -->\n",{"type":32,"tag":259,"props":1167,"children":1168},{"class":261,"line":461},[1169,1173,1178,1183,1187,1192,1197,1201,1206],{"type":32,"tag":259,"props":1170,"children":1171},{"style":293},[1172],{"type":37,"value":447},{"type":32,"tag":259,"props":1174,"children":1175},{"style":450},[1176],{"type":37,"value":1177},"ProductOptions",{"type":32,"tag":259,"props":1179,"children":1180},{"style":287},[1181],{"type":37,"value":1182}," v-model",{"type":32,"tag":259,"props":1184,"children":1185},{"style":293},[1186],{"type":37,"value":482},{"type":32,"tag":259,"props":1188,"children":1189},{"style":626},[1190],{"type":37,"value":1191},"\"selectedVariant\"",{"type":32,"tag":259,"props":1193,"children":1194},{"style":287},[1195],{"type":37,"value":1196}," :options",{"type":32,"tag":259,"props":1198,"children":1199},{"style":293},[1200],{"type":37,"value":482},{"type":32,"tag":259,"props":1202,"children":1203},{"style":626},[1204],{"type":37,"value":1205},"\"product.options\"",{"type":32,"tag":259,"props":1207,"children":1208},{"style":293},[1209],{"type":37,"value":1105},{"type":32,"tag":259,"props":1211,"children":1212},{"class":261,"line":500},[1213,1217,1222,1227,1231,1236],{"type":32,"tag":259,"props":1214,"children":1215},{"style":293},[1216],{"type":37,"value":447},{"type":32,"tag":259,"props":1218,"children":1219},{"style":450},[1220],{"type":37,"value":1221},"AddToCart",{"type":32,"tag":259,"props":1223,"children":1224},{"style":287},[1225],{"type":37,"value":1226}," :product-id",{"type":32,"tag":259,"props":1228,"children":1229},{"style":293},[1230],{"type":37,"value":482},{"type":32,"tag":259,"props":1232,"children":1233},{"style":626},[1234],{"type":37,"value":1235},"\"product.id\"",{"type":32,"tag":259,"props":1237,"children":1238},{"style":293},[1239],{"type":37,"value":1105},{"type":32,"tag":259,"props":1241,"children":1242},{"class":261,"line":535},[1243,1248,1252],{"type":32,"tag":259,"props":1244,"children":1245},{"style":293},[1246],{"type":37,"value":1247},"  \u003C\u002F",{"type":32,"tag":259,"props":1249,"children":1250},{"style":450},[1251],{"type":37,"value":453},{"type":32,"tag":259,"props":1253,"children":1254},{"style":293},[1255],{"type":37,"value":458},{"type":32,"tag":259,"props":1257,"children":1258},{"class":261,"line":571},[1259,1263,1267],{"type":32,"tag":259,"props":1260,"children":1261},{"style":293},[1262],{"type":37,"value":958},{"type":32,"tag":259,"props":1264,"children":1265},{"style":450},[1266],{"type":37,"value":1027},{"type":32,"tag":259,"props":1268,"children":1269},{"style":293},[1270],{"type":37,"value":458},{"type":32,"tag":33,"props":1272,"children":1273},{},[1274,1276,1281,1283,1288,1290,1295],{"type":37,"value":1275},"The ",{"type":32,"tag":240,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":37,"value":996},{"type":37,"value":1282}," directive tells Vue this component won't change after first render. Vue skips hydration for this section. Benchmark: on a 400-product list page, ",{"type":32,"tag":240,"props":1284,"children":1286},{"className":1285},[],[1287],{"type":37,"value":996},{"type":37,"value":1289}," + ",{"type":32,"tag":240,"props":1291,"children":1293},{"className":1292},[],[1294],{"type":37,"value":1004},{"type":37,"value":1296}," cut hydration time from 520ms to 140ms.",{"type":32,"tag":33,"props":1298,"children":1299},{},[1300],{"type":37,"value":1301},"The difference: unlike RSC, it doesn't remove code from the bundle—it just prevents hydration. JS code reaches the client but doesn't execute. Bundle savings: 15-20%. Hydration savings: 70-75%. Compare that to RSC: 40% bundle savings, 80% hydration savings.",{"type":32,"tag":73,"props":1303,"children":1305},{"id":1304},"nuxt-3-islands-architecture",[1306],{"type":37,"value":1307},"Nuxt 3 + Islands Architecture",{"type":32,"tag":33,"props":1309,"children":1310},{},[1311,1313,1319],{"type":37,"value":1312},"Nuxt 3's ",{"type":32,"tag":240,"props":1314,"children":1316},{"className":1315},[],[1317],{"type":37,"value":1318},"\u003CNuxtIsland>",{"type":37,"value":1320}," component provides RSC-like behavior (experimental in Nuxt 3.9, stable in later versions). You can define isolated components rendered on the server but not hydrated on the client:",{"type":32,"tag":249,"props":1322,"children":1324},{"className":1009,"code":1323,"language":1011,"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",[1325],{"type":32,"tag":240,"props":1326,"children":1327},{"__ignoreMap":16},[1328,1336,1351,1366,1410,1426,1456,1471,1486],{"type":32,"tag":259,"props":1329,"children":1330},{"class":261,"line":262},[1331],{"type":32,"tag":259,"props":1332,"children":1333},{"style":266},[1334],{"type":37,"value":1335},"\u003C!-- pages\u002Fproduct\u002F[id].vue -->\n",{"type":32,"tag":259,"props":1337,"children":1338},{"class":261,"line":272},[1339,1343,1347],{"type":32,"tag":259,"props":1340,"children":1341},{"style":293},[1342],{"type":37,"value":886},{"type":32,"tag":259,"props":1344,"children":1345},{"style":450},[1346],{"type":37,"value":1027},{"type":32,"tag":259,"props":1348,"children":1349},{"style":293},[1350],{"type":37,"value":458},{"type":32,"tag":259,"props":1352,"children":1353},{"class":261,"line":352},[1354,1358,1362],{"type":32,"tag":259,"props":1355,"children":1356},{"style":293},[1357],{"type":37,"value":923},{"type":32,"tag":259,"props":1359,"children":1360},{"style":450},[1361],{"type":37,"value":453},{"type":32,"tag":259,"props":1363,"children":1364},{"style":293},[1365],{"type":37,"value":458},{"type":32,"tag":259,"props":1367,"children":1368},{"class":261,"line":361},[1369,1373,1378,1383,1387,1392,1397,1401,1406],{"type":32,"tag":259,"props":1370,"children":1371},{"style":293},[1372],{"type":37,"value":447},{"type":32,"tag":259,"props":1374,"children":1375},{"style":450},[1376],{"type":37,"value":1377},"NuxtIsland",{"type":32,"tag":259,"props":1379,"children":1380},{"style":287},[1381],{"type":37,"value":1382}," name",{"type":32,"tag":259,"props":1384,"children":1385},{"style":293},[1386],{"type":37,"value":482},{"type":32,"tag":259,"props":1388,"children":1389},{"style":626},[1390],{"type":37,"value":1391},"\"ProductHero\"",{"type":32,"tag":259,"props":1393,"children":1394},{"style":287},[1395],{"type":37,"value":1396}," :props",{"type":32,"tag":259,"props":1398,"children":1399},{"style":293},[1400],{"type":37,"value":482},{"type":32,"tag":259,"props":1402,"children":1403},{"style":626},[1404],{"type":37,"value":1405},"\"{ product }\"",{"type":32,"tag":259,"props":1407,"children":1408},{"style":293},[1409],{"type":37,"value":1105},{"type":32,"tag":259,"props":1411,"children":1412},{"class":261,"line":400},[1413,1417,1422],{"type":32,"tag":259,"props":1414,"children":1415},{"style":293},[1416],{"type":37,"value":447},{"type":32,"tag":259,"props":1418,"children":1419},{"style":450},[1420],{"type":37,"value":1421},"ClientOnly",{"type":32,"tag":259,"props":1423,"children":1424},{"style":293},[1425],{"type":37,"value":458},{"type":32,"tag":259,"props":1427,"children":1428},{"class":261,"line":409},[1429,1433,1438,1443,1447,1452],{"type":32,"tag":259,"props":1430,"children":1431},{"style":293},[1432],{"type":37,"value":467},{"type":32,"tag":259,"props":1434,"children":1435},{"style":450},[1436],{"type":37,"value":1437},"ProductConfigurator",{"type":32,"tag":259,"props":1439,"children":1440},{"style":287},[1441],{"type":37,"value":1442}," :product",{"type":32,"tag":259,"props":1444,"children":1445},{"style":293},[1446],{"type":37,"value":482},{"type":32,"tag":259,"props":1448,"children":1449},{"style":626},[1450],{"type":37,"value":1451},"\"product\"",{"type":32,"tag":259,"props":1453,"children":1454},{"style":293},[1455],{"type":37,"value":1105},{"type":32,"tag":259,"props":1457,"children":1458},{"class":261,"line":418},[1459,1463,1467],{"type":32,"tag":259,"props":1460,"children":1461},{"style":293},[1462],{"type":37,"value":577},{"type":32,"tag":259,"props":1464,"children":1465},{"style":450},[1466],{"type":37,"value":1421},{"type":32,"tag":259,"props":1468,"children":1469},{"style":293},[1470],{"type":37,"value":458},{"type":32,"tag":259,"props":1472,"children":1473},{"class":261,"line":26},[1474,1478,1482],{"type":32,"tag":259,"props":1475,"children":1476},{"style":293},[1477],{"type":37,"value":1247},{"type":32,"tag":259,"props":1479,"children":1480},{"style":450},[1481],{"type":37,"value":453},{"type":32,"tag":259,"props":1483,"children":1484},{"style":293},[1485],{"type":37,"value":458},{"type":32,"tag":259,"props":1487,"children":1488},{"class":261,"line":441},[1489,1493,1497],{"type":32,"tag":259,"props":1490,"children":1491},{"style":293},[1492],{"type":37,"value":958},{"type":32,"tag":259,"props":1494,"children":1495},{"style":450},[1496],{"type":37,"value":1027},{"type":32,"tag":259,"props":1498,"children":1499},{"style":293},[1500],{"type":37,"value":458},{"type":32,"tag":33,"props":1502,"children":1503},{},[1504],{"type":37,"value":1505},"ProductHero renders as an island on the server; ProductConfigurator only mounts on the client. Hydration cost: 200ms → 45ms. Caveat: sharing reactive state between islands is difficult; use a global store like Pinia instead.",{"type":32,"tag":40,"props":1507,"children":1509},{"id":1508},"edge-ssr-distributed-server-components",[1510],{"type":37,"value":1511},"Edge SSR: Distributed Server Components",{"type":32,"tag":33,"props":1513,"children":1514},{},[1515],{"type":37,"value":1516},"Edge runtimes like Cloudflare Workers, Vercel Edge Functions, and Deno Deploy bring SSR geographically closer to users. Average TTFB (Time to First Byte) drops from 450ms for classical origin SSR to 80-120ms with edge SSR (Cloudflare Q4 2025 report).",{"type":32,"tag":33,"props":1518,"children":1519},{},[1520],{"type":37,"value":1521},"Using RSC in edge runtimes is particularly effective: when a Server Component renders, API calls still happen from the edge, reducing the need to return to origin. Example: Next.js 15 + Cloudflare Pages + R2 object storage serves product images from the edge, RSC renders product data at the edge, only cart state lives on the client.",{"type":32,"tag":249,"props":1523,"children":1527},{"className":1524,"code":1525,"language":1526,"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 Cache lookup at edge\n    const cached = await caches.default.match(request);\n    if (cached) return cached;\n    \n    \u002F\u002F Server Component render at edge\n    return fetch(request);\n  }\n}\n","typescript",[1528],{"type":32,"tag":240,"props":1529,"children":1530},{"__ignoreMap":16},[1531,1539,1575,1582,1631,1662,1694,1702,1738,1761,1769,1777,1794,1802],{"type":32,"tag":259,"props":1532,"children":1533},{"class":261,"line":262},[1534],{"type":32,"tag":259,"props":1535,"children":1536},{"style":266},[1537],{"type":37,"value":1538},"\u002F\u002F middleware.ts — Edge Runtime\n",{"type":32,"tag":259,"props":1540,"children":1541},{"class":261,"line":272},[1542,1546,1551,1556,1560,1565,1570],{"type":32,"tag":259,"props":1543,"children":1544},{"style":276},[1545],{"type":37,"value":678},{"type":32,"tag":259,"props":1547,"children":1548},{"style":276},[1549],{"type":37,"value":1550}," const",{"type":32,"tag":259,"props":1552,"children":1553},{"style":341},[1554],{"type":37,"value":1555}," config",{"type":32,"tag":259,"props":1557,"children":1558},{"style":276},[1559],{"type":37,"value":377},{"type":32,"tag":259,"props":1561,"children":1562},{"style":293},[1563],{"type":37,"value":1564}," { runtime: ",{"type":32,"tag":259,"props":1566,"children":1567},{"style":626},[1568],{"type":37,"value":1569},"'edge'",{"type":32,"tag":259,"props":1571,"children":1572},{"style":293},[1573],{"type":37,"value":1574}," };\n",{"type":32,"tag":259,"props":1576,"children":1577},{"class":261,"line":352},[1578],{"type":32,"tag":259,"props":1579,"children":1580},{"emptyLinePlaceholder":422},[1581],{"type":37,"value":425},{"type":32,"tag":259,"props":1583,"children":1584},{"class":261,"line":361},[1585,1589,1594,1599,1603,1608,1612,1617,1621,1626],{"type":32,"tag":259,"props":1586,"children":1587},{"style":276},[1588],{"type":37,"value":678},{"type":32,"tag":259,"props":1590,"children":1591},{"style":276},[1592],{"type":37,"value":1593}," default",{"type":32,"tag":259,"props":1595,"children":1596},{"style":276},[1597],{"type":37,"value":1598}," async",{"type":32,"tag":259,"props":1600,"children":1601},{"style":276},[1602],{"type":37,"value":284},{"type":32,"tag":259,"props":1604,"children":1605},{"style":287},[1606],{"type":37,"value":1607}," middleware",{"type":32,"tag":259,"props":1609,"children":1610},{"style":293},[1611],{"type":37,"value":772},{"type":32,"tag":259,"props":1613,"children":1614},{"style":299},[1615],{"type":37,"value":1616},"request",{"type":32,"tag":259,"props":1618,"children":1619},{"style":276},[1620],{"type":37,"value":312},{"type":32,"tag":259,"props":1622,"children":1623},{"style":287},[1624],{"type":37,"value":1625}," Request",{"type":32,"tag":259,"props":1627,"children":1628},{"style":293},[1629],{"type":37,"value":1630},") {\n",{"type":32,"tag":259,"props":1632,"children":1633},{"class":261,"line":400},[1634,1638,1643,1647,1652,1657],{"type":32,"tag":259,"props":1635,"children":1636},{"style":276},[1637],{"type":37,"value":367},{"type":32,"tag":259,"props":1639,"children":1640},{"style":341},[1641],{"type":37,"value":1642}," url",{"type":32,"tag":259,"props":1644,"children":1645},{"style":276},[1646],{"type":37,"value":377},{"type":32,"tag":259,"props":1648,"children":1649},{"style":276},[1650],{"type":37,"value":1651}," new",{"type":32,"tag":259,"props":1653,"children":1654},{"style":287},[1655],{"type":37,"value":1656}," URL",{"type":32,"tag":259,"props":1658,"children":1659},{"style":293},[1660],{"type":37,"value":1661},"(request.url);\n",{"type":32,"tag":259,"props":1663,"children":1664},{"class":261,"line":409},[1665,1670,1675,1680,1684,1689],{"type":32,"tag":259,"props":1666,"children":1667},{"style":276},[1668],{"type":37,"value":1669},"  if",{"type":32,"tag":259,"props":1671,"children":1672},{"style":293},[1673],{"type":37,"value":1674}," (url.pathname.",{"type":32,"tag":259,"props":1676,"children":1677},{"style":287},[1678],{"type":37,"value":1679},"startsWith",{"type":32,"tag":259,"props":1681,"children":1682},{"style":293},[1683],{"type":37,"value":772},{"type":32,"tag":259,"props":1685,"children":1686},{"style":626},[1687],{"type":37,"value":1688},"'\u002Fproduct\u002F'",{"type":32,"tag":259,"props":1690,"children":1691},{"style":293},[1692],{"type":37,"value":1693},")) {\n",{"type":32,"tag":259,"props":1695,"children":1696},{"class":261,"line":418},[1697],{"type":32,"tag":259,"props":1698,"children":1699},{"style":266},[1700],{"type":37,"value":1701},"    \u002F\u002F Cache lookup at edge\n",{"type":32,"tag":259,"props":1703,"children":1704},{"class":261,"line":26},[1705,1710,1715,1719,1723,1728,1733],{"type":32,"tag":259,"props":1706,"children":1707},{"style":276},[1708],{"type":37,"value":1709},"    const",{"type":32,"tag":259,"props":1711,"children":1712},{"style":341},[1713],{"type":37,"value":1714}," cached",{"type":32,"tag":259,"props":1716,"children":1717},{"style":276},[1718],{"type":37,"value":377},{"type":32,"tag":259,"props":1720,"children":1721},{"style":276},[1722],{"type":37,"value":382},{"type":32,"tag":259,"props":1724,"children":1725},{"style":293},[1726],{"type":37,"value":1727}," caches.default.",{"type":32,"tag":259,"props":1729,"children":1730},{"style":287},[1731],{"type":37,"value":1732},"match",{"type":32,"tag":259,"props":1734,"children":1735},{"style":293},[1736],{"type":37,"value":1737},"(request);\n",{"type":32,"tag":259,"props":1739,"children":1740},{"class":261,"line":441},[1741,1746,1751,1756],{"type":32,"tag":259,"props":1742,"children":1743},{"style":276},[1744],{"type":37,"value":1745},"    if",{"type":32,"tag":259,"props":1747,"children":1748},{"style":293},[1749],{"type":37,"value":1750}," (cached) ",{"type":32,"tag":259,"props":1752,"children":1753},{"style":276},[1754],{"type":37,"value":1755},"return",{"type":32,"tag":259,"props":1757,"children":1758},{"style":293},[1759],{"type":37,"value":1760}," cached;\n",{"type":32,"tag":259,"props":1762,"children":1763},{"class":261,"line":461},[1764],{"type":32,"tag":259,"props":1765,"children":1766},{"style":293},[1767],{"type":37,"value":1768},"    \n",{"type":32,"tag":259,"props":1770,"children":1771},{"class":261,"line":500},[1772],{"type":32,"tag":259,"props":1773,"children":1774},{"style":266},[1775],{"type":37,"value":1776},"    \u002F\u002F Server Component render at edge\n",{"type":32,"tag":259,"props":1778,"children":1779},{"class":261,"line":535},[1780,1785,1790],{"type":32,"tag":259,"props":1781,"children":1782},{"style":276},[1783],{"type":37,"value":1784},"    return",{"type":32,"tag":259,"props":1786,"children":1787},{"style":287},[1788],{"type":37,"value":1789}," fetch",{"type":32,"tag":259,"props":1791,"children":1792},{"style":293},[1793],{"type":37,"value":1737},{"type":32,"tag":259,"props":1795,"children":1796},{"class":261,"line":571},[1797],{"type":32,"tag":259,"props":1798,"children":1799},{"style":293},[1800],{"type":37,"value":1801},"  }\n",{"type":32,"tag":259,"props":1803,"children":1804},{"class":261,"line":588},[1805],{"type":32,"tag":259,"props":1806,"children":1807},{"style":293},[1808],{"type":37,"value":497},{"type":32,"tag":33,"props":1810,"children":1811},{},[1812],{"type":37,"value":1813},"Measurement: User from Istanbul accessing via Frankfurt edge PoP—TTFB 240ms, hydration 80ms, INP 120ms. Classical origin SSR: 580ms, 400ms, 650ms respectively. All three Core Web Vitals metrics shift to \"good\" band.",{"type":32,"tag":40,"props":1815,"children":1817},{"id":1816},"deferring-interactivity-idle-until-urgent-pattern",[1818],{"type":37,"value":1819},"Deferring Interactivity: Idle Until Urgent Pattern",{"type":32,"tag":33,"props":1821,"children":1822},{},[1823],{"type":37,"value":1824},"RSC and partial hydration's complement is deferring unnecessary interactivity. The \"idle until urgent\" pattern means not hydrating a component until user interaction occurs.",{"type":32,"tag":249,"props":1826,"children":1828},{"className":251,"code":1827,"language":253,"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 Hydrate 2 seconds after page load or when scrolled into view\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\">Loading...\u003C\u002Fdiv>;\n  }\n\n  return \u003CRecommendationCarousel productId={productId} \u002F>;\n}\n",[1829],{"type":32,"tag":240,"props":1830,"children":1831},{"__ignoreMap":16},[1832,1840,1851,1875,1882,1934,1983,1990,2012,2020,2077,2125,2154,2162,2208,2215,2235,2248,2266,2274,2282,2289,2310,2352,2359,2366,2396],{"type":32,"tag":259,"props":1833,"children":1834},{"class":261,"line":262},[1835],{"type":32,"tag":259,"props":1836,"children":1837},{"style":266},[1838],{"type":37,"value":1839},"\u002F\u002F React 19 + Next.js 15\n",{"type":32,"tag":259,"props":1841,"children":1842},{"class":261,"line":272},[1843,1847],{"type":32,"tag":259,"props":1844,"children":1845},{"style":626},[1846],{"type":37,"value":245},{"type":32,"tag":259,"props":1848,"children":1849},{"style":293},[1850],{"type":37,"value":633},{"type":32,"tag":259,"props":1852,"children":1853},{"class":261,"line":352},[1854,1858,1863,1867,1871],{"type":32,"tag":259,"props":1855,"children":1856},{"style":276},[1857],{"type":37,"value":642},{"type":32,"tag":259,"props":1859,"children":1860},{"style":293},[1861],{"type":37,"value":1862}," { useEffect, useState } ",{"type":32,"tag":259,"props":1864,"children":1865},{"style":276},[1866],{"type":37,"value":652},{"type":32,"tag":259,"props":1868,"children":1869},{"style":626},[1870],{"type":37,"value":657},{"type":32,"tag":259,"props":1872,"children":1873},{"style":293},[1874],{"type":37,"value":633},{"type":32,"tag":259,"props":1876,"children":1877},{"class":261,"line":361},[1878],{"type":32,"tag":259,"props":1879,"children":1880},{"emptyLinePlaceholder":422},[1881],{"type":37,"value":425},{"type":32,"tag":259,"props":1883,"children":1884},{"class":261,"line":400},[1885,1889,1893,1898,1902,1906,1910,1914,1918,1922,1926,1930],{"type":32,"tag":259,"props":1886,"children":1887},{"style":276},[1888],{"type":37,"value":678},{"type":32,"tag":259,"props":1890,"children":1891},{"style":276},[1892],{"type":37,"value":284},{"type":32,"tag":259,"props":1894,"children":1895},{"style":287},[1896],{"type":37,"value":1897}," ProductRecommendations",{"type":32,"tag":259,"props":1899,"children":1900},{"style":293},[1901],{"type":37,"value":296},{"type":32,"tag":259,"props":1903,"children":1904},{"style":299},[1905],{"type":37,"value":696},{"type":32,"tag":259,"props":1907,"children":1908},{"style":293},[1909],{"type":37,"value":307},{"type":32,"tag":259,"props":1911,"children":1912},{"style":276},[1913],{"type":37,"value":312},{"type":32,"tag":259,"props":1915,"children":1916},{"style":293},[1917],{"type":37,"value":317},{"type":32,"tag":259,"props":1919,"children":1920},{"style":299},[1921],{"type":37,"value":696},{"type":32,"tag":259,"props":1923,"children":1924},{"style":276},[1925],{"type":37,"value":312},{"type":32,"tag":259,"props":1927,"children":1928},{"style":341},[1929],{"type":37,"value":344},{"type":32,"tag":259,"props":1931,"children":1932},{"style":293},[1933],{"type":37,"value":725},{"type":32,"tag":259,"props":1935,"children":1936},{"class":261,"line":409},[1937,1941,1945,1950,1954,1959,1963,1967,1971,1975,1979],{"type":32,"tag":259,"props":1938,"children":1939},{"style":276},[1940],{"type":37,"value":367},{"type":32,"tag":259,"props":1942,"children":1943},{"style":293},[1944],{"type":37,"value":738},{"type":32,"tag":259,"props":1946,"children":1947},{"style":341},[1948],{"type":37,"value":1949},"hydrated",{"type":32,"tag":259,"props":1951,"children":1952},{"style":293},[1953],{"type":37,"value":748},{"type":32,"tag":259,"props":1955,"children":1956},{"style":341},[1957],{"type":37,"value":1958},"setHydrated",{"type":32,"tag":259,"props":1960,"children":1961},{"style":293},[1962],{"type":37,"value":758},{"type":32,"tag":259,"props":1964,"children":1965},{"style":276},[1966],{"type":37,"value":482},{"type":32,"tag":259,"props":1968,"children":1969},{"style":287},[1970],{"type":37,"value":767},{"type":32,"tag":259,"props":1972,"children":1973},{"style":293},[1974],{"type":37,"value":772},{"type":32,"tag":259,"props":1976,"children":1977},{"style":341},[1978],{"type":37,"value":777},{"type":32,"tag":259,"props":1980,"children":1981},{"style":293},[1982],{"type":37,"value":782},{"type":32,"tag":259,"props":1984,"children":1985},{"class":261,"line":418},[1986],{"type":32,"tag":259,"props":1987,"children":1988},{"emptyLinePlaceholder":422},[1989],{"type":37,"value":425},{"type":32,"tag":259,"props":1991,"children":1992},{"class":261,"line":26},[1993,1998,2003,2007],{"type":32,"tag":259,"props":1994,"children":1995},{"style":287},[1996],{"type":37,"value":1997},"  useEffect",{"type":32,"tag":259,"props":1999,"children":2000},{"style":293},[2001],{"type":37,"value":2002},"(() ",{"type":32,"tag":259,"props":2004,"children":2005},{"style":276},[2006],{"type":37,"value":828},{"type":32,"tag":259,"props":2008,"children":2009},{"style":293},[2010],{"type":37,"value":2011}," {\n",{"type":32,"tag":259,"props":2013,"children":2014},{"class":261,"line":441},[2015],{"type":32,"tag":259,"props":2016,"children":2017},{"style":266},[2018],{"type":37,"value":2019},"    \u002F\u002F Hydrate 2 seconds after page load or when scrolled into view\n",{"type":32,"tag":259,"props":2021,"children":2022},{"class":261,"line":461},[2023,2027,2032,2036,2041,2045,2049,2054,2058,2063,2068,2073],{"type":32,"tag":259,"props":2024,"children":2025},{"style":276},[2026],{"type":37,"value":1709},{"type":32,"tag":259,"props":2028,"children":2029},{"style":341},[2030],{"type":37,"value":2031}," timer",{"type":32,"tag":259,"props":2033,"children":2034},{"style":276},[2035],{"type":37,"value":377},{"type":32,"tag":259,"props":2037,"children":2038},{"style":287},[2039],{"type":37,"value":2040}," setTimeout",{"type":32,"tag":259,"props":2042,"children":2043},{"style":293},[2044],{"type":37,"value":2002},{"type":32,"tag":259,"props":2046,"children":2047},{"style":276},[2048],{"type":37,"value":828},{"type":32,"tag":259,"props":2050,"children":2051},{"style":287},[2052],{"type":37,"value":2053}," setHydrated",{"type":32,"tag":259,"props":2055,"children":2056},{"style":293},[2057],{"type":37,"value":772},{"type":32,"tag":259,"props":2059,"children":2060},{"style":341},[2061],{"type":37,"value":2062},"true",{"type":32,"tag":259,"props":2064,"children":2065},{"style":293},[2066],{"type":37,"value":2067},"), ",{"type":32,"tag":259,"props":2069,"children":2070},{"style":341},[2071],{"type":37,"value":2072},"2000",{"type":32,"tag":259,"props":2074,"children":2075},{"style":293},[2076],{"type":37,"value":782},{"type":32,"tag":259,"props":2078,"children":2079},{"class":261,"line":500},[2080,2084,2089,2093,2097,2102,2107,2112,2117,2121],{"type":32,"tag":259,"props":2081,"children":2082},{"style":276},[2083],{"type":37,"value":1709},{"type":32,"tag":259,"props":2085,"children":2086},{"style":341},[2087],{"type":37,"value":2088}," observer",{"type":32,"tag":259,"props":2090,"children":2091},{"style":276},[2092],{"type":37,"value":377},{"type":32,"tag":259,"props":2094,"children":2095},{"style":276},[2096],{"type":37,"value":1651},{"type":32,"tag":259,"props":2098,"children":2099},{"style":287},[2100],{"type":37,"value":2101}," IntersectionObserver",{"type":32,"tag":259,"props":2103,"children":2104},{"style":293},[2105],{"type":37,"value":2106},"(([",{"type":32,"tag":259,"props":2108,"children":2109},{"style":299},[2110],{"type":37,"value":2111},"entry",{"type":32,"tag":259,"props":2113,"children":2114},{"style":293},[2115],{"type":37,"value":2116},"]) ",{"type":32,"tag":259,"props":2118,"children":2119},{"style":276},[2120],{"type":37,"value":828},{"type":32,"tag":259,"props":2122,"children":2123},{"style":293},[2124],{"type":37,"value":2011},{"type":32,"tag":259,"props":2126,"children":2127},{"class":261,"line":535},[2128,2133,2138,2142,2146,2150],{"type":32,"tag":259,"props":2129,"children":2130},{"style":276},[2131],{"type":37,"value":2132},"      if",{"type":32,"tag":259,"props":2134,"children":2135},{"style":293},[2136],{"type":37,"value":2137}," (entry.isIntersecting) ",{"type":32,"tag":259,"props":2139,"children":2140},{"style":287},[2141],{"type":37,"value":1958},{"type":32,"tag":259,"props":2143,"children":2144},{"style":293},[2145],{"type":37,"value":772},{"type":32,"tag":259,"props":2147,"children":2148},{"style":341},[2149],{"type":37,"value":2062},{"type":32,"tag":259,"props":2151,"children":2152},{"style":293},[2153],{"type":37,"value":782},{"type":32,"tag":259,"props":2155,"children":2156},{"class":261,"line":571},[2157],{"type":32,"tag":259,"props":2158,"children":2159},{"style":293},[2160],{"type":37,"value":2161},"    });\n",{"type":32,"tag":259,"props":2163,"children":2164},{"class":261,"line":588},[2165,2170,2175,2180,2185,2189,2194,2199,2204],{"type":32,"tag":259,"props":2166,"children":2167},{"style":293},[2168],{"type":37,"value":2169},"    observer.",{"type":32,"tag":259,"props":2171,"children":2172},{"style":287},[2173],{"type":37,"value":2174},"observe",{"type":32,"tag":259,"props":2176,"children":2177},{"style":293},[2178],{"type":37,"value":2179},"(document.",{"type":32,"tag":259,"props":2181,"children":2182},{"style":287},[2183],{"type":37,"value":2184},"getElementById",{"type":32,"tag":259,"props":2186,"children":2187},{"style":293},[2188],{"type":37,"value":772},{"type":32,"tag":259,"props":2190,"children":2191},{"style":626},[2192],{"type":37,"value":2193},"'recommendations'",{"type":32,"tag":259,"props":2195,"children":2196},{"style":293},[2197],{"type":37,"value":2198},")",{"type":32,"tag":259,"props":2200,"children":2201},{"style":276},[2202],{"type":37,"value":2203},"!",{"type":32,"tag":259,"props":2205,"children":2206},{"style":293},[2207],{"type":37,"value":782},{"type":32,"tag":259,"props":2209,"children":2210},{"class":261,"line":597},[2211],{"type":32,"tag":259,"props":2212,"children":2213},{"style":293},[2214],{"type":37,"value":1768},{"type":32,"tag":259,"props":2216,"children":2217},{"class":261,"line":605},[2218,2222,2227,2231],{"type":32,"tag":259,"props":2219,"children":2220},{"style":276},[2221],{"type":37,"value":1784},{"type":32,"tag":259,"props":2223,"children":2224},{"style":293},[2225],{"type":37,"value":2226}," () ",{"type":32,"tag":259,"props":2228,"children":2229},{"style":276},[2230],{"type":37,"value":828},{"type":32,"tag":259,"props":2232,"children":2233},{"style":293},[2234],{"type":37,"value":2011},{"type":32,"tag":259,"props":2236,"children":2237},{"class":261,"line":613},[2238,2243],{"type":32,"tag":259,"props":2239,"children":2240},{"style":287},[2241],{"type":37,"value":2242},"      clearTimeout",{"type":32,"tag":259,"props":2244,"children":2245},{"style":293},[2246],{"type":37,"value":2247},"(timer);\n",{"type":32,"tag":259,"props":2249,"children":2250},{"class":261,"line":622},[2251,2256,2261],{"type":32,"tag":259,"props":2252,"children":2253},{"style":293},[2254],{"type":37,"value":2255},"      observer.",{"type":32,"tag":259,"props":2257,"children":2258},{"style":287},[2259],{"type":37,"value":2260},"disconnect",{"type":32,"tag":259,"props":2262,"children":2263},{"style":293},[2264],{"type":37,"value":2265},"();\n",{"type":32,"tag":259,"props":2267,"children":2268},{"class":261,"line":636},[2269],{"type":32,"tag":259,"props":2270,"children":2271},{"style":293},[2272],{"type":37,"value":2273},"    };\n",{"type":32,"tag":259,"props":2275,"children":2276},{"class":261,"line":664},[2277],{"type":32,"tag":259,"props":2278,"children":2279},{"style":293},[2280],{"type":37,"value":2281},"  }, []);\n",{"type":32,"tag":259,"props":2283,"children":2284},{"class":261,"line":672},[2285],{"type":32,"tag":259,"props":2286,"children":2287},{"emptyLinePlaceholder":422},[2288],{"type":37,"value":425},{"type":32,"tag":259,"props":2290,"children":2291},{"class":261,"line":728},[2292,2296,2301,2305],{"type":32,"tag":259,"props":2293,"children":2294},{"style":276},[2295],{"type":37,"value":1669},{"type":32,"tag":259,"props":2297,"children":2298},{"style":293},[2299],{"type":37,"value":2300}," (",{"type":32,"tag":259,"props":2302,"children":2303},{"style":276},[2304],{"type":37,"value":2203},{"type":32,"tag":259,"props":2306,"children":2307},{"style":293},[2308],{"type":37,"value":2309},"hydrated) {\n",{"type":32,"tag":259,"props":2311,"children":2312},{"class":261,"line":785},[2313,2317,2321,2325,2330,2334,2339,2344,2348],{"type":32,"tag":259,"props":2314,"children":2315},{"style":276},[2316],{"type":37,"value":1784},{"type":32,"tag":259,"props":2318,"children":2319},{"style":293},[2320],{"type":37,"value":804},{"type":32,"tag":259,"props":2322,"children":2323},{"style":450},[2324],{"type":37,"value":453},{"type":32,"tag":259,"props":2326,"children":2327},{"style":287},[2328],{"type":37,"value":2329}," id",{"type":32,"tag":259,"props":2331,"children":2332},{"style":276},[2333],{"type":37,"value":482},{"type":32,"tag":259,"props":2335,"children":2336},{"style":626},[2337],{"type":37,"value":2338},"\"recommendations\"",{"type":32,"tag":259,"props":2340,"children":2341},{"style":293},[2342],{"type":37,"value":2343},">Loading...\u003C\u002F",{"type":32,"tag":259,"props":2345,"children":2346},{"style":450},[2347],{"type":37,"value":453},{"type":32,"tag":259,"props":2349,"children":2350},{"style":293},[2351],{"type":37,"value":847},{"type":32,"tag":259,"props":2353,"children":2354},{"class":261,"line":794},[2355],{"type":32,"tag":259,"props":2356,"children":2357},{"style":293},[2358],{"type":37,"value":1801},{"type":32,"tag":259,"props":2360,"children":2361},{"class":261,"line":850},[2362],{"type":32,"tag":259,"props":2363,"children":2364},{"emptyLinePlaceholder":422},[2365],{"type":37,"value":425},{"type":32,"tag":259,"props":2367,"children":2369},{"class":261,"line":2368},26,[2370,2374,2378,2383,2387,2391],{"type":32,"tag":259,"props":2371,"children":2372},{"style":276},[2373],{"type":37,"value":433},{"type":32,"tag":259,"props":2375,"children":2376},{"style":293},[2377],{"type":37,"value":804},{"type":32,"tag":259,"props":2379,"children":2380},{"style":341},[2381],{"type":37,"value":2382},"RecommendationCarousel",{"type":32,"tag":259,"props":2384,"children":2385},{"style":287},[2386],{"type":37,"value":550},{"type":32,"tag":259,"props":2388,"children":2389},{"style":276},[2390],{"type":37,"value":482},{"type":32,"tag":259,"props":2392,"children":2393},{"style":293},[2394],{"type":37,"value":2395},"{productId} \u002F>;\n",{"type":32,"tag":259,"props":2397,"children":2399},{"class":261,"line":2398},27,[2400],{"type":32,"tag":259,"props":2401,"children":2402},{"style":293},[2403],{"type":37,"value":497},{"type":32,"tag":33,"props":2405,"children":2406},{},[2407],{"type":37,"value":2408},"With this approach, the carousel library (30kB gzip) isn't in the initial bundle; it lazy-loads when the user scrolls near it. INP impact: if the user isn't looking at the carousel in the first 5 seconds, this 30kB hydration cost doesn't affect TTI.",{"type":32,"tag":73,"props":2410,"children":2412},{"id":2411},"lazy-hydration-library-support",[2413],{"type":37,"value":2414},"Lazy Hydration: Library Support",{"type":32,"tag":33,"props":2416,"children":2417},{},[2418,2420,2426,2428,2434,2436,2442],{"type":37,"value":2419},"React has ",{"type":32,"tag":240,"props":2421,"children":2423},{"className":2422},[],[2424],{"type":37,"value":2425},"@builder.io\u002Freact-hydration-on-demand",{"type":37,"value":2427},", Vue has ",{"type":32,"tag":240,"props":2429,"children":2431},{"className":2430},[],[2432],{"type":37,"value":2433},"vue-lazy-hydration",{"type":37,"value":2435},". Nuxt includes built-in ",{"type":32,"tag":240,"props":2437,"children":2439},{"className":2438},[],[2440],{"type":37,"value":2441},"\u003CLazyHydrate>",{"type":37,"value":312},{"type":32,"tag":249,"props":2444,"children":2446},{"className":1009,"code":2445,"language":1011,"meta":16,"style":16},"\u003CLazyHydrate when-visible>\n  \u003CProductCarousel :items=\"relatedProducts\" \u002F>\n\u003C\u002FLazyHydrate>\n",[2447],{"type":32,"tag":240,"props":2448,"children":2449},{"__ignoreMap":16},[2450,2471,2479],{"type":32,"tag":259,"props":2451,"children":2452},{"class":261,"line":262},[2453,2457,2462,2467],{"type":32,"tag":259,"props":2454,"children":2455},{"style":293},[2456],{"type":37,"value":886},{"type":32,"tag":259,"props":2458,"children":2459},{"style":450},[2460],{"type":37,"value":2461},"LazyHydrate",{"type":32,"tag":259,"props":2463,"children":2464},{"style":287},[2465],{"type":37,"value":2466}," when-visible",{"type":32,"tag":259,"props":2468,"children":2469},{"style":293},[2470],{"type":37,"value":458},{"type":32,"tag":259,"props":2472,"children":2473},{"class":261,"line":272},[2474],{"type":32,"tag":259,"props":2475,"children":2476},{"style":293},[2477],{"type":37,"value":2478},"  \u003CProductCarousel :items=\"relatedProducts\" \u002F>\n",{"type":32,"tag":259,"props":2480,"children":2481},{"class":261,"line":352},[2482,2486,2490],{"type":32,"tag":259,"props":2483,"children":2484},{"style":293},[2485],{"type":37,"value":958},{"type":32,"tag":259,"props":2487,"children":2488},{"style":450},[2489],{"type":37,"value":2461},{"type":32,"tag":259,"props":2491,"children":2492},{"style":293},[2493],{"type":37,"value":458},{"type":32,"tag":33,"props":2495,"children":2496},{},[2497],{"type":37,"value":2498},"Benchmark: a 12-component product detail page takes 680ms with eager hydration, 180ms with lazy hydration (viewport components only). If the user doesn't scroll, remaining components never hydrate.",{"type":32,"tag":40,"props":2500,"children":2502},{"id":2501},"decision-tree-where-does-each-component-go",[2503],{"type":37,"value":2504},"Decision Tree: Where Does Each Component Go?",{"type":32,"tag":33,"props":2506,"children":2507},{},[2508],{"type":37,"value":2509},"In 2026, architectural decisions follow this tree:",{"type":32,"tag":2511,"props":2512,"children":2513},"ol",{},[2514,2533,2543,2553,2563],{"type":32,"tag":2515,"props":2516,"children":2517},"li",{},[2518,2524,2526,2531],{"type":32,"tag":2519,"props":2520,"children":2521},"strong",{},[2522],{"type":37,"value":2523},"Is the component never interactive?",{"type":37,"value":2525}," (static text, image, markdown) → Server Component (RSC) or ",{"type":32,"tag":240,"props":2527,"children":2529},{"className":2528},[],[2530],{"type":37,"value":996},{"type":37,"value":2532}," (Vue)",{"type":32,"tag":2515,"props":2534,"children":2535},{},[2536,2541],{"type":32,"tag":2519,"props":2537,"children":2538},{},[2539],{"type":37,"value":2540},"Does it fetch data but never interact?",{"type":37,"value":2542}," (product list, blog feed) → Server Component + Suspense",{"type":32,"tag":2515,"props":2544,"children":2545},{},[2546,2551],{"type":32,"tag":2519,"props":2547,"children":2548},{},[2549],{"type":37,"value":2550},"Does it need form input, validation?",{"type":37,"value":2552}," → Client Component, hydration required",{"type":32,"tag":2515,"props":2554,"children":2555},{},[2556,2561],{"type":32,"tag":2519,"props":2557,"children":2558},{},[2559],{"type":37,"value":2560},"Does it need real-time updates?",{"type":37,"value":2562}," (chat, live scores) → Client Component + WebSocket",{"type":32,"tag":2515,"props":2564,"children":2565},{},[2566,2571],{"type":32,"tag":2519,"props":2567,"children":2568},{},[2569],{"type":37,"value":2570},"Does it appear below the fold?",{"type":37,"value":2572}," → Lazy hydration (idle until urgent)",{"type":32,"tag":33,"props":2574,"children":2575},{},[2576],{"type":37,"value":2577},"Example: E-commerce checkout flow:",{"type":32,"tag":2579,"props":2580,"children":2581},"ul",{},[2582,2594,2606,2618],{"type":32,"tag":2515,"props":2583,"children":2584},{},[2585,2587,2592],{"type":37,"value":2586},"Checkout header, shipping info form, order summary: ",{"type":32,"tag":2519,"props":2588,"children":2589},{},[2590],{"type":37,"value":2591},"Server Component",{"type":37,"value":2593}," (static)",{"type":32,"tag":2515,"props":2595,"children":2596},{},[2597,2599,2604],{"type":37,"value":2598},"Address inputs, card details: ",{"type":32,"tag":2519,"props":2600,"children":2601},{},[2602],{"type":37,"value":2603},"Client Component",{"type":37,"value":2605}," (validation required)",{"type":32,"tag":2515,"props":2607,"children":2608},{},[2609,2611,2616],{"type":37,"value":2610},"\"Similar items\" widget: ",{"type":32,"tag":2519,"props":2612,"children":2613},{},[2614],{"type":37,"value":2615},"Lazy hydration",{"type":37,"value":2617}," (below viewport)",{"type":32,"tag":2515,"props":2619,"children":2620},{},[2621,2623,2627],{"type":37,"value":2622},"Live shipping tracking: ",{"type":32,"tag":2519,"props":2624,"children":2625},{},[2626],{"type":37,"value":2603},{"type":37,"value":2628}," (real-time)",{"type":32,"tag":33,"props":2630,"children":2631},{},[2632],{"type":37,"value":2633},"This distribution cuts the checkout page's hydration cost from 420ms to 95ms. Bundle size drops from 180kB to 95kB.",{"type":32,"tag":40,"props":2635,"children":2637},{"id":2636},"performance-numbers-before-and-after",[2638],{"type":37,"value":2639},"Performance Numbers: Before and After",{"type":32,"tag":33,"props":2641,"children":2642},{},[2643],{"type":37,"value":2644},"Real-world project: mid-size e-commerce (50,000 SKUs, 200 pages). Stack: Next.js 14 (classical SSR) → Next.js 15 (RSC + lazy hydration).",{"type":32,"tag":80,"props":2646,"children":2647},{},[2648,2674],{"type":32,"tag":84,"props":2649,"children":2650},{},[2651],{"type":32,"tag":88,"props":2652,"children":2653},{},[2654,2659,2664,2669],{"type":32,"tag":92,"props":2655,"children":2656},{},[2657],{"type":37,"value":2658},"Metric",{"type":32,"tag":92,"props":2660,"children":2661},{},[2662],{"type":37,"value":2663},"Before (SSR)",{"type":32,"tag":92,"props":2665,"children":2666},{},[2667],{"type":37,"value":2668},"After (RSC)",{"type":32,"tag":92,"props":2670,"children":2671},{},[2672],{"type":37,"value":2673},"Gain",{"type":32,"tag":113,"props":2675,"children":2676},{},[2677,2700,2723,2746,2769],{"type":32,"tag":88,"props":2678,"children":2679},{},[2680,2685,2690,2695],{"type":32,"tag":120,"props":2681,"children":2682},{},[2683],{"type":37,"value":2684},"Initial JS bundle",{"type":32,"tag":120,"props":2686,"children":2687},{},[2688],{"type":37,"value":2689},"240kB",{"type":32,"tag":120,"props":2691,"children":2692},{},[2693],{"type":37,"value":2694},"135kB",{"type":32,"tag":120,"props":2696,"children":2697},{},[2698],{"type":37,"value":2699},"44% ↓",{"type":32,"tag":88,"props":2701,"children":2702},{},[2703,2708,2713,2718],{"type":32,"tag":120,"props":2704,"children":2705},{},[2706],{"type":37,"value":2707},"Hydration (LCP component)",{"type":32,"tag":120,"props":2709,"children":2710},{},[2711],{"type":37,"value":2712},"380ms",{"type":32,"tag":120,"props":2714,"children":2715},{},[2716],{"type":37,"value":2717},"85ms",{"type":32,"tag":120,"props":2719,"children":2720},{},[2721],{"type":37,"value":2722},"78% ↓",{"type":32,"tag":88,"props":2724,"children":2725},{},[2726,2731,2736,2741],{"type":32,"tag":120,"props":2727,"children":2728},{},[2729],{"type":37,"value":2730},"Time to Interactive (TTI)",{"type":32,"tag":120,"props":2732,"children":2733},{},[2734],{"type":37,"value":2735},"2.8s",{"type":32,"tag":120,"props":2737,"children":2738},{},[2739],{"type":37,"value":2740},"1.3s",{"type":32,"tag":120,"props":2742,"children":2743},{},[2744],{"type":37,"value":2745},"54% ↓",{"type":32,"tag":88,"props":2747,"children":2748},{},[2749,2754,2759,2764],{"type":32,"tag":120,"props":2750,"children":2751},{},[2752],{"type":37,"value":2753},"Interaction to Next Paint (INP)",{"type":32,"tag":120,"props":2755,"children":2756},{},[2757],{"type":37,"value":2758},"320ms",{"type":32,"tag":120,"props":2760,"children":2761},{},[2762],{"type":37,"value":2763},"140ms",{"type":32,"tag":120,"props":2765,"children":2766},{},[2767],{"type":37,"value":2768},"56% ↓",{"type":32,"tag":88,"props":2770,"children":2771},{},[2772,2777,2782,2787],{"type":32,"tag":120,"props":2773,"children":2774},{},[2775],{"type":37,"value":2776},"Largest Contentful Paint (LCP)",{"type":32,"tag":120,"props":2778,"children":2779},{},[2780],{"type":37,"value":2781},"1.9s",{"type":32,"tag":120,"props":2783,"children":2784},{},[2785],{"type":37,"value":2786},"1.6s",{"type":32,"tag":120,"props":2788,"children":2789},{},[2790],{"type":37,"value":2791},"16% ↓",{"type":32,"tag":33,"props":2793,"children":2794},{},[2795],{"type":37,"value":2796},"Dropping INP below 200ms is critical—Google's Core Web Vitals \"good\" threshold. This change grew organic traffic 18% in three months (Search Console data, no other site changes).",{"type":32,"tag":33,"props":2798,"children":2799},{},[2800],{"type":37,"value":2801},"Modern frontend architecture now focuses on bundle size and hydration cost. RSC, Vue 3.5 transitions, and lazy hydration offer different trade-offs but share a common goal: deliver interactivity exactly where needed, eliminate unnecessary JavaScript. Drawing the right line in 2026 means positioning your components on this matrix. The numbers are clear: cutting hydration cost by 70%+ is achievable—only architectural discipline is required.",{"type":32,"tag":2803,"props":2804,"children":2805},"style",{},[2806],{"type":37,"value":2807},"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":352,"depth":352,"links":2809},[2810,2813,2816,2819,2820,2823,2824],{"id":42,"depth":272,"text":45,"children":2811},[2812],{"id":75,"depth":352,"text":78},{"id":230,"depth":272,"text":233,"children":2814},[2815],{"id":863,"depth":352,"text":866},{"id":982,"depth":272,"text":985,"children":2817},[2818],{"id":1304,"depth":352,"text":1307},{"id":1508,"depth":272,"text":1511},{"id":1816,"depth":272,"text":1819,"children":2821},[2822],{"id":2411,"depth":352,"text":2414},{"id":2501,"depth":272,"text":2504},{"id":2636,"depth":272,"text":2639},"markdown","content:ru:tech:server-components-vs-client-2026.md","content","ru\u002Ftech\u002Fserver-components-vs-client-2026.md","ru\u002Ftech\u002Fserver-components-vs-client-2026","md",1782050758138]