Як серверний компонент може передавати дані клієнтському?

Next.jsMiddle~1 хв читання

Серверний компонент передає дані клієнтському через props - так само, як у звичайному React. Різниця в тому, що дані готуються на сервері, а клієнтський компонент отримує вже готовий результат.

Простий приклад

Серверний компонент

tsx

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

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

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

Клієнтський компонент

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>
  )
}

дані отримані на сервері
логіка кліків - на клієнті

Які дані можна передавати

Передавати можна тільки серіалізовані дані, тобто ті, які можна безпечно надіслати у браузер:

рядки
числа
boolean
масиви
plain-об'єкти ({})
null, undefined

Що не можна передавати

функції
класи
інстанси (Date, Map, Set)
методи БД
складні об'єкти з логікою

// так не можна
<ClientComp onClick={handleClick} />

Чому: сервер і браузер - різні середовища, дані між ними серіалізуються.

Передача JSX і children

Можна передавати:

children
уже відрендерені елементи

tsx

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

Це часто використовують для layout'ів і оболонок.

Передача даних + дій

Якщо потрібно:

передати дані на клієнт
а дію виконати на сервері

використовують server actions:

tsx

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

Клієнт ініціює дію, але логіка залишається на сервері.

Чому саме так

серверний код не потрапляє у браузер
клієнт отримує тільки те, що йому потрібно
чітка межа відповідальності

Коротко

Серверний компонент передає дані клієнтському через props, при цьому дані мають бути серіалізованими та безпечними для передачі у браузер.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.