'use client'

У дереві залежностей модулів цього прикладу програми директива 'use client' у InspirationGenerator.js позначає цей модуль і всі його транзитивні залежності як клієнтські модулі. Піддерево, що починається з InspirationGenerator.js, тепер позначено як клієнтські модулі.

Під час рендерингу фреймворк буде рендерити кореневий компонент на сервері і продовжуватиме рух по дереву рендерингу, відмовляючись від оцінки будь-якого коду, імпортованого з клієнтського коду.

Відрендерена сервером частина дерева рендерингу потім надсилається клієнту. Клієнт, завантаживши свій клієнтський код, завершує рендеринг решти дерева.

Вводимо наступні визначення:

• Клієнтські компоненти - це компоненти у дереві зображування, які зображуються на клієнтській стороні.
• Серверні компоненти - це компоненти у дереві рендерингу, які рендериться на сервері.

У прикладі програми App, FancyText та Copyright є серверними компонентами і вважаються серверними компонентами. Оскільки InspirationGenerator.js та його транзитивні залежності позначено як клієнтський код, компонент InspirationGenerator та його дочірній компонент FancyText є клієнтськими компонентами.

Яким чином FancyText є одночасно і серверним, і клієнтським компонентом?

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

По-перше, давайте уточнимо, що термін "компонент" не дуже точний. Ось лише два способи розуміння терміну "компонент":

1. "Компонент" може посилатися на визначення компонента. У більшості випадків це буде функція.

// This is a definition of a component
function MyComponent() {
  return <p>My Component</p>
}

1. "Компонент" може також посилатися на компонентне використання його визначення.

import MyComponent from './MyComponent';

function App() {
  // This is a usage of a component
  return <MyComponent />;
}

Часто неточність не є важливою при поясненні понять, але у цьому випадку вона є.

Коли ми говоримо про серверні або клієнтські компоненти, ми маємо на увазі використання компонентів.

• Якщо компонент визначено у модулі з директивою 'use client', або компонент імпортовано та викликано у клієнтському компоненті, то використовується клієнтський компонент.
• В іншому випадку компонент використовується як серверний компонент.

Повертаючись до питання про FancyText, ми бачимо, що у визначенні компонента не є директива 'use client' і вона має два використання.

Використання FancyText як дочірнього елемента App позначає його як серверний компонент. Коли FancyText імпортується і викликається з InspirationGenerator, таке використання FancyText є клієнтським компонентом, оскільки InspirationGenerator містить директиву 'use client'.

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

Чому Copyright є серверним компонентом?

Оскільки Copyright зображено як нащадка клієнтського компонента InspirationGenerator, ви можете здивуватися, що це серверний компонент.

Нагадаємо, що 'use client' визначає межу між серверним та клієнтським кодом у дереві залежностей модуля , а не на дереві рендеру.

У дереві залежностей модулів ми бачимо, що App.js імпортує та викликає Copyright з модуля Copyright.js. Оскільки Copyright.js не містить директиви 'use client', використання компонентів рендериться на сервері. App відображається на сервері, оскільки він є кореневим компонентом.

Клієнтські компоненти можуть рендерити серверні компоненти, оскільки ви можете передавати JSX як пропси. У цьому випадку InspirationGenerator отримує Copyright як дочірні. Однак модуль InspirationGenerator ніколи безпосередньо не імпортує модуль Copyright і не викликає компонент, все це робить App. Фактично, компонент Copyright повністю виконується до того, як InspirationGenerator почне рендеринг.

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

Коли використовувати 'use client'

За допомогою 'use client' ви можете визначити, коли компоненти є клієнтськими. Оскільки за замовчуванням використовуються серверні компоненти, ось короткий огляд переваг та обмежень серверних компонентів, щоб визначити, коли вам потрібно позначити щось як клієнтський рендер.

Для простоти, ми говоримо про серверні компоненти, але ті самі принципи застосовуються до всього коду у вашому застосунку, який виконується на сервері.

Переваги серверних компонентів

• Серверні компоненти можуть зменшити кількість коду, що надсилається та виконується клієнтом. Тільки клієнтські модулі збираються та оцінюються клієнтом.
• Серверні компоненти отримують переваги від запуску на сервері. Вони мають доступ до локальної файлової системи і можуть відчувати низьку затримку при отриманні даних та мережевих запитах.

Обмеження серверних компонентів

• Серверні компоненти не можуть підтримувати взаємодію, оскільки обробники подій мають бути зареєстровані та запущені клієнтом.
  • Наприклад, обробники подій на зразок onClick можуть бути визначені лише у клієнтських компонентах.
