Suggest an edit

Improve this article

Refine the answer for “How can a server component pass data to a client component?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

A server component passes data to a client component **through props** - just like in ordinary React.
The difference is that the data **is prepared on the server**, and the client component receives an already-ready result.

A simple example

### Server component

```tsx
// Server Component
import Counter from './Counter'

export default async function Page() {
  const user = await getUser()

return <Counter initialCount={user.likes} />
}
```

### Client component

```tsx
// Client Component
'use client'

import { useState } from 'react'

export default function Counter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount)

return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}
```

- the data is fetched **on the server**
- the click logic is **on the client**

---

## What data can be passed

You can pass **only serializable data**, i.e. data that can be safely sent to the browser:

- strings
- numbers
- boolean
- arrays
- plain objects (`{}`)
- `null`, `undefined`

---

## What cannot be passed

- functions
- classes
- instances (`Date`, `Map`, `Set`)
- DB methods
- complex objects with logic

```ts
// this is not allowed
<ClientComp onClick={handleClick} />
```

Why:
the server and the browser are different environments, and data between them **is serialized**.

---

## Passing JSX and children

You can pass:

- `children`
- already-rendered elements

```tsx
// Server Component
<ClientWrapper>
  <h1>Title</h1>
</ClientWrapper>
```

This is often used for layouts and wrappers.

---

## Passing data + actions

If you need to:

- pass data to the client
- but run an action on the server

you use **server actions**:

```tsx
<form action={saveData}>
  <button>Save</button>
</form>
```

The client initiates the action, but the logic stays on the server.

---

## Why it works this way

- server code never reaches the browser
- the client gets only what it needs
- a clear boundary of responsibility

---

## In short

**A server component passes data to a client component through props, and the data must be serializable and safe to send to the browser.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts345 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.