mediumFrontend

How do you pass data from Server Components to Client Components in Next.js?

Q: How do you pass data from Server Components to Client Components in Next.js?

**TL;DR.** Fetch data in a **Server Component** and pass it as **props** to a Client Component. The props must be **serializable** (plain objects/arrays/strings/numbers; no functions, class instances, or non-plain values), since they cross the server-to-client boundary in the RSC payload. Server fetch db / fetch() serializable props Client Component <text class='d-sub' x='317' y='90' t

350 views

Understand the problem

Serializable props across the RSC boundary.

nextjsrscpropsserialization

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Fetch on server, pass trimmed props

// server
export default async function Page() {
  const user = await db.user.find();
  // pass only what the client needs (serializable, no secrets)
  return <Profile name={user.name} avatar={user.avatarUrl} />;
}

// client
'use client';
function Profile({ name, avatar }: { name: string; avatar: string }) {
  const [following, setFollowing] = useState(false);
  return <button onClick={() => setFollowing(!following)}>{name}</button>;
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?

What are route groups in Next.js and how do you use them?