How to Pass Data from Server to Client Component in Next.js

In Next.js, you pass data from a server component to a client component by fetching data in the server component and then sending it as props to the client component. The client component receives the data as props and can use it normally in its UI.

Syntax

Use a server component to fetch data asynchronously, then pass that data as props to a client component. The client component must have the "use client" directive at the top to enable client-side features.

Example parts:

• async function ServerComponent(): fetches data on the server.
• <ClientComponent data={data} />: passes data as props.
• "use client": marks the client component.

jsx

/* ServerComponent.jsx */
import ClientComponent from './ClientComponent';

async function fetchData() {
  // simulate fetching data
  return { message: 'Hello from server!' };
}

export default async function ServerComponent() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

/* ClientComponent.jsx */
"use client";

export default function ClientComponent({ data }) {
  return <div>{data.message}</div>;
}

Example

This example shows a server component fetching a message and passing it to a client component that displays it.

jsx

/* app/page.jsx (Server Component) */
import ClientComponent from './ClientComponent';

async function fetchData() {
  return { message: 'Hello from server!' };
}

export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

/* app/ClientComponent.jsx (Client Component) */
"use client";

export default function ClientComponent({ data }) {
  return <h1>{data.message}</h1>;
}

Output

<h1>Hello from server!</h1>

Common Pitfalls

1. Forgetting "use client" in the client component: Without this, the component runs as a server component and cannot use client features.

2. Trying to fetch data inside the client component: Client components cannot use async/await for data fetching on the server side; fetch data in the server component instead.

3. Passing non-serializable data: Only pass JSON-serializable data as props from server to client components.

jsx

/* Wrong: Client component fetching data (not allowed) */
"use client";

export default function ClientComponent() {
  // ❌ Cannot use async fetch here for server data
  // const data = await fetchData(); // Error
  return <div>Data here</div>;
}

/* Right: Fetch in server component and pass as props */
// See previous example

Quick Reference

• Server Component: Fetch data asynchronously, then pass it as props.
• Client Component: Add "use client" at the top and receive props.
• Data: Must be JSON-serializable.
• Do not: Fetch server data inside client components.

Key Takeaways

Fetch data in server components and pass it as props to client components.

Always add "use client" directive at the top of client components.

Client components cannot fetch server data asynchronously themselves.

Only pass JSON-serializable data from server to client components.

This pattern keeps server logic separate and client UI interactive.