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