Sign in
Skip to solution
mediumFrontend

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

350 views
01

Understand the problem

Serializable props across the RSC boundary.

nextjsrscpropsserialization
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

You fetch data in a Server Component and pass it as props to a Client Component. The props must be serializable (no functions, classes, or Dates beyond what React can serialize), since they cross the server-to-client boundary in the RSC payload.

Solution ready — 2 min read

Classified // press E to declassify

04

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>;
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 59 of 95 decoded in the Next.js track. One more won't hurt.

Back to track