Serializable Props Across the Boundary

## Why there is a wire format at all A Server Component runs once, on the server, and never ships its code to the browser. Its output is not HTML — it is a serialized description of the UI, the RSC payload (React's "Flight" format), which the browser downloads and React turns back into elements. In that description a Client Component is not executed; it appears as a placeholder that names the client chunk to load plus **the list of props to hand it**. That is the whole rule in one sentence: props crossing from server to client are written into a stream in one process and read back in another. They are data on a wire, not references in a shared heap. Everything else about serializable props follows from it. ## What may cross React documents the serializable set explicitly: - Primitives: `string`, `number`, `bigint`, `boolean`, `undefined`, `null`, and symbols **registered globally** with `Symbol.for('x')`. - Plain objects — those created from an object initializer or spread — whose properties are themselves serializable. - Iterables of serializable values: arrays, `Map`, `Set`, `TypedArray`, `ArrayBuffer`. - `Date`. - `FormData`. - JSX elements (server or client component elements) — this is what makes passing rendered `children` into a client component work. - Promises. - Functions that are Server Functions (exported from a `'use server'` module, or defined with an inline `'use server'` directive). ```jsx // Server Component export default async function Page() { const rows = await db.query('select id, name, created_at from users'); return ( <UserTable rows={rows.map((r) => ({ id: r.id, name: r.name, createdAt: new Date(r.created_at) }))} tags={new Set(['active', 'beta'])} /> ); } ``` ## What throws - **Ordinary functions**, including arrow functions defined inline in the server component's JSX. A function is code plus a closure over server-side scope; neither can be written to a stream. - **Class instances**, and more generally any object whose prototype is not `Object.prototype` or one of the supported built-ins — an ORM model, a `Response`, a `WeakMap`, your own `class Money`. Objects with a `null` prototype are rejected too. - **Symbols not in the global registry**, e.g. `Symbol('rowId')`, because there is no way to recreate the same symbol on the other side. The error surfaces during the server render, and React names the offending prop path in the message — text along the lines of *only plain objects can be passed to Client Components*, or for a function, that functions cannot be passed unless marked `'use server'`. ## Richer than JSON, poorer than a JS heap Candidates often assume the boundary is `JSON.stringify`. It is not, and both directions of that difference matter. Richer: `undefined` survives as `undefined` rather than being dropped; `bigint` survives; a `Date` arrives as a live `Date` you can call `.getTime()` on; a `Map` arrives as a `Map`. You do not need to hand-encode those types. Poorer: nothing that carries *behaviour* survives. There is no way to send a method, a getter's identity, a live subscription, or an object that is meaningful only because of its class. That is not a limitation React could lift — the client process has no such object to reconstruct. ## Direction matters The rule applies to props flowing **server → client**. Two related cases obey the same serialization set: the arguments a client component passes when it calls a Server Function, and that function's return value, both travel over the network with the same constraints. Props between two client components are ordinary JavaScript — functions, class instances and anything else are fine there, because no boundary is crossed. ## The practical consequence Design the boundary as *data in, behaviour local*. If a client component needs to do something, the function that does it lives in the client module (or is a Server Function it calls). If a server component has a rich domain object, it maps it to a plain shape before passing it. Thinking of the props as an API response, rather than as arguments to a function call, gets almost every case right on the first try.