Skip to content

Commit

Permalink
Merge pull request #773 from reactjs/tr/server-components
Browse files Browse the repository at this point in the history 
Translate "Server Components"
  • Loading branch information
@smikitky
smikitky authored Jun 1, 2024
2 parents 16dbcce + 0c80970 commit 4674ea3
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 34 deletions.
66 changes: 33 additions & 33 deletions src/content/reference/rsc/server-components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,28 @@ canary: true

<Intro>

Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.
サーバコンポーネントは新しいタイプのコンポーネントです。クライアントアプリケーションや SSR サーバとは別の環境で、バンドル前に事前にレンダーされます。

</Intro>

This separate environment is the "server" in React Server Components. Server Components can run once at build time on your CI server, or they can be run for each request using a web server.
React Server Components の "server" とはこの別の環境を指しています。サーバコンポーネントは、CI サーバでビルド時に一度だけ実行することも、ウェブサーバを使用してリクエストごとに実行することもできます。

<InlineToc />

<Note>

#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
#### サーバコンポーネントのサポートを追加する方法 {/*how-do-i-build-support-for-server-components*/}

While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
React 19 の React Server Components は安定しており、マイナーバージョン間での破壊的変更はありませんが、サーバコンポーネントのバンドラやフレームワークを実装するために使用される基盤となる API は semver に従いません。React 19.x のマイナーバージョン間で変更が生じる可能性があります。

To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
React Server Components をバンドラやフレームワークでサポートする場合は、特定の React バージョンに固定するか、Canary リリースを使用することをお勧めします。React Server Components を実装するために使用される API を安定化させるため、今後もバンドラやフレームワークと連携を続けていきます。

</Note>

### Server Components without a Server {/*server-components-without-a-server*/}
Server components can run at build time to read from the filesystem or fetch static content, so a web server is not required. For example, you may want to read static data from a content management system.
### サーバを使用しないサーバコンポーネント {/*server-components-without-a-server*/}
サーバコンポーネントはビルド時に実行でき、ファイルシステムから読み取ったり静的なコンテンツをフェッチしたりすることが可能です。したがってウェブサーバは必須ではありません。たとえばコンテンツ管理システムから静的データを読み取ることもできるでしょう。

Without Server Components, it's common to fetch static data on the client with an Effect:
サーバコンポーネントがない場合、静的データは一般的に、クライアントでエフェクトを使って以下のようにフェッチします。
```js
// bundle.js
import marked from 'marked'; // 35.9K (11.2K gzipped)
Expand All @@ -53,9 +53,9 @@ app.get(`/api/content/:page`, async (req, res) => {
});
```

This pattern means users need to download and parse an additional 75K (gzipped) of libraries, and wait for a second request to fetch the data after the page loads, just to render static content that will not change for the lifetime of the page.
このパターンを使用すると、ページの表示期間中に変化しない静的なコンテンツをただレンダーするためだけに、ユーザは 75K（gzip 後）のライブラリを追加でダウンロードしてパースし、さらにページのロード後に別のリクエストがデータをフェッチしてくるのを待つ必要があることになります。

With Server Components, you can render these components once at build time:
サーバコンポーネントを使用することで、これらのコンポーネントをビルド時に一度だけレンダーすることができます。

```js
import marked from 'marked'; // Not included in bundle
Expand All @@ -69,34 +69,34 @@ async function Page({page}) {
}
```

The rendered output can then be server-side rendered (SSR) to HTML and uploaded to a CDN. When the app loads, the client will not see the original `Page` component, or the expensive libraries for rendering the markdown. The client will only see the rendered output:
このレンダー出力は、サーバサイドレンダリング (SSR) で HTML に変換され、CDN にアップロードできます。アプリがロードされる際、クライアントには元の `Page` コンポーネントの存在や、Markdown をレンダーするための高コストなライブラリの存在は見えません。レンダーされた出力が見えるだけです。

```js
<div><!-- html for markdown --></div>
```

This means the content is visible during first page load, and the bundle does not include the expensive libraries needed to render the static content.
つまり、コンテンツは最初のページロード時にすぐ表示され、静的コンテンツをレンダーするためだけの高コストなライブラリをバンドルに含めなくともよくなるのです。

<Note>

You may notice that the Server Component above is an async function:
上記のサーバコンポーネントが非同期関数であることに気付かれたかもしれません。

```js
async function Page({page}) {
//...
}
```

Async Components are a new feature of Server Components that allow you to `await` in render.
非同期コンポーネントは、レンダー中に `await` できるというサーバコンポーネントの新機能です。

