What can cross the Server-to-Client Component boundary?

Defines the serializable prop boundary, component composition pattern, and protections against leaking server-only data.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Props passed from a Server Component to a Client Component must use values React can serialize across the server payload. I pass small view models and identifiers, not database clients, arbitrary class instances, request objects, or server-only functions. A Server Component can still be composed as children inside a Client Component because the server renders that child rather than shipping its implementation into the client bundle.

Full answer below

Practice focus

React Server Components, serialization, server-only modules, composition, DTOs, and sensitive-data boundaries.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
The client boundary is both a bundle boundary and a data-disclosure boundary.
Props passed from a Server Component to a Client Component must use values React can serialize across the server payload. I pass small view models and identifiers, not database clients, arbitrary class instances, request objects, or server-only functions. A Server Component can still be composed as children inside a Client Component because the server renders that child rather than shipping its implementation into the client bundle.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I keep use client at the smallest interactive boundary so data access and most rendering stay on the server. The server maps records to an explicit DTO containing only fields the browser needs, which avoids accidental secrets and reduces payload size. Server-only modules are marked accordingly so an import into client code fails early. Event behavior lives in the client component, while supported Server Actions may cross as action references rather than ordinary closures.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Passing an ORM entity or service object directly to a Client Component.
Marking a broad layout use client just to support one button.
Assuming data is private because the component does not display it.

What can cross the Server-to-Client Component boundary?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Next interviewer turn

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?