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