See [Async components with Server Components](#async-components-with-server-components) below.
以下の[サーバコンポーネントでの非同期コンポーネント処理](#async-components-with-server-components)を参照してください。

</Note>

### Server Components with a Server {/*server-components-with-a-server*/}
Server Components can also run on a web server during a request for a page, letting you access your data layer without having to build an API. They are rendered before your application is bundled, and can pass data and JSX as props to Client Components.
### サーバを使用するサーバコンポーネント {/*server-components-with-a-server*/}
サーバコンポーネントは、ページのリクエスト時にウェブサーバ内で実行することも可能であり、これにより API を構築することなくデータレイヤにアクセスできます。アプリケーションがバンドルされる前にレンダーされ、データと JSX をクライアントコンポーネントに props として渡すことができます。

Without Server Components, it's common to fetch dynamic data on the client in an Effect:
サーバコンポーネントがない場合、一般的には以下のようにして、動的データをクライアントでエフェクトを使ってフェッチします。

```js
// bundle.js
Expand Down Expand Up @@ -145,7 +145,7 @@ app.get(`/api/authors/:id`, async (req, res) => {
});
```

With Server Components, you can read the data and render it in the component:
サーバコンポーネントを使用することで、コンポーネントの中で直接データを読み取ってレンダーできます。

```js
import db from './database';
Expand All @@ -169,7 +169,7 @@ async function Author({id}) {
}
```

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:
この後バンドラは、データ、レンダー済みのサーバコンポーネント、および動的なクライアントコンポーネントをバンドルとして結合します。オプションとして、そのバンドルをサーバサイドレンダリング (SSR) して、ページの初期 HTML を作成できます。ページがロードされると、ブラウザには元の `Note` および `Author` コンポーネントの存在は見えません。クライアントにはレンダーされた出力のみが送信されます。

```js
<div>
Expand All @@ -178,24 +178,24 @@ The bundler then combines the data, rendered Server Components and dynamic Clien
</div>
```

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.
サーバコンポーネントをサーバから再フェッチして、サーバではデータにアクセスして再レンダーする、という形で、サーバコンポーネントを動的に扱うことができます。この新しいアプリケーションアーキテクチャは、サーバセントリックなマルチページアプリにおける単純な「リクエスト/レスポンス」式のメンタルモデルと、クライアントセントリックなシングルページアプリケーションにおけるシームレスな操作性を組み合わせ、両方の利点を提供できるものです。

### Adding interactivity to Server Components {/*adding-interactivity-to-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.
サーバコンポーネントはブラウザに送信されないため、`useState` のようなインタラクティブな API を使用できません。サーバコンポーネントにインタラクティビティを追加するには、`"use client"` ディレクティブを使用してクライアントコンポーネントと組み合わせます。

<Note>

#### There is no directive for Server Components. {/*there-is-no-directive-for-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 Actions.
よくある誤解として、サーバコンポーネントを "use server" を用いて定義するものだと考えるというものがあります。サーバコンポーネントにはディレクティブがありません。"use server" ディレクティブは、サーバアクションのためのものです。

For more info, see the docs for [Directives](/reference/rsc/directives).
詳細については、[ディレクティブ](/reference/rsc/directives) のドキュメントをご覧ください。

</Note>


In the following example, the `Notes` Server Component imports an `Expandable` Client Component that uses state to toggle its `expanded` state:
以下の例では、サーバコンポーネントである `Notes` がクライアントコンポーネントである `Expandable` をインポートしており、そこで state を使用して `expanded` をトグルしています。
```js
// Server Component
import Expandable from './Expandable';
Expand Down Expand Up @@ -232,7 +232,7 @@ 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` がサーバコンポーネントとしてレンダーされ、次にバンドラに `Expandable` というクライアントコンポーネントのバンドルを作成するよう指示しています。ブラウザ側では、クライアントコンポーネントには props 経由で渡されるサーバコンポーネントの出力だけが見えることになります。

```js
<head>
Expand All @@ -252,11 +252,11 @@ This works by first rendering `Notes` as a Server Component, and then instructin
</body>
```

### Async components with Server Components {/*async-components-with-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.
サーバコンポーネントにより、async/await を使用してコンポーネントを書くという新しい手法が導入されます。非同期コンポーネント内で `await` すると、React はサスペンド (suspend) し、プロミスが解決 (resolve) されるのを待ってからレンダーを再開します。サスペンスのストリーミングサポートのおかげで、これはサーバ／クライアントの境界をまたいで機能します。

You can even create a promise on the server, and await it on the client:
サーバでプロミスを作成し、それをクライアント側で待機することすら可能です。

```js
// Server Component
Expand Down Expand Up @@ -292,6 +292,6 @@ function Comments({commentsPromise}) {
}
```

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` の内容はページをレンダーするために重要なデータなので、サーバ側で `await` します。コメントは折りたたまれており優先度が低いため、サーバではプロミスを開始だけして、クライアントで `use` API を使用してそれを待機します。これによりクライアント側でサスペンドが起きますが、`note` の内容のレンダーをブロックしないで済みます。

Since async components are [not supported on the client](#why-cant-i-use-async-components-on-the-client), we await the promise with `use`.
非同期コンポーネントは[クライアントではサポートされていない](#why-cant-i-use-async-components-on-the-client) ため、プロミスの待機は `use` を使用して行います。
2 changes: 1 addition & 1 deletion src/sidebarReference.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@
"sectionHeader": "React Server Components"
},
{
"title": "Server Components",
"title": "サーバコンポーネント",
"path": "/reference/rsc/server-components",
"canary": true
},
Expand Down

0 comments on commit 4674ea3

Please sign in to comment.