• Серверні компоненти не можуть використовувати більшість хуків.
  • Під час рендерингу серверних компонентів їхнє виведення - це, по суті, список компонентів для рендерингу клієнтом. Серверні компоненти не зберігаються у пам'яті після рендерингу і не можуть мати власного стану.

Серіалізовані типи, що повертаються серверними компонентами

Як і в будь-якому React-застосунку, батьківські компоненти передають дані дочірнім. Оскільки вони рендерингуються в різних середовищах, передача даних від серверного компонента до клієнтського вимагає додаткового розгляду.

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

Серіалізовані пропси включають:

Зокрема, не підтримуються:

• Функції, які не експортуються з клієнтських модулів або позначені 'use server'
• Класи
• Об'єкти, які є екземплярами будь-якого класу (крім згаданих вбудованих) або об'єкти з нульовим прототипом
• Символи, не зареєстровані глобально, наприклад,Symbol('my new symbol')

Usage

Побудова з інтерактивністю та станом

Оскільки Counter вимагає як хук useState, так і обробників подій для збільшення або зменшення значення, цей компонент має бути клієнтським і потребуватиме директиви 'use client' зверху.

На противагу цьому, компонент, який відображає інтерфейс без взаємодії, не повинен бути клієнтським компонентом.

import { readFile } from 'node:fs/promises';
import Counter from './Counter';

export default async function CounterContainer() {
  const initialValue = await readFile('/path/to/counter_value');
  return <Counter initialValue={initialValue} />
}

Наприклад, батьківський компонент Counter, CounterContainer, не потребує 'use client', оскільки він не інтерактивний і не використовує стан. Крім того, CounterContainer має бути серверним компонентом, оскільки він читає з локальної файлової системи на сервері, що можливо лише у серверному компоненті.

Існують також компоненти, які не використовують жодних серверних або клієнтських функцій і можуть бути агностичними до місця рендерингу. У нашому попередньому прикладі FancyText є одним з таких компонентів.

export default function FancyText({title, text}) {
  return title
    ? <h1 className='fancy title'>{text}</h1>
    : <h3 className='fancy cursive'>{text}</h3>
}

У цьому випадку ми не додаємо директиву 'use client', у результаті чого FancyText вихідні дані (а не їхній вихідний код) буде надіслано браузеру при зверненні до нього із серверного компонента. Як показано у попередньому прикладі програми Inspirations, FancyText використовується як серверний або клієнтський компонент, залежно від того, де він імпортується та використовується.

Але якщо HTML-виведення FancyText є великим порівняно з його вихідним кодом (включно з залежностями), може бути ефективніше змусити його завжди бути клієнтським компонентом. Компоненти, які повертають довгий рядок шляху у форматі SVG, є одним із випадків, коли може бути ефективніше змусити компонент бути клієнтським компонентом.

Використання клієнтських API

Ваш React-застосунок може використовувати специфічні для клієнта API, такі як API браузера для веб-сховища, маніпуляцій з аудіо та відео, апаратного забезпечення пристроїв, серед іншого.

У цьому прикладі компонент використовує DOM API для маніпулювання елементом canvas. Оскільки ці API доступні лише у браузері, його слід позначити як клієнтський компонент.

'use client';

import {useRef, useEffect} from 'react';

export default function Circle() {
  const ref = useRef(null);
  useLayoutEffect(() => {
    const canvas = ref.current;
    const context = canvas.getContext('2d');
    context.reset();
    context.beginPath();
    context.arc(100, 75, 50, 0, 2 * Math.PI);
    context.stroke();
  });
  return <canvas ref={ref} />;
}

Використання сторонніх бібліотек

Досить часто у React-застосунку ви будете використовувати сторонні бібліотеки для обробки типових шаблонів інтерфейсу або логіки.

Ці бібліотеки можуть покладатися на хуки компонентів або клієнтські API. Сторонні компоненти, які використовують будь-який з наступних React API, повинні запускатися на стороні клієнта:

• createContext
• react та react-dom хуки, за винятком use та useId
• forwardRef
• memo
• startTransition
• Якщо вони використовують клієнтські API, наприклад, вставку DOM або нативне представлення платформи

Якщо ці бібліотеки були оновлені для сумісності з серверними компонентами React, то вони вже включатимуть власні маркери 'use client', що дозволить вам використовувати їх безпосередньо з ваших серверних компонентів. Якщо бібліотека не була оновлена, або якщо компонент потребує пропсів, таких як обробники подій, які можна вказати лише на клієнтській стороні, вам може знадобитися додати власний файл клієнтського компонента між стороннім клієнтським компонентом і вашим серверним компонентом, де ви хочете його використовувати.