diff --git a/src/content/reference/rsc/use-client.md b/src/content/reference/rsc/use-client.md index e259585c49..329d00a834 100644 --- a/src/content/reference/rsc/use-client.md +++ b/src/content/reference/rsc/use-client.md @@ -5,14 +5,14 @@ titleForTitleTag: "'use client' directive" -`'use client'` is for use with [React Server Components](/reference/rsc/server-components). +`'use client'` предназначена для использования с [серверными компонентами React](/reference/rsc/server-components). -`'use client'` lets you mark what code runs on the client. +`'use client'` позволяет пометить, какой код выполняется на клиенте. @@ -20,11 +20,11 @@ titleForTitleTag: "'use client' directive" --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `'use client'` {/*use-client*/} -Add `'use client'` at the top of a file to mark the module and its transitive dependencies as client code. +Добавьте `'use client'` в начале файла, чтобы пометить модуль и его транзитивные зависимости как клиентский код. ```js {1} 'use client'; @@ -41,26 +41,26 @@ export default function RichTextEditor({ timestamp, text }) { } ``` -When a file marked with `'use client'` is imported from a Server Component, [compatible bundlers](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) will treat the module import as a boundary between server-run and client-run code. +Когда файл, помеченный `'use client'` импортируется из серверного компонента, [совместимые бандлеры](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) будут воспринимать импорт этого модуля как границу между кодом, который выполняется на сервере, и кодом, который выполняется на клиенте. -As dependencies of `RichTextEditor`, `formatDate` and `Button` will also be evaluated on the client regardless of whether their modules contain a `'use client'` directive. Note that a single module may be evaluated on the server when imported from server code and on the client when imported from client code. +`formatDate` и `Button`, будучи зависимостями `RichTextEditor` также будут вычислены на клиенте, независимо от того, содержат ли их модули директиву `'use client'`. Обратите внимание, что один и тот же модуль может быть вычислен на сервере, если импортируется из серверного кода, и на клиенте, если импортируется из клиентского кода. -#### Caveats {/*caveats*/} +#### Замечания {/*caveats*/} -* `'use client'` must be at the very beginning of a file, above any imports or other code (comments are OK). They must be written with single or double quotes, but not backticks. -* When a `'use client'` module is imported from another client-rendered module, the directive has no effect. -* When a component module contains a `'use client'` directive, any usage of that component is guaranteed to be a Client Component. However, a component can still be evaluated on the client even if it does not have a `'use client'` directive. - * A component usage is considered a Client Component if it is defined in module with `'use client'` directive or when it is a transitive dependency of a module that contains a `'use client'` directive. Otherwise, it is a Server Component. -* Code that is marked for client evaluation is not limited to components. All code that is a part of the Client module sub-tree is sent to and run by the client. -* When a server evaluated module imports values from a `'use client'` module, the values must either be a React component or [supported serializable prop values](#passing-props-from-server-to-client-components) to be passed to a Client Component. Any other use case will throw an exception. +* `'use client'` должна быть в самом начале файла, выше всех импортов и другого кода (комментарии допускаются). Её нужно записывать в одинарных или двойных кавычках, но не в обратных. +* Когда `'use client'` модуль импортируется из другого модуля, рендерящегося на клиенте, директива не имеет эффекта. +* Когда модуль компонента содержит директиву `'use client'`, любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть вычислен на клиенте, даже если он не содержит директиву `'use client'`. + * Использование компонента считается клиентским компонентом, если он определён в модуле с директивой `'use client'` или когда он является транзитивной зависимостью модуля, который содержит директиву `'use client'`. Иначе это серверный компонент. +* Код, помеченный для вычисления на клиенте, не ограничивается компонентами. Весь код, являющийся частью клиентского поддерева модулей, отправляется клиенту и выполняется им. +* Когда модуль, вычисляемый на сервере, импортирует значения из `'use client'` модуля, эти значения должны быть либо React-компонентом, либо [поддерживаемыми сериализуемыми значениями пропсов](#passing-props-from-server-to-client-components) , передаваемыми клиентскому компоненту. Любой другой случай использования вызовет исключение. -### How `'use client'` marks client code {/*how-use-client-marks-client-code*/} +### Как `'use client'` помечает клиентский код {/*how-use-client-marks-client-code*/} -In a React app, components are often split into separate files, or [modules](/learn/importing-and-exporting-components#exporting-and-importing-a-component). +В приложении React компоненты часто разбиваются на отдельные файлы, или [модули](/learn/importing-and-exporting-components#exporting-and-importing-a-component). -For apps that use React Server Components, the app is server-rendered by default. `'use client'` introduces a server-client boundary in the [module dependency tree](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), effectively creating a subtree of Client modules. +Для приложений, использующих серверные компоненты React, приложение по умолчанию рендерится на сервере. `'use client'` вводит границу между сервером и клиентом в [дереве зависимостей модулей](/learn/understanding-your-ui-as-a-tree#the-module-dependency-tree), фактически создавая поддерево клиентских модулей. -To better illustrate this, consider the following React Server Components app. +Чтобы лучше это проиллюстрировать, рассмотрим следующее приложение серверные компоненты React. @@ -145,144 +145,144 @@ export default [ -In the module dependency tree of this example app, the `'use client'` directive in `InspirationGenerator.js` marks that module and all of its transitive dependencies as Client modules. The subtree starting at `InspirationGenerator.js` is now marked as Client modules. +В дереве зависимостей модулей этого примера приложения директива `'use client'` в `InspirationGenerator.js` помечает этот модуль и все его транзитивные зависимости как клиентские модули. Поддерево, начинающееся с `InspirationGenerator.js`, теперь помечено как клиентские модули. -`'use client'` segments the module dependency tree of the React Server Components app, marking `InspirationGenerator.js` and all of its dependencies as client-rendered. +`'use client'` разделяет дерево зависимостей модулей приложения серверные компоненты React, помечая `InspirationGenerator.js` и все его зависимости как рендерящиеся на клиенте. -During render, the framework will server-render the root component and continue through the [render tree](/learn/understanding-your-ui-as-a-tree#the-render-tree), opting-out of evaluating any code imported from client-marked code. +Во время рендеринга фреймворк отрендерит корневой компонент на сервере и продолжит по [дереву рендеринга](/learn/understanding-your-ui-as-a-tree#the-render-tree), отказываясь от вычисления любого кода, импортированного из кода, помеченного как клиентский. -The server-rendered portion of the render tree is then sent to the client. The client, with its client code downloaded, then completes rendering the rest of the tree. +Отрендеренная на сервере часть дерева рендеринга затем отправляется клиенту. Клиент, загрузив свой клиентский код, завершает рендеринг оставшейся части дерева. -The render tree for the React Server Components app. `InspirationGenerator` and its child component `FancyText` are components exported from client-marked code and considered Client Components. +Дерево рендеринга для приложения серверные компоненты React. `InspirationGenerator` и его дочерний компонент `FancyText` — это компоненты, экспортированные из кода, помеченного как клиентский, и считающиеся клиентскими компонентами. -We introduce the following definitions: +Введём следующие определения: -* **Client Components** are components in a render tree that are rendered on the client. -* **Server Components** are components in a render tree that are rendered on the server. +* **клиентские компоненты** — это компоненты в дереве рендеринга, которые рендерятся на клиенте. +* **серверные компоненты** — это компоненты в дереве рендеринга, которые рендерятся на сервере. -Working through the example app, `App`, `FancyText` and `Copyright` are all server-rendered and considered Server Components. As `InspirationGenerator.js` and its transitive dependencies are marked as client code, the component `InspirationGenerator` and its child component `FancyText` are Client Components. +Разбирая пример приложения, `App`, `FancyText` и `Copyright` все рендерятся на сервере и считаются серверными компонентами. Поскольку `InspirationGenerator.js` и его транзитивные зависимости помечены как клиентский код, компонент `InspirationGenerator` и его дочерний компонент `FancyText` являются клиентскими компонентами. -#### How is `FancyText` both a Server and a Client Component? {/*how-is-fancytext-both-a-server-and-a-client-component*/} +#### Как `FancyText` может быть одновременно и серверным, и клиентским компонентом? {/*how-is-fancytext-both-a-server-and-a-client-component*/} -By the above definitions, the component `FancyText` is both a Server and Client Component, how can that be? +Согласно приведённым выше определениям, компонент `FancyText` является одновременно и серверным, и клиентским компонентом — как такое возможно? -First, let's clarify that the term "component" is not very precise. Here are just two ways "component" can be understood: +Прежде всего, уточнём, что термин «компонент» не очень точен. Вот всего два способа понимания слова «компонент»: -1. A "component" can refer to a **component definition**. In most cases this will be a function. +1. «Компонент» может означать **определение компонента**. В большинстве случаев это будет функция. ```js -// This is a definition of a component +// Это определение компонента function MyComponent() { return

