[{"data":1,"prerenderedAt":2831},["ShallowReactive",2],{"article-alternates":3,"article-\u002Fen\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-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":7,"_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 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,1296,1301,1307,1320,1500,1505,1511,1516,1521,1808,1813,1819,1824,2403,2408,2414,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 shifted from \"what should we use\" to \"where should we run it—server or client?\" React Server Components (RSC) have been in production for 18 months, Vue 3.5's transition API is stable, and Svelte 5 rewrote its reactivity model with runes. The common thread: reduce hydration cost, deliver interactivity exactly where needed. This article shows you which numbers to watch 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 on hydration (Chrome User Experience Report, Q4 2024). By 2026, sites using React 19 + RSC dropped this to 80ms, and Vue 3.5 + partial hydration projects saw 120ms.",{"type":32,"tag":33,"props":52,"children":53},{},[54],{"type":37,"value":55},"The numerical gap matters: 400ms hydration alone can push your Interaction to Next Paint (INP) metric into \"needs improvement\" territory. 80ms hydration stays within budget and opens room for other optimizations. On mobile devices especially (Snapdragon 7 Gen 1 mid-range processor), this difference feels real.",{"type":32,"tag":33,"props":57,"children":58},{},[59,61,70],{"type":37,"value":60},"RSC's advantage is straightforward: resolve part of the component tree on the server, send HTML, and never include that code in the client bundle. Classic SSR shipped all component code to the browser for hydration. With RSC, product lists, filter sidebars, checkout forms—data-heavy but non-interactive sections—drop out of the bundle. In Roibase's ",{"type":32,"tag":62,"props":63,"children":67},"a",{"href":64,"rel":65},"https:\u002F\u002Fwww.roibase.com.tr\u002Fen\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 running RSC in production: draw client boundaries correctly. In Next.js 15, all components are Server Components by default; you mark interactive sections 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 included 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 included 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 skip hydration. Only AddToCartButton hydrates—becomes interactive in the browser. Measurement: classic SSR hydration for this page was 180ms; RSC drops it to 35ms. The gap widens on list pages with 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 finishes, you can send it in chunks without waiting for the whole 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 loads, a skeleton renders; the rest of the page is already visible. Measurement: Time to Interactive (TTI) drops from 2.4s to 1.1s because critical path dependencies shrink. Tradeoff: Server Components are async; error handling requires ",{"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-the-partial-hydration-alternative",[984],{"type":37,"value":985},"Vue 3.5 Transition API: The Partial Hydration Alternative",{"type":32,"tag":33,"props":987,"children":988},{},[989,991,997,999,1005],{"type":37,"value":990},"Vue doesn't have an RSC equivalent (Nuxt has experimental \"server components,\" but it's not as mature). Instead, Vue 3.5's Transition API and directives like ",{"type":32,"tag":240,"props":992,"children":994},{"className":993},[],[995],{"type":37,"value":996},"v-once",{"type":37,"value":998}," and ",{"type":32,"tag":240,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":37,"value":1004},"v-memo",{"type":37,"value":1006}," enable 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 the first render. Vue skips hydrating it. Benchmark: a 400-product list page saw hydration drop from 520ms to 140ms with ",{"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":979},{"type":32,"tag":33,"props":1297,"children":1298},{},[1299],{"type":37,"value":1300},"Difference: unlike RSC, it doesn't remove code from the bundle—just skips execution. Bundle savings: 15–20%; hydration savings: 70–75%. RSC offers 40% bundle savings and 80% hydration savings.",{"type":32,"tag":73,"props":1302,"children":1304},{"id":1303},"nuxt-3-islands-architecture",[1305],{"type":37,"value":1306},"Nuxt 3 + Islands Architecture",{"type":32,"tag":33,"props":1308,"children":1309},{},[1310,1312,1318],{"type":37,"value":1311},"Nuxt 3's ",{"type":32,"tag":240,"props":1313,"children":1315},{"className":1314},[],[1316],{"type":37,"value":1317},"\u003CNuxtIsland>",{"type":37,"value":1319}," component delivers RSC-like behavior (experimental in Nuxt 3.9+, stable now). You can define isolated components that render on the server and don't hydrate on the client:",{"type":32,"tag":249,"props":1321,"children":1323},{"className":1009,"code":1322,"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",[1324],{"type":32,"tag":240,"props":1325,"children":1326},{"__ignoreMap":16},[1327,1335,1350,1365,1409,1425,1455,1470,1485],{"type":32,"tag":259,"props":1328,"children":1329},{"class":261,"line":262},[1330],{"type":32,"tag":259,"props":1331,"children":1332},{"style":266},[1333],{"type":37,"value":1334},"\u003C!-- pages\u002Fproduct\u002F[id].vue -->\n",{"type":32,"tag":259,"props":1336,"children":1337},{"class":261,"line":272},[1338,1342,1346],{"type":32,"tag":259,"props":1339,"children":1340},{"style":293},[1341],{"type":37,"value":886},{"type":32,"tag":259,"props":1343,"children":1344},{"style":450},[1345],{"type":37,"value":1027},{"type":32,"tag":259,"props":1347,"children":1348},{"style":293},[1349],{"type":37,"value":458},{"type":32,"tag":259,"props":1351,"children":1352},{"class":261,"line":352},[1353,1357,1361],{"type":32,"tag":259,"props":1354,"children":1355},{"style":293},[1356],{"type":37,"value":923},{"type":32,"tag":259,"props":1358,"children":1359},{"style":450},[1360],{"type":37,"value":453},{"type":32,"tag":259,"props":1362,"children":1363},{"style":293},[1364],{"type":37,"value":458},{"type":32,"tag":259,"props":1366,"children":1367},{"class":261,"line":361},[1368,1372,1377,1382,1386,1391,1396,1400,1405],{"type":32,"tag":259,"props":1369,"children":1370},{"style":293},[1371],{"type":37,"value":447},{"type":32,"tag":259,"props":1373,"children":1374},{"style":450},[1375],{"type":37,"value":1376},"NuxtIsland",{"type":32,"tag":259,"props":1378,"children":1379},{"style":287},[1380],{"type":37,"value":1381}," name",{"type":32,"tag":259,"props":1383,"children":1384},{"style":293},[1385],{"type":37,"value":482},{"type":32,"tag":259,"props":1387,"children":1388},{"style":626},[1389],{"type":37,"value":1390},"\"ProductHero\"",{"type":32,"tag":259,"props":1392,"children":1393},{"style":287},[1394],{"type":37,"value":1395}," :props",{"type":32,"tag":259,"props":1397,"children":1398},{"style":293},[1399],{"type":37,"value":482},{"type":32,"tag":259,"props":1401,"children":1402},{"style":626},[1403],{"type":37,"value":1404},"\"{ product }\"",{"type":32,"tag":259,"props":1406,"children":1407},{"style":293},[1408],{"type":37,"value":1105},{"type":32,"tag":259,"props":1410,"children":1411},{"class":261,"line":400},[1412,1416,1421],{"type":32,"tag":259,"props":1413,"children":1414},{"style":293},[1415],{"type":37,"value":447},{"type":32,"tag":259,"props":1417,"children":1418},{"style":450},[1419],{"type":37,"value":1420},"ClientOnly",{"type":32,"tag":259,"props":1422,"children":1423},{"style":293},[1424],{"type":37,"value":458},{"type":32,"tag":259,"props":1426,"children":1427},{"class":261,"line":409},[1428,1432,1437,1442,1446,1451],{"type":32,"tag":259,"props":1429,"children":1430},{"style":293},[1431],{"type":37,"value":467},{"type":32,"tag":259,"props":1433,"children":1434},{"style":450},[1435],{"type":37,"value":1436},"ProductConfigurator",{"type":32,"tag":259,"props":1438,"children":1439},{"style":287},[1440],{"type":37,"value":1441}," :product",{"type":32,"tag":259,"props":1443,"children":1444},{"style":293},[1445],{"type":37,"value":482},{"type":32,"tag":259,"props":1447,"children":1448},{"style":626},[1449],{"type":37,"value":1450},"\"product\"",{"type":32,"tag":259,"props":1452,"children":1453},{"style":293},[1454],{"type":37,"value":1105},{"type":32,"tag":259,"props":1456,"children":1457},{"class":261,"line":418},[1458,1462,1466],{"type":32,"tag":259,"props":1459,"children":1460},{"style":293},[1461],{"type":37,"value":577},{"type":32,"tag":259,"props":1463,"children":1464},{"style":450},[1465],{"type":37,"value":1420},{"type":32,"tag":259,"props":1467,"children":1468},{"style":293},[1469],{"type":37,"value":458},{"type":32,"tag":259,"props":1471,"children":1472},{"class":261,"line":26},[1473,1477,1481],{"type":32,"tag":259,"props":1474,"children":1475},{"style":293},[1476],{"type":37,"value":1247},{"type":32,"tag":259,"props":1478,"children":1479},{"style":450},[1480],{"type":37,"value":453},{"type":32,"tag":259,"props":1482,"children":1483},{"style":293},[1484],{"type":37,"value":458},{"type":32,"tag":259,"props":1486,"children":1487},{"class":261,"line":441},[1488,1492,1496],{"type":32,"tag":259,"props":1489,"children":1490},{"style":293},[1491],{"type":37,"value":958},{"type":32,"tag":259,"props":1493,"children":1494},{"style":450},[1495],{"type":37,"value":1027},{"type":32,"tag":259,"props":1497,"children":1498},{"style":293},[1499],{"type":37,"value":458},{"type":32,"tag":33,"props":1501,"children":1502},{},[1503],{"type":37,"value":1504},"ProductHero renders as an island on the server; ProductConfigurator mounts only on the client. Hydration cost: 200ms → 45ms. Caveat: sharing reactive state between islands is hard; use a global store (Pinia) instead.",{"type":32,"tag":40,"props":1506,"children":1508},{"id":1507},"edge-ssr-server-components-at-the-edges",[1509],{"type":37,"value":1510},"Edge SSR: Server Components at the Edges",{"type":32,"tag":33,"props":1512,"children":1513},{},[1514],{"type":37,"value":1515},"Edge runtimes like Cloudflare Workers, Vercel Edge Functions, and Deno Deploy move SSR closer to users geographically. Average Time to First Byte (TTFB) drops from 450ms on classic origin SSR to 80–120ms on edge SSR (Cloudflare Q4 2025 report).",{"type":32,"tag":33,"props":1517,"children":1518},{},[1519],{"type":37,"value":1520},"Using RSC on edge runtimes is especially powerful: server components render while API calls stay at the edge, reducing origin round trips. Example: Next.js 15 + Cloudflare Pages + R2 object storage serves product images from the edge, renders product data at the edge with RSC, and keeps only cart state on the client.",{"type":32,"tag":249,"props":1522,"children":1526},{"className":1523,"code":1524,"language":1525,"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 renders at edge\n    return fetch(request);\n  }\n}\n","typescript",[1527],{"type":32,"tag":240,"props":1528,"children":1529},{"__ignoreMap":16},[1530,1538,1574,1581,1630,1661,1693,1701,1737,1760,1768,1776,1793,1801],{"type":32,"tag":259,"props":1531,"children":1532},{"class":261,"line":262},[1533],{"type":32,"tag":259,"props":1534,"children":1535},{"style":266},[1536],{"type":37,"value":1537},"\u002F\u002F middleware.ts — Edge Runtime\n",{"type":32,"tag":259,"props":1539,"children":1540},{"class":261,"line":272},[1541,1545,1550,1555,1559,1564,1569],{"type":32,"tag":259,"props":1542,"children":1543},{"style":276},[1544],{"type":37,"value":678},{"type":32,"tag":259,"props":1546,"children":1547},{"style":276},[1548],{"type":37,"value":1549}," const",{"type":32,"tag":259,"props":1551,"children":1552},{"style":341},[1553],{"type":37,"value":1554}," config",{"type":32,"tag":259,"props":1556,"children":1557},{"style":276},[1558],{"type":37,"value":377},{"type":32,"tag":259,"props":1560,"children":1561},{"style":293},[1562],{"type":37,"value":1563}," { runtime: ",{"type":32,"tag":259,"props":1565,"children":1566},{"style":626},[1567],{"type":37,"value":1568},"'edge'",{"type":32,"tag":259,"props":1570,"children":1571},{"style":293},[1572],{"type":37,"value":1573}," };\n",{"type":32,"tag":259,"props":1575,"children":1576},{"class":261,"line":352},[1577],{"type":32,"tag":259,"props":1578,"children":1579},{"emptyLinePlaceholder":422},[1580],{"type":37,"value":425},{"type":32,"tag":259,"props":1582,"children":1583},{"class":261,"line":361},[1584,1588,1593,1598,1602,1607,1611,1616,1620,1625],{"type":32,"tag":259,"props":1585,"children":1586},{"style":276},[1587],{"type":37,"value":678},{"type":32,"tag":259,"props":1589,"children":1590},{"style":276},[1591],{"type":37,"value":1592}," default",{"type":32,"tag":259,"props":1594,"children":1595},{"style":276},[1596],{"type":37,"value":1597}," async",{"type":32,"tag":259,"props":1599,"children":1600},{"style":276},[1601],{"type":37,"value":284},{"type":32,"tag":259,"props":1603,"children":1604},{"style":287},[1605],{"type":37,"value":1606}," middleware",{"type":32,"tag":259,"props":1608,"children":1609},{"style":293},[1610],{"type":37,"value":772},{"type":32,"tag":259,"props":1612,"children":1613},{"style":299},[1614],{"type":37,"value":1615},"request",{"type":32,"tag":259,"props":1617,"children":1618},{"style":276},[1619],{"type":37,"value":312},{"type":32,"tag":259,"props":1621,"children":1622},{"style":287},[1623],{"type":37,"value":1624}," Request",{"type":32,"tag":259,"props":1626,"children":1627},{"style":293},[1628],{"type":37,"value":1629},") {\n",{"type":32,"tag":259,"props":1631,"children":1632},{"class":261,"line":400},[1633,1637,1642,1646,1651,1656],{"type":32,"tag":259,"props":1634,"children":1635},{"style":276},[1636],{"type":37,"value":367},{"type":32,"tag":259,"props":1638,"children":1639},{"style":341},[1640],{"type":37,"value":1641}," url",{"type":32,"tag":259,"props":1643,"children":1644},{"style":276},[1645],{"type":37,"value":377},{"type":32,"tag":259,"props":1647,"children":1648},{"style":276},[1649],{"type":37,"value":1650}," new",{"type":32,"tag":259,"props":1652,"children":1653},{"style":287},[1654],{"type":37,"value":1655}," URL",{"type":32,"tag":259,"props":1657,"children":1658},{"style":293},[1659],{"type":37,"value":1660},"(request.url);\n",{"type":32,"tag":259,"props":1662,"children":1663},{"class":261,"line":409},[1664,1669,1674,1679,1683,1688],{"type":32,"tag":259,"props":1665,"children":1666},{"style":276},[1667],{"type":37,"value":1668},"  if",{"type":32,"tag":259,"props":1670,"children":1671},{"style":293},[1672],{"type":37,"value":1673}," (url.pathname.",{"type":32,"tag":259,"props":1675,"children":1676},{"style":287},[1677],{"type":37,"value":1678},"startsWith",{"type":32,"tag":259,"props":1680,"children":1681},{"style":293},[1682],{"type":37,"value":772},{"type":32,"tag":259,"props":1684,"children":1685},{"style":626},[1686],{"type":37,"value":1687},"'\u002Fproduct\u002F'",{"type":32,"tag":259,"props":1689,"children":1690},{"style":293},[1691],{"type":37,"value":1692},")) {\n",{"type":32,"tag":259,"props":1694,"children":1695},{"class":261,"line":418},[1696],{"type":32,"tag":259,"props":1697,"children":1698},{"style":266},[1699],{"type":37,"value":1700},"    \u002F\u002F Cache lookup at edge\n",{"type":32,"tag":259,"props":1702,"children":1703},{"class":261,"line":26},[1704,1709,1714,1718,1722,1727,1732],{"type":32,"tag":259,"props":1705,"children":1706},{"style":276},[1707],{"type":37,"value":1708},"    const",{"type":32,"tag":259,"props":1710,"children":1711},{"style":341},[1712],{"type":37,"value":1713}," cached",{"type":32,"tag":259,"props":1715,"children":1716},{"style":276},[1717],{"type":37,"value":377},{"type":32,"tag":259,"props":1719,"children":1720},{"style":276},[1721],{"type":37,"value":382},{"type":32,"tag":259,"props":1723,"children":1724},{"style":293},[1725],{"type":37,"value":1726}," caches.default.",{"type":32,"tag":259,"props":1728,"children":1729},{"style":287},[1730],{"type":37,"value":1731},"match",{"type":32,"tag":259,"props":1733,"children":1734},{"style":293},[1735],{"type":37,"value":1736},"(request);\n",{"type":32,"tag":259,"props":1738,"children":1739},{"class":261,"line":441},[1740,1745,1750,1755],{"type":32,"tag":259,"props":1741,"children":1742},{"style":276},[1743],{"type":37,"value":1744},"    if",{"type":32,"tag":259,"props":1746,"children":1747},{"style":293},[1748],{"type":37,"value":1749}," (cached) ",{"type":32,"tag":259,"props":1751,"children":1752},{"style":276},[1753],{"type":37,"value":1754},"return",{"type":32,"tag":259,"props":1756,"children":1757},{"style":293},[1758],{"type":37,"value":1759}," cached;\n",{"type":32,"tag":259,"props":1761,"children":1762},{"class":261,"line":461},[1763],{"type":32,"tag":259,"props":1764,"children":1765},{"style":293},[1766],{"type":37,"value":1767},"    \n",{"type":32,"tag":259,"props":1769,"children":1770},{"class":261,"line":500},[1771],{"type":32,"tag":259,"props":1772,"children":1773},{"style":266},[1774],{"type":37,"value":1775},"    \u002F\u002F Server Component renders at edge\n",{"type":32,"tag":259,"props":1777,"children":1778},{"class":261,"line":535},[1779,1784,1789],{"type":32,"tag":259,"props":1780,"children":1781},{"style":276},[1782],{"type":37,"value":1783},"    return",{"type":32,"tag":259,"props":1785,"children":1786},{"style":287},[1787],{"type":37,"value":1788}," fetch",{"type":32,"tag":259,"props":1790,"children":1791},{"style":293},[1792],{"type":37,"value":1736},{"type":32,"tag":259,"props":1794,"children":1795},{"class":261,"line":571},[1796],{"type":32,"tag":259,"props":1797,"children":1798},{"style":293},[1799],{"type":37,"value":1800},"  }\n",{"type":32,"tag":259,"props":1802,"children":1803},{"class":261,"line":588},[1804],{"type":32,"tag":259,"props":1805,"children":1806},{"style":293},[1807],{"type":37,"value":497},{"type":32,"tag":33,"props":1809,"children":1810},{},[1811],{"type":37,"value":1812},"Measurement: user in Istanbul hitting a Frankfurt edge PoP sees TTFB of 240ms, hydration of 80ms, INP of 120ms. Classic origin SSR: 580ms, 400ms, 650ms respectively. All three Core Web Vitals metrics shift to \"good.\"",{"type":32,"tag":40,"props":1814,"children":1816},{"id":1815},"deferring-interactivity-idle-until-urgent-pattern",[1817],{"type":37,"value":1818},"Deferring Interactivity: Idle Until Urgent Pattern",{"type":32,"tag":33,"props":1820,"children":1821},{},[1822],{"type":37,"value":1823},"RSC and partial hydration need one more complement: deferring unnecessary interactivity. The \"idle until urgent\" pattern means not hydrating a component until the user interacts or specific conditions trigger.",{"type":32,"tag":249,"props":1825,"children":1827},{"className":251,"code":1826,"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 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",[1828],{"type":32,"tag":240,"props":1829,"children":1830},{"__ignoreMap":16},[1831,1839,1850,1874,1881,1933,1982,1989,2011,2019,2076,2124,2153,2161,2207,2214,2234,2247,2265,2273,2281,2288,2309,2351,2358,2365,2395],{"type":32,"tag":259,"props":1832,"children":1833},{"class":261,"line":262},[1834],{"type":32,"tag":259,"props":1835,"children":1836},{"style":266},[1837],{"type":37,"value":1838},"\u002F\u002F React 19 + Next.js 15\n",{"type":32,"tag":259,"props":1840,"children":1841},{"class":261,"line":272},[1842,1846],{"type":32,"tag":259,"props":1843,"children":1844},{"style":626},[1845],{"type":37,"value":245},{"type":32,"tag":259,"props":1847,"children":1848},{"style":293},[1849],{"type":37,"value":633},{"type":32,"tag":259,"props":1851,"children":1852},{"class":261,"line":352},[1853,1857,1862,1866,1870],{"type":32,"tag":259,"props":1854,"children":1855},{"style":276},[1856],{"type":37,"value":642},{"type":32,"tag":259,"props":1858,"children":1859},{"style":293},[1860],{"type":37,"value":1861}," { useEffect, useState } ",{"type":32,"tag":259,"props":1863,"children":1864},{"style":276},[1865],{"type":37,"value":652},{"type":32,"tag":259,"props":1867,"children":1868},{"style":626},[1869],{"type":37,"value":657},{"type":32,"tag":259,"props":1871,"children":1872},{"style":293},[1873],{"type":37,"value":633},{"type":32,"tag":259,"props":1875,"children":1876},{"class":261,"line":361},[1877],{"type":32,"tag":259,"props":1878,"children":1879},{"emptyLinePlaceholder":422},[1880],{"type":37,"value":425},{"type":32,"tag":259,"props":1882,"children":1883},{"class":261,"line":400},[1884,1888,1892,1897,1901,1905,1909,1913,1917,1921,1925,1929],{"type":32,"tag":259,"props":1885,"children":1886},{"style":276},[1887],{"type":37,"value":678},{"type":32,"tag":259,"props":1889,"children":1890},{"style":276},[1891],{"type":37,"value":284},{"type":32,"tag":259,"props":1893,"children":1894},{"style":287},[1895],{"type":37,"value":1896}," ProductRecommendations",{"type":32,"tag":259,"props":1898,"children":1899},{"style":293},[1900],{"type":37,"value":296},{"type":32,"tag":259,"props":1902,"children":1903},{"style":299},[1904],{"type":37,"value":696},{"type":32,"tag":259,"props":1906,"children":1907},{"style":293},[1908],{"type":37,"value":307},{"type":32,"tag":259,"props":1910,"children":1911},{"style":276},[1912],{"type":37,"value":312},{"type":32,"tag":259,"props":1914,"children":1915},{"style":293},[1916],{"type":37,"value":317},{"type":32,"tag":259,"props":1918,"children":1919},{"style":299},[1920],{"type":37,"value":696},{"type":32,"tag":259,"props":1922,"children":1923},{"style":276},[1924],{"type":37,"value":312},{"type":32,"tag":259,"props":1926,"children":1927},{"style":341},[1928],{"type":37,"value":344},{"type":32,"tag":259,"props":1930,"children":1931},{"style":293},[1932],{"type":37,"value":725},{"type":32,"tag":259,"props":1934,"children":1935},{"class":261,"line":409},[1936,1940,1944,1949,1953,1958,1962,1966,1970,1974,1978],{"type":32,"tag":259,"props":1937,"children":1938},{"style":276},[1939],{"type":37,"value":367},{"type":32,"tag":259,"props":1941,"children":1942},{"style":293},[1943],{"type":37,"value":738},{"type":32,"tag":259,"props":1945,"children":1946},{"style":341},[1947],{"type":37,"value":1948},"hydrated",{"type":32,"tag":259,"props":1950,"children":1951},{"style":293},[1952],{"type":37,"value":748},{"type":32,"tag":259,"props":1954,"children":1955},{"style":341},[1956],{"type":37,"value":1957},"setHydrated",{"type":32,"tag":259,"props":1959,"children":1960},{"style":293},[1961],{"type":37,"value":758},{"type":32,"tag":259,"props":1963,"children":1964},{"style":276},[1965],{"type":37,"value":482},{"type":32,"tag":259,"props":1967,"children":1968},{"style":287},[1969],{"type":37,"value":767},{"type":32,"tag":259,"props":1971,"children":1972},{"style":293},[1973],{"type":37,"value":772},{"type":32,"tag":259,"props":1975,"children":1976},{"style":341},[1977],{"type":37,"value":777},{"type":32,"tag":259,"props":1979,"children":1980},{"style":293},[1981],{"type":37,"value":782},{"type":32,"tag":259,"props":1983,"children":1984},{"class":261,"line":418},[1985],{"type":32,"tag":259,"props":1986,"children":1987},{"emptyLinePlaceholder":422},[1988],{"type":37,"value":425},{"type":32,"tag":259,"props":1990,"children":1991},{"class":261,"line":26},[1992,1997,2002,2006],{"type":32,"tag":259,"props":1993,"children":1994},{"style":287},[1995],{"type":37,"value":1996},"  useEffect",{"type":32,"tag":259,"props":1998,"children":1999},{"style":293},[2000],{"type":37,"value":2001},"(() ",{"type":32,"tag":259,"props":2003,"children":2004},{"style":276},[2005],{"type":37,"value":828},{"type":32,"tag":259,"props":2007,"children":2008},{"style":293},[2009],{"type":37,"value":2010}," {\n",{"type":32,"tag":259,"props":2012,"children":2013},{"class":261,"line":441},[2014],{"type":32,"tag":259,"props":2015,"children":2016},{"style":266},[2017],{"type":37,"value":2018},"    \u002F\u002F Hydrate 2 seconds after load or when scrolled into view\n",{"type":32,"tag":259,"props":2020,"children":2021},{"class":261,"line":461},[2022,2026,2031,2035,2040,2044,2048,2053,2057,2062,2067,2072],{"type":32,"tag":259,"props":2023,"children":2024},{"style":276},[2025],{"type":37,"value":1708},{"type":32,"tag":259,"props":2027,"children":2028},{"style":341},[2029],{"type":37,"value":2030}," timer",{"type":32,"tag":259,"props":2032,"children":2033},{"style":276},[2034],{"type":37,"value":377},{"type":32,"tag":259,"props":2036,"children":2037},{"style":287},[2038],{"type":37,"value":2039}," setTimeout",{"type":32,"tag":259,"props":2041,"children":2042},{"style":293},[2043],{"type":37,"value":2001},{"type":32,"tag":259,"props":2045,"children":2046},{"style":276},[2047],{"type":37,"value":828},{"type":32,"tag":259,"props":2049,"children":2050},{"style":287},[2051],{"type":37,"value":2052}," setHydrated",{"type":32,"tag":259,"props":2054,"children":2055},{"style":293},[2056],{"type":37,"value":772},{"type":32,"tag":259,"props":2058,"children":2059},{"style":341},[2060],{"type":37,"value":2061},"true",{"type":32,"tag":259,"props":2063,"children":2064},{"style":293},[2065],{"type":37,"value":2066},"), ",{"type":32,"tag":259,"props":2068,"children":2069},{"style":341},[2070],{"type":37,"value":2071},"2000",{"type":32,"tag":259,"props":2073,"children":2074},{"style":293},[2075],{"type":37,"value":782},{"type":32,"tag":259,"props":2077,"children":2078},{"class":261,"line":500},[2079,2083,2088,2092,2096,2101,2106,2111,2116,2120],{"type":32,"tag":259,"props":2080,"children":2081},{"style":276},[2082],{"type":37,"value":1708},{"type":32,"tag":259,"props":2084,"children":2085},{"style":341},[2086],{"type":37,"value":2087}," observer",{"type":32,"tag":259,"props":2089,"children":2090},{"style":276},[2091],{"type":37,"value":377},{"type":32,"tag":259,"props":2093,"children":2094},{"style":276},[2095],{"type":37,"value":1650},{"type":32,"tag":259,"props":2097,"children":2098},{"style":287},[2099],{"type":37,"value":2100}," IntersectionObserver",{"type":32,"tag":259,"props":2102,"children":2103},{"style":293},[2104],{"type":37,"value":2105},"(([",{"type":32,"tag":259,"props":2107,"children":2108},{"style":299},[2109],{"type":37,"value":2110},"entry",{"type":32,"tag":259,"props":2112,"children":2113},{"style":293},[2114],{"type":37,"value":2115},"]) ",{"type":32,"tag":259,"props":2117,"children":2118},{"style":276},[2119],{"type":37,"value":828},{"type":32,"tag":259,"props":2121,"children":2122},{"style":293},[2123],{"type":37,"value":2010},{"type":32,"tag":259,"props":2125,"children":2126},{"class":261,"line":535},[2127,2132,2137,2141,2145,2149],{"type":32,"tag":259,"props":2128,"children":2129},{"style":276},[2130],{"type":37,"value":2131},"      if",{"type":32,"tag":259,"props":2133,"children":2134},{"style":293},[2135],{"type":37,"value":2136}," (entry.isIntersecting) ",{"type":32,"tag":259,"props":2138,"children":2139},{"style":287},[2140],{"type":37,"value":1957},{"type":32,"tag":259,"props":2142,"children":2143},{"style":293},[2144],{"type":37,"value":772},{"type":32,"tag":259,"props":2146,"children":2147},{"style":341},[2148],{"type":37,"value":2061},{"type":32,"tag":259,"props":2150,"children":2151},{"style":293},[2152],{"type":37,"value":782},{"type":32,"tag":259,"props":2154,"children":2155},{"class":261,"line":571},[2156],{"type":32,"tag":259,"props":2157,"children":2158},{"style":293},[2159],{"type":37,"value":2160},"    });\n",{"type":32,"tag":259,"props":2162,"children":2163},{"class":261,"line":588},[2164,2169,2174,2179,2184,2188,2193,2198,2203],{"type":32,"tag":259,"props":2165,"children":2166},{"style":293},[2167],{"type":37,"value":2168},"    observer.",{"type":32,"tag":259,"props":2170,"children":2171},{"style":287},[2172],{"type":37,"value":2173},"observe",{"type":32,"tag":259,"props":2175,"children":2176},{"style":293},[2177],{"type":37,"value":2178},"(document.",{"type":32,"tag":259,"props":2180,"children":2181},{"style":287},[2182],{"type":37,"value":2183},"getElementById",{"type":32,"tag":259,"props":2185,"children":2186},{"style":293},[2187],{"type":37,"value":772},{"type":32,"tag":259,"props":2189,"children":2190},{"style":626},[2191],{"type":37,"value":2192},"'recommendations'",{"type":32,"tag":259,"props":2194,"children":2195},{"style":293},[2196],{"type":37,"value":2197},")",{"type":32,"tag":259,"props":2199,"children":2200},{"style":276},[2201],{"type":37,"value":2202},"!",{"type":32,"tag":259,"props":2204,"children":2205},{"style":293},[2206],{"type":37,"value":782},{"type":32,"tag":259,"props":2208,"children":2209},{"class":261,"line":597},[2210],{"type":32,"tag":259,"props":2211,"children":2212},{"style":293},[2213],{"type":37,"value":1767},{"type":32,"tag":259,"props":2215,"children":2216},{"class":261,"line":605},[2217,2221,2226,2230],{"type":32,"tag":259,"props":2218,"children":2219},{"style":276},[2220],{"type":37,"value":1783},{"type":32,"tag":259,"props":2222,"children":2223},{"style":293},[2224],{"type":37,"value":2225}," () ",{"type":32,"tag":259,"props":2227,"children":2228},{"style":276},[2229],{"type":37,"value":828},{"type":32,"tag":259,"props":2231,"children":2232},{"style":293},[2233],{"type":37,"value":2010},{"type":32,"tag":259,"props":2235,"children":2236},{"class":261,"line":613},[2237,2242],{"type":32,"tag":259,"props":2238,"children":2239},{"style":287},[2240],{"type":37,"value":2241},"      clearTimeout",{"type":32,"tag":259,"props":2243,"children":2244},{"style":293},[2245],{"type":37,"value":2246},"(timer);\n",{"type":32,"tag":259,"props":2248,"children":2249},{"class":261,"line":622},[2250,2255,2260],{"type":32,"tag":259,"props":2251,"children":2252},{"style":293},[2253],{"type":37,"value":2254},"      observer.",{"type":32,"tag":259,"props":2256,"children":2257},{"style":287},[2258],{"type":37,"value":2259},"disconnect",{"type":32,"tag":259,"props":2261,"children":2262},{"style":293},[2263],{"type":37,"value":2264},"();\n",{"type":32,"tag":259,"props":2266,"children":2267},{"class":261,"line":636},[2268],{"type":32,"tag":259,"props":2269,"children":2270},{"style":293},[2271],{"type":37,"value":2272},"    };\n",{"type":32,"tag":259,"props":2274,"children":2275},{"class":261,"line":664},[2276],{"type":32,"tag":259,"props":2277,"children":2278},{"style":293},[2279],{"type":37,"value":2280},"  }, []);\n",{"type":32,"tag":259,"props":2282,"children":2283},{"class":261,"line":672},[2284],{"type":32,"tag":259,"props":2285,"children":2286},{"emptyLinePlaceholder":422},[2287],{"type":37,"value":425},{"type":32,"tag":259,"props":2289,"children":2290},{"class":261,"line":728},[2291,2295,2300,2304],{"type":32,"tag":259,"props":2292,"children":2293},{"style":276},[2294],{"type":37,"value":1668},{"type":32,"tag":259,"props":2296,"children":2297},{"style":293},[2298],{"type":37,"value":2299}," (",{"type":32,"tag":259,"props":2301,"children":2302},{"style":276},[2303],{"type":37,"value":2202},{"type":32,"tag":259,"props":2305,"children":2306},{"style":293},[2307],{"type":37,"value":2308},"hydrated) {\n",{"type":32,"tag":259,"props":2310,"children":2311},{"class":261,"line":785},[2312,2316,2320,2324,2329,2333,2338,2343,2347],{"type":32,"tag":259,"props":2313,"children":2314},{"style":276},[2315],{"type":37,"value":1783},{"type":32,"tag":259,"props":2317,"children":2318},{"style":293},[2319],{"type":37,"value":804},{"type":32,"tag":259,"props":2321,"children":2322},{"style":450},[2323],{"type":37,"value":453},{"type":32,"tag":259,"props":2325,"children":2326},{"style":287},[2327],{"type":37,"value":2328}," id",{"type":32,"tag":259,"props":2330,"children":2331},{"style":276},[2332],{"type":37,"value":482},{"type":32,"tag":259,"props":2334,"children":2335},{"style":626},[2336],{"type":37,"value":2337},"\"recommendations\"",{"type":32,"tag":259,"props":2339,"children":2340},{"style":293},[2341],{"type":37,"value":2342},">Loading...\u003C\u002F",{"type":32,"tag":259,"props":2344,"children":2345},{"style":450},[2346],{"type":37,"value":453},{"type":32,"tag":259,"props":2348,"children":2349},{"style":293},[2350],{"type":37,"value":847},{"type":32,"tag":259,"props":2352,"children":2353},{"class":261,"line":794},[2354],{"type":32,"tag":259,"props":2355,"children":2356},{"style":293},[2357],{"type":37,"value":1800},{"type":32,"tag":259,"props":2359,"children":2360},{"class":261,"line":850},[2361],{"type":32,"tag":259,"props":2362,"children":2363},{"emptyLinePlaceholder":422},[2364],{"type":37,"value":425},{"type":32,"tag":259,"props":2366,"children":2368},{"class":261,"line":2367},26,[2369,2373,2377,2382,2386,2390],{"type":32,"tag":259,"props":2370,"children":2371},{"style":276},[2372],{"type":37,"value":433},{"type":32,"tag":259,"props":2374,"children":2375},{"style":293},[2376],{"type":37,"value":804},{"type":32,"tag":259,"props":2378,"children":2379},{"style":341},[2380],{"type":37,"value":2381},"RecommendationCarousel",{"type":32,"tag":259,"props":2383,"children":2384},{"style":287},[2385],{"type":37,"value":550},{"type":32,"tag":259,"props":2387,"children":2388},{"style":276},[2389],{"type":37,"value":482},{"type":32,"tag":259,"props":2391,"children":2392},{"style":293},[2393],{"type":37,"value":2394},"{productId} \u002F>;\n",{"type":32,"tag":259,"props":2396,"children":2398},{"class":261,"line":2397},27,[2399],{"type":32,"tag":259,"props":2400,"children":2401},{"style":293},[2402],{"type":37,"value":497},{"type":32,"tag":33,"props":2404,"children":2405},{},[2406],{"type":37,"value":2407},"This keeps the carousel library (30kB gzip) out of the initial bundle. It lazy-loads when the user scrolls near it. INP impact: if the user doesn't touch the carousel in the first 5 seconds, that 30kB hydration cost never affects TTI.",{"type":32,"tag":73,"props":2409,"children":2411},{"id":2410},"lazy-hydration-library-support",[2412],{"type":37,"value":2413},"Lazy Hydration: Library Support",{"type":32,"tag":33,"props":2415,"children":2416},{},[2417,2419,2425,2427,2433,2435,2441],{"type":37,"value":2418},"React has ",{"type":32,"tag":240,"props":2420,"children":2422},{"className":2421},[],[2423],{"type":37,"value":2424},"@builder.io\u002Freact-hydration-on-demand",{"type":37,"value":2426},"; Vue has ",{"type":32,"tag":240,"props":2428,"children":2430},{"className":2429},[],[2431],{"type":37,"value":2432},"vue-lazy-hydration",{"type":37,"value":2434},". Nuxt includes a built-in ",{"type":32,"tag":240,"props":2436,"children":2438},{"className":2437},[],[2439],{"type":37,"value":2440},"\u003CLazyHydrate>",{"type":37,"value":2442}," component:",{"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 to hydrate eagerly, 180ms with lazy hydration (only viewport components). If the user never scrolls, remaining components never hydrate.",{"type":32,"tag":40,"props":2500,"children":2502},{"id":2501},"decision-tree-where-does-each-component-live",[2503],{"type":37,"value":2504},"Decision Tree: Where Does Each Component Live?",{"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 stay non-interactive?",{"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 have form inputs or 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},"Is it 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 products\" widget: ",{"type":32,"tag":2519,"props":2612,"children":2613},{},[2614],{"type":37,"value":2615},"Lazy hydration",{"type":37,"value":2617}," (below viewport threshold)",{"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 drops the checkout page's hydration cost from 420ms to 95ms and bundle size 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 project: mid-sized e-commerce (50,000 SKUs, 200 pages). Stack: Next.js 14 (classic 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},"INP dropping below 200ms is critical—Google's Core Web Vitals \"good\" threshold. This change drove organic traffic up 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 focuses on bundle size and hydration cost. RSC, Vue 3.5 transitions, and lazy hydration offer different tradeoffs but share a goal: deliver interactivity exactly when needed, eliminate unnecessary JavaScript. Drawing the line in 2026 means positioning components on this matrix. The numbers speak clearly: cutting hydration cost by 70%+ is possible—it just takes architectural discipline.",{"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":1303,"depth":352,"text":1306},{"id":1507,"depth":272,"text":1510},{"id":1815,"depth":272,"text":1818,"children":2821},[2822],{"id":2410,"depth":352,"text":2413},{"id":2501,"depth":272,"text":2504},{"id":2636,"depth":272,"text":2639},"markdown","content:en:tech:server-components-vs-client-drawing-the-line-in-2026.md","content","en\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026.md","en\u002Ftech\u002Fserver-components-vs-client-drawing-the-line-in-2026","md",1782079487758]