@@ -167,14 +167,14 @@ async function Note({id}) {
}
async function Author({id}) {
- // NOTE: loads *after* Note,
- // but is fast if data is co-located.
+ // ПРИМЕЧАНИЕ: загружается *после* Note,
+ // но быстро, если данные находятся рядом.
const author = await db.authors.get(id);
return
By: {author.name};
}
```
-The bundler then combines the data, rendered Server Components and dynamic Client Components into a bundle. Optionally, that bundle can then be server-side rendered (SSR) to create the initial HTML for the page. When the page loads, the browser does not see the original `Note` and `Author` components; only the rendered output is sent to the client:
+Затем бандлер объединяет данные, отрисованные Server Components и динамические Client Components в бандл. При желании этот бандл может быть отрендерен на стороне сервера (SSR) для создания начального HTML-кода страницы. Когда страница загружается, браузер не видит исходные компоненты `Note` и `Author`; клиенту отправляется только отрисованный результат:
```js
@@ -183,24 +183,24 @@ The bundler then combines the data, rendered Server Components and dynamic Clien
```
-Server Components can be made dynamic by re-fetching them from a server, where they can access the data and render again. This new application architecture combines the simple “request/response” mental model of server-centric Multi-Page Apps with the seamless interactivity of client-centric Single-Page Apps, giving you the best of both worlds.
+Server Components могут быть сделаны динамическими путем повторного получения их с сервера, где они могут получить доступ к данным и снова отрисоваться. Эта новая архитектура приложения сочетает простую модель «запрос/ответ» серверно-ориентированных многостраничных приложений с бесшовной интерактивностью клиентско-ориентированных одностраничных приложений, предоставляя вам лучшее из обоих миров.
-### Adding interactivity to Server Components {/*adding-interactivity-to-server-components*/}
+### Добавление интерактивности в Server Components {/*adding-interactivity-to-server-components*/}
-Server Components are not sent to the browser, so they cannot use interactive APIs like `useState`. To add interactivity to Server Components, you can compose them with Client Component using the `"use client"` directive.
+Server Components не отправляются в браузер, поэтому они не могут использовать интерактивные API, такие как `useState`. Чтобы добавить интерактивность в Server Components, вы можете комбинировать их с Client Components, используя директиву `"use client"`.
-#### There is no directive for Server Components. {/*there-is-no-directive-for-server-components*/}
+#### Директивы для Server Components не существует. {/*there-is-no-directive-for-server-components*/}
-A common misunderstanding is that Server Components are denoted by `"use server"`, but there is no directive for Server Components. The `"use server"` directive is used for Server Functions.
+Распространенное заблуждение заключается в том, что Server Components обозначаются как `"use server"`, но директивы для Server Components не существует. Директива `"use server"` используется для Server Functions.
-For more info, see the docs for [Directives](/reference/rsc/directives).
+Для получения дополнительной информации см. документацию по [Directives](/reference/rsc/directives).
-In the following example, the `Notes` Server Component imports an `Expandable` Client Component that uses state to toggle its `expanded` state:
+В следующем примере `Notes` Server Component импортирует `Expandable` Client Component, который использует состояние для переключения своего состояния `expanded`:
```js
// Server Component
import Expandable from './Expandable';
@@ -237,11 +237,11 @@ export default function Expandable({children}) {
}
```
-This works by first rendering `Notes` as a Server Component, and then instructing the bundler to create a bundle for the Client Component `Expandable`. In the browser, the Client Components will see output of the Server Components passed as props:
+Это работает следующим образом: сначала `Notes` рендерится как Server Component, а затем бандлеру дается указание создать бандл для Client Component `Expandable`. В браузере Client Components увидят результат Server Components, переданный в качестве пропсов:
```js
-
+
@@ -257,21 +257,21 @@ This works by first rendering `Notes` as a Server Component, and then instructin
```
-### Async components with Server Components {/*async-components-with-server-components*/}
+### Async components с Server Components {/*async-components-with-server-components*/}
-Server Components introduce a new way to write Components using async/await. When you `await` in an async component, React will suspend and wait for the promise to resolve before resuming rendering. This works across server/client boundaries with streaming support for Suspense.
+Server Components представляют новый способ написания компонентов с использованием async/await. Когда вы используете `await` в асинхронном компоненте, React приостанавливает выполнение и ждет разрешения промиса перед возобновлением рендеринга. Это работает на границах сервера/клиента с поддержкой потоковой передачи для Suspense.
-You can even create a promise on the server, and await it on the client:
+Вы можете даже создать промис на сервере и ожидать его на клиенте:
```js
// Server Component
import db from './database';
async function Page({id}) {
- // Will suspend the Server Component.
+ // Приостановит выполнение Server Component.
const note = await db.notes.get(id);
- // NOTE: not awaited, will start here and await on the client.
+ // ПРИМЕЧАНИЕ: не ожидается, начнется здесь и будет ожидаться на клиенте.
const commentsPromise = db.comments.get(note.id);
return (
@@ -290,13 +290,13 @@ async function Page({id}) {
import {use} from 'react';
function Comments({commentsPromise}) {
- // NOTE: this will resume the promise from the server.
- // It will suspend until the data is available.
+ // ПРИМЕЧАНИЕ: это возобновит промис с сервера.
+ // Он будет приостановлен до тех пор, пока данные не станут доступны.
const comments = use(commentsPromise);
return comments.map(commment =>
{comment}
);
}
```
-The `note` content is important data for the page to render, so we `await` it on the server. The comments are below the fold and lower-priority, so we start the promise on the server, and wait for it on the client with the `use` API. This will Suspend on the client, without blocking the `note` content from rendering.
+Контент `note` является важными данными для рендеринга страницы, поэтому мы ожидаем его на сервере. Комментарии находятся ниже основного контента и имеют более низкий приоритет, поэтому мы запускаем промис на сервере и ожидаем его на клиенте с помощью API `use`. Это приведет к приостановке выполнения на клиенте, не блокируя рендеринг контента `note`.
-Since async components are not supported on the client, we await the promise with `use`.
+Поскольку асинхронные компоненты не поддерживаются на клиенте, мы ожидаем промис с помощью `use`.