hardScenarioDesignSeniorStaff
How do you architect a React Server Components migration without accidentally forcing the entire component tree back to the client?
React Server Components differ from SSR because they keep server-only work out of the client bundle instead of only rendering HTML on the server. The migration works when the use client boundary stays low and data fetching stays on the server.
2 min readUpdated 2026-08-15
Answer
Short answer
Use React Server Components for server-only data access and low client bundles, then add Client Components only around interactive islands. SSR renders initial HTML, but RSC also changes what code and data are shipped to the browser.
Was this answer helpful?
Likely follow-ups
- How would you detect, at build time or in CI, that a component accidentally leaked a server-only secret into the serialized RSC payload?
- How would you structure Suspense boundaries so a slow, unrelated data dependency in one part of the tree cannot delay streaming of the rest of the page?
- A Client Component needs to pass a callback into a deeply nested Server Component subtree. How do you restructure the composition to avoid crossing the boundary illegally?
Related questions
- How do you implement local-first collaborative editing without the unbounded memory growth inherent to CRDTs crashing the client?hardAlso on frontend and architecture2 min
- How do you implement a scalable architecture and tooling to automatically enforce strict WCAG 2.1 AA compliance across dozens of autonomous frontend teams without crippling developer velocity?hardAlso on frontend and architecture3 min
- How do you resolve unacceptable INP degradation caused by massive, synchronous JavaScript execution blocking the main thread?hardAlso on frontend and performance3 min
- How do you resolve severe performance bottlenecks in a complex React Native application caused by heavy bridge traffic, and how do you evaluate a migration to the JavaScript Interface (JSI)?hardAlso on performance and architecture3 min