What actually crosses the React Server Component boundary
The article, published on DEV Community, examines the React Server Component (RSC) boundary, detailing exactly what crosses from server to client. It emphasizes that only serializable props (plain objects, arrays, strings, numbers, booleans, null, undefined, and React elements) and the rendered output (HTML-like serialized tree) are transmitted. Functions, classes, and non-serializable objects like Promises or Symbols are not allowed. The article notes that server components never re-render on the client, which reduces JavaScript bundle size because their code is excluded from the client bundle. A key consequence is that developers must be intentional about data flow: any data fetched or computed in a server component that is not passed as a prop to a client component stays on the server. This prevents accidental leakage of sensitive data but also requires careful architecture to avoid sending large or unnecessary data across the boundary. The article uses examples to illustrate that even though server components can import and use heavy dependencies, those dependencies are not sent to the client. The boundary is enforced by React's runtime, and crossing it with non-serializable values throws an error. The article serves as a practical guide for developers adopting the App Router in Next.js or other RSC-compatible frameworks.
Developers must design data flow carefully to avoid sending unnecessary data across the server-client boundary.