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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Sending props from a Server Component is like mailing a parcel abroad. Letters, photographs and sealed boxes of ordinary goods are fine. You cannot mail a phone call (a function) or a person who only understands your household rules (a class instance with methods). And everything you mail passes customs, where anyone can open it, so you do not put the master key in the box. ## 2. The Core Idea 📌 **Interview term: Ser

The problem

Question presented to candidate: "A server page loads a product and a Client Component needs it. How do you pass it, what can and cannot cross, and what do you do with a function you want to call on click?"

What a strong answer should cover:

Pass data as props; everything that crosses must be serializable by React.
Supported: primitives, plain objects and arrays, Date, Map, Set, BigInt, typed arrays, promises, JSX elements and Server Actions.
Rejected: plain functions, event handlers, class instances and objects with a null prototype.
A promise can be passed without awaiting and unwrapped in the client with use(), so the server can start streaming earlier.
Pass only what the client needs; every prop ends up in the page payload and is visible to the user.

Clarifying questions expected:

"Does the client need the whole record?" — send a slimmed object, not the database row.
"Must the page wait for this data?" — if not, pass the promise and wrap the client in Suspense.

Code / implementation expected: Yes — a server page passing a value, a promise and a Server Action.

nextjs
rsc
props
serialization

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Sending props from a Server Component is like mailing a parcel abroad. Letters, photographs and sealed boxes of ordinary goods are fine. You cannot mail a phone call (a function) or a person who only understands your household rules (a class instance with methods). And everything you mail passes customs, where anyone can

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

Passing a value, a promise and a Server Action

// app/product/[id]/page.tsx  (Server Component)
import { Suspense } from "react";
import { getProduct, getReviews } from "@/lib/data";
import { likeProduct } from "./actions";       // file starts with "use server"
import ProductCard from "./ProductCard";
import Reviews from "./Reviews";

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(id);
  return (
    <>
      <ProductCard
        product={{ id: product.id, name: product.name, price: product.price }}
        onLike={likeProduct}
      />
      <Suspense fallback={<p>Loading reviews...</p>}>
        <Reviews reviewsPromise={getReviews(id)} />
      </Suspense>
    </>
  );
}

// app/product/[id]/Reviews.tsx
"use client";
import { use } from "react";
export default function Reviews({ reviewsPromise }: { reviewsPromise: Promise<{ id: string; text: string }[]> }) {
  const reviews = use(reviewsPromise);
  return <ul>{reviews.map((r) => <li key={r.id}>{r.text}</li>)}</ul>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.