How can a server component pass data to a client component?

Next.jsMiddle~1 min read

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

// 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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.