Skip to content

Commit

Permalink
微修正
Browse files Browse the repository at this point in the history
  • Loading branch information
@smikitky
smikitky committed Jul 19, 2023
1 parent f96bd9f commit 91bb5b7
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 7 deletions.
6 changes: 3 additions & 3 deletions src/content/reference/react/use-client.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ title: "'use client'"

<Intro>

`'use client'` により、ソースファイルがクライアント上で実行されるコンポーネントが書かれたものである、とマークします。
`'use client'` でソースファイルをマークすることにより、ファイル内のコンポーネントがクライアント上で実行されることを示します。

</Intro>

Expand All @@ -34,7 +34,7 @@ export default function RichTextEditor(props) {
// ...
```
`'use client'` がマークされたファイルがサーバコンポーネントからインポートされると、[互換性のあるバンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)は、そのインポートをサーバ専用のコードとクライアントコードとの間の「切り離し点 (cut-off point)」として扱います。モジュールグラフでこの点およびこの点より下側にあるコンポーネントは、[`useState`](/reference/react/useState) のようなクライアント専用の React 機能を使用できます。
`'use client'` とマークされたファイルがサーバコンポーネントからインポートされると、[互換性のあるバンドラ](/learn/start-a-new-react-project#bleeding-edge-react-frameworks)は、当該インポートをサーバ専用コードとクライアントコードとの間の「切り離しポイント」として扱います。モジュールグラフでこのポイントおよび下側にあるコンポーネントは、[`useState`](/reference/react/useState) のようなクライアント専用の React 機能を使用できます。
#### 注意点 {/*caveats*/}
Expand All @@ -44,7 +44,7 @@ export default function RichTextEditor(props) {
* `'use client'` ファイルのすべてのコード、およびそれが（直接的にまたは間接的に）インポートするすべてのモジュールはクライアントモジュールグラフの一部となるため、ブラウザが表示するためにはクライアントに送信され、クライアントで実行される必要があります。クライアントでのバンドルサイズを減らし、サーバ機能を最大限に活用するためには、可能な限りツリーの下部に state（および `'use client'` ディレクティブ）を移動し、レンダーされたサーバコンポーネントを [children として](/learn/passing-props-to-a-component#passing-jsx-as-children)クライアントコンポーネントに渡します。
* props はサーバとクライアントの境界を越えてシリアライズされるため、これらのディレクティブの配置の仕方がクライアントに送信されるデータ量に影響を与える可能性があります。必要以上に大きなデータ構造を避けてください。
* サーバ専用機能もクライアント専用機能も使用しないコンポーネント（例：`<MarkdownRenderer>`）は、一般的に `'use client'` でマークすべきではありません。マークしないことにより、サーバコンポーネントから使用されるときにはサーバ上でのみレンダーされ、クライアントコンポーネントから使用されるときにはクライアントバンドルに含まれるようになります。
* npm に公開されるライブラリは、クライアント専用の React 機能を使用しており、シリアライズ可能な props でレンダーできる React コンポーネントに、`'use client'` を含めるべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で `'use client'` ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm に公開する際は、`'use client'` となっているソースファイルは `'use client'` でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含むバンドルとは別になるようにしてください。
* npm に公開されるライブラリは、シリアライズ可能な props でレンダーでき、クライアント専用の React 機能を使用する React コンポーネントに、`'use client'` を含めるべきです。これにより、それらのコンポーネントをサーバコンポーネントからインポートしてレンダーすることが可能になります。さもないと、ユーザはライブラリコンポーネントを自分で `'use client'` ファイルにラップしなければなりません。これは面倒ですし、ライブラリが後でロジックをサーバに移動できなくなってしまいます。事前バンドル済のファイルを npm に公開する際は、`'use client'` となっているソースファイルは `'use client'` でマークされたバンドルに含まれるようにし、サーバ上で直接使用できるエクスポートを含んだバンドルとは別になるようにしてください。
* クライアントコンポーネントは、今後もサーバサイドレンダリング (server-side rendering, SSR) やビルド時の静的サイト生成 (static site generation, SSG) の一部としては実行されます。これらは、コンポーネントの初期レンダー出力を HTML に変換し、JavaScript バンドルがダウンロードされる前に表示を行えるようにするために使えます。しかし、データベースから直接読み取るといったサーバ専用機能は使用できません。
* `'use client'` のようなディレクティブは、ファイルの冒頭部分、あらゆるインポート文や他のコードの上になければなりません（ただしディレクティブの上にコメントは記載できます）。シングルクォートまたはダブルクォートで書かれていなければならず、バックティックは使えません。（`'use xyz'` というディレクティブ形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）
Expand Down
8 changes: 4 additions & 4 deletions src/content/reference/react/use-server.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ title: "'use server'"

### `'use server'` {/*use-server*/}

非同期関数の一番最初の部分に `'use server';` を追加することで、その関数がクライアントによって実行できることをマークします。
非同期 (async) 関数の冒頭に `'use server';` を追加することで、その関数がクライアントから実行できることをマークします。

```js
async function addToCart(data) {
Expand All @@ -36,13 +36,13 @@ async function addToCart(data) {
// <ProductDetailPage addToCart={addToCart} />
```

このような関数は、クライアントに渡すことができます。この関数がクライアント側で呼び出されると、渡された引数のシリアライズされたコピーを含んだネットワークリクエストをサーバに送信します。サーバ関数が値を返す場合、その値はシリアライズされてクライアントに返されます。
このような関数は、クライアントに渡すことができます。この関数がクライアント側で呼び出されると、渡された引数がシリアライズされ、それを含んだネットワークリクエストをサーバに送信します。このサーバ関数が値を返す場合、シリアライズされてクライアントに返されます。

または、ファイルの最上部に `'use server';` を追加して、そのファイル内のすべてのエクスポートが、クライアントコンポーネントファイルを含む任意の場所で使用できる非同期サーバ関数であるとマークします。
または、ファイルの最上部に `'use server';` を追加すると、そのファイル内のすべてのエクスポートが、クライアントコンポーネントファイルを含むあらゆる場所で使用できる非同期サーバ関数である、とマークします。

#### 注意点 {/*caveats*/}

* `'use server'` でマークされた関数に渡されるパラメータはクライアントが完全に制御できます。セキュリティのため、それらを常に信頼できない入力として扱い、適切に引数のバリデーションやエスケープを行うことを忘れないでください。
* `'use server'` でマークされた関数に渡される引数はクライアントで完全に制御可能です。セキュリティのため、引数を常に信頼できない入力として扱い、適切にバリデーションやエスケープを行うことを忘れないでください。
* クライアント側とサーバ側のコードを同じファイルに混在させることによる混乱を避けるため、`'use server'` はサーバ側のファイルでのみ使用できます。結果として得られる関数は、props を通じてクライアントコンポーネントに渡すことができます。
* 内部で用いられるネットワーク呼び出しは常に非同期であるため、`'use server'` は非同期関数でのみ使用できます。
* `'use server'` のようなディレクティブは、関数やファイルの冒頭、他のコード（インポートを含む）よりも上になければなりません（ただしディレクティブの上にコメントは記載できます）。シングルクォートまたはダブルクォートで書かれていなければならず、バックティックは使えません。（`'use xyz'` というディレクティブ形式は `useXyz()` というフックの命名規則に多少似ていますが、これは偶然です。）

0 comments on commit 91bb5b7

Please sign in to comment.