Concept questionHard~10 minNext.js App Router Composition & Actions / 6 of 10

Interview question

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
I review the rendered RSC payload and browser bundle as externally visible artifacts: hiding a value from the DOM is not enough if it was serialized to the client. Dates, maps, and other supported values still need a stable product contract; I prefer plain domain-shaped DTOs over relying on framework serialization details at every call site. Large lists are paged or summarized before the boundary. Authorization happens before projection, and cache keys never let one user's serialized result become another user's response.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Secrets or internal fields appear in the RSC payload.
A server-only dependency enters the client bundle.
Authorization happens after sensitive data is projected.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Can a Server Component be a child of a Client Component?
Why use a dedicated DTO?
How do Server Actions differ from ordinary function props?

Continue the section

Next in Next.js App Router Composition & Actions: Action vs Route Handler

Step 7 of 10

When would you use a Server Action instead of a Route Handler?

Practice route

Read core answer Review checklist Follow-up prompts Track progress

Finished this drill?

Practice freely. Sign in only when you want to save completion, confidence, notes, or bookmarks.

New to Aporeon? Create account

Drill details

Human editorial direction

Aporeon is shaped by Aleksandar Tomovski, a software developer with experience on both sides of technical interviews. Content is reviewed for accuracy, natural spoken delivery, useful depth, and honest trade-offs.

About the creator Editorial standards

Was this drill useful?

Help improve the interview library.

Found this answer useful?

Say thanks with a standalone, one-time $5 contribution. No account required.

No subscription or perks.Choose another amount

Opening drill

Concept questionHard~10 minNext.js App Router Composition & Actions / 6 of 10

Interview question

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

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.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
I review the rendered RSC payload and browser bundle as externally visible artifacts: hiding a value from the DOM is not enough if it was serialized to the client. Dates, maps, and other supported values still need a stable product contract; I prefer plain domain-shaped DTOs over relying on framework serialization details at every call site. Large lists are paged or summarized before the boundary. Authorization happens before projection, and cache keys never let one user's serialized result become another user's response.

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.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Secrets or internal fields appear in the RSC payload.
A server-only dependency enters the client bundle.
Authorization happens after sensitive data is projected.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

Can a Server Component be a child of a Client Component?
Why use a dedicated DTO?
How do Server Actions differ from ordinary function props?

Continue the section

Next in Next.js App Router Composition & Actions: Action vs Route Handler

Step 7 of 10

When would you use a Server Action instead of a Route Handler?

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

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue the section

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

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue the section