Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як серверний компонент може передавати дані клієнтському?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Серверний компонент передає дані клієнтському **через props** - так само, як у звичайному React. Різниця в тому, що дані **готуються на сервері**, а клієнтський компонент отримує вже готовий результат. **Ключове:** дані мають бути серіалізованими та безпечними для передачі в браузер.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняСерверний компонент передає дані клієнтському **через 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`) - методи БД - складні об'єкти з логікою ```ts // так не можна <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, при цьому дані мають бути серіалізованими та безпечними для передачі у браузер.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.