My Component

} ``` -2. A "component" can also refer to a **component usage** of its definition. +2. «Компонент» также может относиться к **использованию компонента** его определения. ```js import MyComponent from './MyComponent'; function App() { - // This is a usage of a component + // Это использование компонента return ; } ``` -Often, the imprecision is not important when explaining concepts, but in this case it is. +Часто эта неточность не имеет значения при объяснении концепций, но в этом случае она важна. -When we talk about Server or Client Components, we are referring to component usages. +Когда мы говорим о серверных или клиентских компонентах, мы имеем в виду использования компонентов. -* If the component is defined in a module with a `'use client'` directive, or the component is imported and called in a Client Component, then the component usage is a Client Component. -* Otherwise, the component usage is a Server Component. +* Если компонент определён в модуле с `'use client'` -директивой, или компонент импортирован и вызван в клиентском компоненте, то использование компонента является клиентским компонентом. +* В противном случае использование компонента является серверным компонентом. -A render tree illustrates component usages. +Дерево рендеринга иллюстрирует использования компонентов. -Back to the question of `FancyText`, we see that the component definition does _not_ have a `'use client'` directive and it has two usages. +Возвращаясь к вопросу `FancyText`, мы видим, что определение компонента _не_ имеет `'use client'` -директиву, и у него два использования. -The usage of `FancyText` as a child of `App`, marks that usage as a Server Component. When `FancyText` is imported and called under `InspirationGenerator`, that usage of `FancyText` is a Client Component as `InspirationGenerator` contains a `'use client'` directive. +Использование `FancyText` в качестве дочернего компонента `App`, отмечает это использование как серверный компонент. Когда `FancyText` импортируется и вызывается внутри `InspirationGenerator`, это использование `FancyText` является клиентским компонентом, так как `InspirationGenerator` содержит `'use client'` директиву. -This means that the component definition for `FancyText` will both be evaluated on the server and also downloaded by the client to render its Client Component usage. +Это означает, что определение компонента `FancyText` будет вычислено как на сервере, так и загружено клиентом для рендеринга его использования в качестве клиентского компонента. -#### Why is `Copyright` a Server Component? {/*why-is-copyright-a-server-component*/} +#### Почему `Copyright` является серверным компонентом? {/*why-is-copyright-a-server-component*/} -Because `Copyright` is rendered as a child of the Client Component `InspirationGenerator`, you might be surprised that it is a Server Component. +Потому что `Copyright` рендерится как дочерний элемент клиентского компонента `InspirationGenerator`, вас может удивить, что это серверный компонент. -Recall that `'use client'` defines the boundary between server and client code on the _module dependency tree_, not the render tree. +Напомним, что `'use client'` определяет границу между серверным и клиентским кодом на _дереве зависимостей модулей_, а не на дереве рендеринга. - -`'use client'` defines the boundary between server and client code on the module dependency tree. + +`'use client'` определяет границу между серверным и клиентским кодом на дереве зависимостей модулей. -In the module dependency tree, we see that `App.js` imports and calls `Copyright` from the `Copyright.js` module. As `Copyright.js` does not contain a `'use client'` directive, the component usage is rendered on the server. `App` is rendered on the server as it is the root component. +В дереве зависимостей модулей мы видим, что `App.js` импортирует и вызывает `Copyright` из `Copyright.js` модуля. Так как `Copyright.js` не содержит `'use client'` директиву, использование компонента рендерится на сервере. `App` рендерится на сервере, так как является корневым компонентом. -Client Components can render Server Components because you can pass JSX as props. In this case, `InspirationGenerator` receives `Copyright` as [children](/learn/passing-props-to-a-component#passing-jsx-as-children). However, the `InspirationGenerator` module never directly imports the `Copyright` module nor calls the component, all of that is done by `App`. In fact, the `Copyright` component is fully executed before `InspirationGenerator` starts rendering. +Клиентские компоненты могут рендерить серверные компоненты, потому что можно передавать JSX в качестве пропсов. В этом случае `InspirationGenerator` получает `Copyright` как [children](/learn/passing-props-to-a-component#passing-jsx-as-children). Однако `InspirationGenerator` модуль никогда напрямую не импортирует `Copyright` модуль и не вызывает компонент, всё это делает `App`. Фактически, `Copyright` компонент полностью выполняется до того, как `InspirationGenerator` начинает рендериться. -The takeaway is that a parent-child render relationship between components does not guarantee the same render environment. +Вывод в том, что отношение «родитель-потомок» при рендеринге между компонентами не гарантирует одинаковую среду рендеринга. -### When to use `'use client'` {/*when-to-use-use-client*/} +### Когда использовать `'use client'` {/*when-to-use-use-client*/} -With `'use client'`, you can determine when components are Client Components. As Server Components are default, here is a brief overview of the advantages and limitations to Server Components to determine when you need to mark something as client rendered. +С помощью `'use client'`, можно определять, когда компоненты являются клиентскими. Так как по умолчанию компоненты являются серверными, вот краткий обзор преимуществ и ограничений серверных компонентов, чтобы определить, когда нужно помечать что-либо как рендерящееся на клиенте. -For simplicity, we talk about Server Components, but the same principles apply to all code in your app that is server run. +Для простоты мы говорим о серверных компонентах, но те же принципы применяются ко всему коду в вашем приложении, который выполняется на сервере. -#### Advantages of Server Components {/*advantages*/} -* Server Components can reduce the amount of code sent and run by the client. Only Client modules are bundled and evaluated by the client. -* Server Components benefit from running on the server. They can access the local filesystem and may experience low latency for data fetches and network requests. +#### Преимущества серверных компонентов {/*advantages*/} +* Серверные компоненты позволяют уменьшить объём кода, отправляемого и выполняемого клиентом. Клиент собирает и выполняет только клиентские модули. +* Серверные компоненты выигрывают от выполнения на сервере. Они могут обращаться к локальной файловой системе и получать данные с меньшей задержкой при выполнении запросов к данным и сетевых запросов. -#### Limitations of Server Components {/*limitations*/} -* Server Components cannot support interaction as event handlers must be registered and triggered by a client. - * For example, event handlers like `onClick` can only be defined in Client Components. -* Server Components cannot use most Hooks. - * When Server Components are rendered, their output is essentially a list of components for the client to render. Server Components do not persist in memory after render and cannot have their own state. +#### Ограничения серверных компонентов {/*limitations*/} +* Серверные компоненты не могут поддерживать взаимодействие, так как обработчики событий должны быть зарегистрированы и вызваны клиентом. + * Например, обработчики событий, такие как `onClick`, могут быть определены только в клиентских компонентах. +* Серверные компоненты не могут использовать большинство хуков. + * Когда серверные компоненты рендерятся, их результатом фактически является список компонентов для рендеринга клиентом. Серверные компоненты не сохраняются в памяти после рендеринга и не могут иметь собственное состояние. -### Serializable types returned by Server Components {/*serializable-types*/} +### Сериализуемые типы, возвращаемые серверными компонентами {/*serializable-types*/} -As in any React app, parent components pass data to child components. As they are rendered in different environments, passing data from a Server Component to a Client Component requires extra consideration. +Как и в любом приложении React, родительские компоненты передают данные дочерним компонентам. Поскольку они рендерятся в разных средах, передача данных из серверного компонента в клиентский компонент требует дополнительного внимания. -Prop values passed from a Server Component to Client Component must be serializable. +Значения пропсов, передаваемые из серверного компонента в клиентский компонент, должны быть сериализуемыми. -Serializable props include: -* Primitives - * [string](https://developer.mozilla.org/en-US/docs/Glossary/String) - * [number](https://developer.mozilla.org/en-US/docs/Glossary/Number) - * [bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) - * [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean) - * [undefined](https://developer.mozilla.org/en-US/docs/Glossary/Undefined) - * [null](https://developer.mozilla.org/en-US/docs/Glossary/Null) - * [symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), only symbols registered in the global Symbol registry via [`Symbol.for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for) -* Iterables containing serializable values - * [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) - * [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) - * [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) - * [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) - * [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) and [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) -* [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) -* Plain [objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object): those created with [object initializers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer), with serializable properties -* Functions that are [Server Functions](/reference/rsc/server-functions) -* Client or Server Component elements (JSX) -* [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) +К сериализуемым пропсам относятся: +* Примитивы + * [string](https://developer.mozilla.org/ru/docs/Glossary/String) + * [number](https://developer.mozilla.org/ru/docs/Glossary/Number) + * [bigint](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/BigInt) + * [boolean](https://developer.mozilla.org/ru/docs/Glossary/Boolean) + * [undefined](https://developer.mozilla.org/ru/docs/Glossary/Undefined) + * [null](https://developer.mozilla.org/ru/docs/Glossary/Null) + * [symbol](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol), только символы, зарегистрированные в глобальном реестре Symbol через [`Symbol.for`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Symbol/for) +* Итерируемые объекты, содержащие сериализуемые значения + * [String](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String) + * [Array](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array) + * [Map](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Map) + * [Set](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Set) + * [TypedArray](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) и [ArrayBuffer](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) +* [Date](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Date) +* Обычные [объекты](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object): созданные с помощью [инициализаторов объектов](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Object_initializer), с сериализуемыми свойствами +* Функции, которые являются [серверными функциями](/reference/rsc/server-functions) +* Элементы клиентских или серверных компонентов (JSX) +* [Промисы](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise) -Notably, these are not supported: -* [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function) that are not exported from client-marked modules or marked with [`'use server'`](/reference/rsc/use-server) -* [Classes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) -* Objects that are instances of any class (other than the built-ins mentioned) or objects with [a null prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) -* Symbols not registered globally, ex. `Symbol('my new symbol')` +Стоит отметить, что не поддерживаются следующие типы: +* [Функции](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function) которые не экспортированы из модулей, помеченных как клиентские, или не помечены [`'use server'`](/reference/rsc/use-server) +* [Классы](https://developer.mozilla.org/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript) +* Объекты, являющиеся экземплярами любого класса (кроме упомянутых встроенных) или объекты с [прототипом null](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects) +* Символы, не зарегистрированные глобально, напр. `Symbol('my new symbol')` -## Usage {/*usage*/} +## Использование {/*usage*/} -### Building with interactivity and state {/*building-with-interactivity-and-state*/} +### Создание интерактивности и состояния {/*building-with-interactivity-and-state*/} @@ -307,9 +307,9 @@ export default function Counter({initialValue = 0}) { -As `Counter` requires both the `useState` Hook and event handlers to increment or decrement the value, this component must be a Client Component and will require a `'use client'` directive at the top. +Поскольку `Counter` требует как `useState` хук, так и обработчики событий для увеличения или уменьшения значения, этот компонент должен быть клиентским компонентом и потребует директиву `'use client'` в начале файла. -In contrast, a component that renders UI without interaction will not need to be a Client Component. +В отличие от этого, компонент, который рендерит UI без взаимодействия, не должен быть клиентским компонентом. ```js import { readFile } from 'node:fs/promises'; @@ -321,9 +321,9 @@ export default async function CounterContainer() { } ``` -For example, `Counter`'s parent component, `CounterContainer`, does not require `'use client'` as it is not interactive and does not use state. In addition, `CounterContainer` must be a Server Component as it reads from the local file system on the server, which is possible only in a Server Component. +Например, `Counter`, родительский компонент `CounterContainer`, не требует `'use client'`, так как он не является интерактивным и не использует состояние. Кроме того, `CounterContainer` должен быть серверным компонентом, так как он считывает данные из локальной файловой системы на сервере, что возможно только в серверном компоненте. -There are also components that don't use any server or client-only features and can be agnostic to where they render. In our earlier example, `FancyText` is one such component. +Также существуют компоненты, которые не используют каких-либо серверных или клиентских возможностей и не зависят от того, где они рендерятся. В нашем предыдущем примере `FancyText` — один из таких компонентов. ```js export default function FancyText({title, text}) { @@ -333,15 +333,15 @@ export default function FancyText({title, text}) { } ``` -In this case, we don't add the `'use client'` directive, resulting in `FancyText`'s _output_ (rather than its source code) to be sent to the browser when referenced from a Server Component. As demonstrated in the earlier Inspirations app example, `FancyText` is used as both a Server or Client Component, depending on where it is imported and used. +В этом случае мы не добавляем `'use client'` директиву, что приводит к тому, что у `FancyText` появляется _вывод_ (а не его исходный код) отправлялся в браузер при обращении к нему из серверного компонента. Как показано в примере с приложением Inspirations выше, `FancyText` используется как серверный, так и как клиентский компонент, в зависимости от того, где он импортируется и используется. -But if `FancyText`'s HTML output was large relative to its source code (including dependencies), it might be more efficient to force it to always be a Client Component. Components that return a long SVG path string are one case where it may be more efficient to force a component to be a Client Component. +Но если у `FancyText` вывод в HTML был большим по сравнению с исходным кодом (включая зависимости), может быть эффективнее принудительно сделать его всегда клиентским компонентом. Компоненты, которые возвращают длинную строку пути SVG, — один из случаев, когда принудительное превращение компонента в клиентский может быть более эффективным. -### Using client APIs {/*using-client-apis*/} +### Использование клиентских API {/*using-client-apis*/} -Your React app may use client-specific APIs, such as the browser's APIs for web storage, audio and video manipulation, and device hardware, among [others](https://developer.mozilla.org/en-US/docs/Web/API). +Ваше приложение React может использовать специфичные для клиента API, такие как API браузера для веб-хранилища, обработки аудио и видео, а также аппаратного обеспечения устройства, среди [прочего](https://developer.mozilla.org/ru/docs/Web/API). -In this example, the component uses [DOM APIs](https://developer.mozilla.org/en-US/docs/Glossary/DOM) to manipulate a [`canvas`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element. Since those APIs are only available in the browser, it must be marked as a Client Component. +В этом примере компонент использует [DOM API](https://developer.mozilla.org/ru/docs/Glossary/DOM) , чтобы управлять элементом [`canvas`](https://developer.mozilla.org/ru/docs/Web/HTML/Element/canvas) . Поскольку эти API доступны только в браузере, компонент должен быть помечен как клиентский. ```js 'use client'; @@ -362,18 +362,18 @@ export default function Circle() { } ``` -### Using third-party libraries {/*using-third-party-libraries*/} +### Использование сторонних библиотек {/*using-third-party-libraries*/} -Often in a React app, you'll leverage third-party libraries to handle common UI patterns or logic. +Часто в приложении React вы будете использовать сторонние библиотеки для обработки распространённых шаблонов UI или логики. -These libraries may rely on component Hooks or client APIs. Third-party components that use any of the following React APIs must run on the client: +Такие библиотеки могут зависеть от хуков компонентов или клиентских API. Компоненты сторонних библиотек, использующие любой из следующих API React, должны выполняться на клиенте: * [createContext](/reference/react/createContext) -* [`react`](/reference/react/hooks) and [`react-dom`](/reference/react-dom/hooks) Hooks, excluding [`use`](/reference/react/use) and [`useId`](/reference/react/useId) +* [`react`](/reference/react/hooks) и [`react-dom`](/reference/react-dom/hooks) хуки, кроме [`use`](/reference/react/use) и [`useId`](/reference/react/useId) * [forwardRef](/reference/react/forwardRef) * [memo](/reference/react/memo) * [startTransition](/reference/react/startTransition) -* If they use client APIs, ex. DOM insertion or native platform views +* Если они используют клиентские API, например вставку DOM или нативные представления платформы -If these libraries have been updated to be compatible with React Server Components, then they will already include `'use client'` markers of their own, allowing you to use them directly from your Server Components. If a library hasn't been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you'd like to use it. +Если эти библиотеки были обновлены для совместимости с серверными компонентами React, они уже будут содержать собственные маркеры `'use client'`, позволяющие использовать их непосредственно из ваших серверных компонентов. Если библиотека не обновлена, или если компоненту нужны пропсы, такие как обработчики событий, которые можно указать только на клиенте, вам может понадобиться добавить собственный файл клиентского компонента между сторонним клиентским компонентом и вашим серверным компонентом, где вы хотите его использовать. [TODO]: (Troubleshooting - need use-cases)

AltStyle によって変換されたページ (->オリジナル) /