React Server Components stopped being experimental a while ago and the argument about whether to use them is largely over. Less client JavaScript, data fetched where it lives, a smaller bundle. On a content or commerce site the gains are real and measurable.<\/p>\n\n\n\n
What is not over is the confusion at the boundary. Almost every RSC problem I have watched a team hit reduces to the same root: the boundary is not where they thought it was, or it does not behave the way a component boundary normally does.<\/p>\n\n\n\n
Here are the ones that keep recurring.<\/p>\n\n\n\n
This is the single most common misunderstanding and the source of the most surprising bundle sizes.<\/p>\n\n\n\n
Putting the directive at the top of a file does not make that one file a Client Component. It marks the point where the client boundary begins, and everything that file imports, and everything those files import, is pulled into the client bundle with it.<\/p>\n\n\n\n
A single The practical rule is to push the directive as far down the tree as it will go. If a page is static except for one dropdown, the dropdown is the Client Component, not the page.<\/p>\n\n\n\n People assume that once you cross into client territory you cannot come back. You can, through composition, and this is the escape hatch that fixes most bundle problems.<\/p>\n\n\n\n The Client Component receives already rendered output as a prop. It never imports the server code, so the server code never reaches the browser. This one pattern resolves a large share of the cases where teams conclude that RSC does not fit their app.<\/p>\n\n\n\n Anything passed from a Server Component to a Client Component has to survive serialization. Functions do not. Class instances do not. Dates and Maps and Sets have historically been inconsistent depending on version, so verify rather than assume.<\/p>\n\n\n\n The failure mode that costs the most time is not the error. It is passing a large object because it was convenient, and shipping fields the client never uses into the payload. Every extra field is bytes on the wire for every request.<\/p>\n\n\n\n There is a security dimension here too. Fields you would never render are still in the payload and readable in devtools. Treat the boundary as an API response, because that is what it is.<\/p>\n\n\n\n React context is a client concept. A Server Component cannot consume it, which breaks the usual pattern of a theme, locale, or auth provider wrapping the whole tree.<\/p>\n\n\n\n The workaround people reach for is marking the provider as a Client Component, which is correct, but then everything that consumes it must also be client, and you are back to problem one.<\/p>\n\n\n\n The better shape is to stop treating context as the transport for server known values. Locale and user come from the request on the server and get passed as props. Context stays for genuinely client side state: an open menu, a form draft, a theme toggle the user flipped.<\/p>\n\n\n\n Fetching inside components is pleasant right up to the moment a nested component’s fetch depends on its parent’s result. Then requests serialise, and because each one is fast on its own nobody notices until the page is slow in aggregate.<\/p>\n\n\n\n Start independent requests in parallel at the level where you know all of them, and let Suspense handle arrival order.<\/p>\n\n\n\n Where a dependency is genuine, isolate that subtree behind its own Suspense boundary so it does not hold up everything else.<\/p>\n\n\n\n This is the one that goes unmentioned in almost every RSC article, and it is the reason I keep writing about both topics together.<\/p>\n\n\n\n Content streaming in is a visual event. A skeleton is replaced by real content and a sighted user perceives progress. A screen reader user perceives nothing, because nothing announced that anything changed. From their side the page loaded, said very little, and then stopped.<\/p>\n\n\n\n The fix is small and almost nobody ships it: a polite status region that announces when a streamed section has arrived, and a fallback that is itself descriptive rather than a bare spinner.<\/p>\n\n\n\n Also watch focus. If a user tabs into a region while it is still a skeleton, the elements they were on get replaced, and focus lands wherever the browser decides. On a long streamed page that is disorienting enough to lose people.<\/p>\n\n\n\n Any library using hooks, browser APIs, or context needs a client boundary. Most ecosystem packages now ship the directive themselves, but older ones do not, and the error you get points at your file rather than at theirs.<\/p>\n\n\n\n The usual pattern is a thin client wrapper per offending library, kept in one directory so the boundary is visible in the file tree rather than scattered through feature folders.<\/p>\n\n\n\n Server by default, client at the leaves. Pass rendered children rather than importing across the boundary. Send the minimum a component needs, not the object you happen to have. Parallelise fetches unless a dependency is real. And announce your streamed content, because the model that makes pages feel fast also makes them silent.<\/p>\n\n\n\n\"use client\"<\/code> on a layout near the root of the tree quietly converts most of your application back into a normal client rendered React app, and the thing that makes this hard to notice is that everything still works. You only find it by looking at the bundle.<\/p>\n\n\n\n2. Server Components can be children of Client Components<\/h2>\n\n\n\n
\/\/ Bad: the Client Component imports the server one, dragging it client side\n\"use client\";\nimport HeavyServerThing from \".\/heavy-server-thing\";\n\n\/\/ Good: pass it in as children from a Server Component parent\n\/\/ app\/page.tsx (server)\n<InteractiveShell>\n <HeavyServerThing \/>\n<\/InteractiveShell><\/code><\/pre>\n\n\n\n3. Props crossing the boundary must be serializable<\/h2>\n\n\n\n
\/\/ avoid: whole record crosses, including cost, supplier, internal notes\n<PriceWidget product={product} \/>\n\n\/\/ better: only what the client actually renders\n<PriceWidget price={product.price} currency={product.currency} \/><\/code><\/pre>\n\n\n\n4. Context does not cross<\/h2>\n\n\n\n
5. Waterfalls are easier to create than before<\/h2>\n\n\n\n
\/\/ sequential: three round trips end to end\nconst user = await getUser(id);\nconst orders = await getOrders(id);\nconst recs = await getRecommendations(id);\n\n\/\/ parallel: one round trip's worth of latency\nconst [user, orders, recs] = await Promise.all([\n getUser(id),\n getOrders(id),\n getRecommendations(id),\n]);<\/code><\/pre>\n\n\n\n6. Streaming has an accessibility cost by default<\/h2>\n\n\n\n
<Suspense fallback={<p role=\"status\">Loading recommendations<\/p>}>\n <Recommendations \/>\n<\/Suspense><\/code><\/pre>\n\n\n\n7. Third party libraries are still the roughest edge<\/h2>\n\n\n\n
The summary I give teams<\/h2>\n\n\n\n
\n\n\n\n