diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index a4ab2e570..6a776463c 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -4,13 +4,13 @@ title: renderToNodeStream -This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +この API は、将来の React のメジャーバージョンで削除されます。代わりに [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) を使用してください。 -`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) +`renderToNodeStream` は、React のツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)にレンダーします。 ```js const stream = renderToNodeStream(reactNode) @@ -22,11 +22,11 @@ const stream = renderToNodeStream(reactNode) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `renderToNodeStream(reactNode)` {/*rendertonodestream*/} -On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response. +サーバ上において、`renderToNodeStream` を呼び出して、レスポンスにパイプすることができる [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 ```js import { renderToNodeStream } from 'react-dom/server'; @@ -35,33 +35,33 @@ const stream = renderToNodeStream(); stream.pipe(response); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +クライアント側では、このようにサーバ生成された HTML を操作可能にするために [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を用います。 -[See more examples below.](#usage) +[更に例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX 要素。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. +HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. +* このメソッドは、すべての[サスペンスバウンダリ](/reference/react/Suspense)が完了するまで、出力を返さず待機します。 -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +* React 18 時点において、このメソッドはすべての出力をバッファリングするため、実際にはストリームを使用する利点が得られません。これが、代わりに [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) に移行することが推奨される理由です。 -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +* 返されるストリームは、utf-8 でエンコードされたバイトストリームです。別のエンコーディングのストリームが必要な場合は、テキストのトランスコーディング用の変換ストリームを提供する [iconv-lite](https://www.npmjs.com/package/iconv-lite) のようなプロジェクトを参照してください。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} +### React ツリーを HTML として Node.js の Readable ストリームにレンダーする {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} -Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: +`renderToNodeStream` を呼び出して、サーバからのレスポンスにパイプできる [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 ```js {5-6} import { renderToNodeStream } from 'react-dom/server'; @@ -73,4 +73,4 @@ app.use('/', (request, response) => { }); ``` -The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +このストリームは、React コンポーネントの非インタラクティブな初期 HTML 出力を生成します。クライアント側では、サーバが生成した HTML の*ハイドレーション*を行い操作可能にするために、[`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を呼び出す必要があります。 diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md index 01ff17ee6..efb831b15 100644 --- a/src/content/reference/react-dom/server/renderToStaticMarkup.md +++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md @@ -4,7 +4,7 @@ title: renderToStaticMarkup -`renderToStaticMarkup` renders a non-interactive React tree to an HTML string. +`renderToStaticMarkup` は、非インタラクティブな React ツリーを HTML 文字列にレンダーします。 ```js const html = renderToStaticMarkup(reactNode) @@ -16,11 +16,11 @@ const html = renderToStaticMarkup(reactNode) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/} -On the server, call `renderToStaticMarkup` to render your app to HTML. +サーバ上において、`renderToStaticMarkup` を呼び出してアプリを HTML にレンダーします。 ```js import { renderToStaticMarkup } from 'react-dom/server'; @@ -28,33 +28,33 @@ import { renderToStaticMarkup } from 'react-dom/server'; const html = renderToStaticMarkup(); ``` -It will produce non-interactive HTML output of your React components. +これにより、React コンポーネントの非インタラクティブな HTML 出力が生成されます。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX ノード。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -An HTML string. +HTML 文字列。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `renderToStaticMarkup` output cannot be hydrated. +* `renderToStaticMarkup` の出力に対してハイドレーションは行えません。 -* `renderToStaticMarkup` has limited Suspense support. If a component suspends, `renderToStaticMarkup` immediately sends its fallback as HTML. +* `renderToStaticMarkup` のサスペンスに対するサポートは限定的です。コンポーネントがサスペンドすると、`renderToStaticMarkup` はそのフォールバックを HTML として直ちに出力します。 -* `renderToStaticMarkup` works in the browser, but using it in the client code is not recommended. If you need to render a component to HTML in the browser, [get the HTML by rendering it into a DOM node.](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code) +* `renderToStaticMarkup` はブラウザで動作しますが、クライアントコードでの使用は推奨されません。ブラウザでコンポーネントを HTML にレンダーする必要がある場合は、[DOM ノードにレンダーしてその HTML を取得してください](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code)。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Rendering a non-interactive React tree as HTML to a string {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/} +### 非インタラクティブな React ツリーを HTML として文字列にレンダーする {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/} -Call `renderToStaticMarkup` to render your app to an HTML string which you can send with your server response: +`renderToStaticMarkup` を呼び出して、あなたのアプリを、サーバからのレスポンスとして送信できる HTML 文字列にレンダーします。 ```js {5-6} import { renderToStaticMarkup } from 'react-dom/server'; @@ -66,12 +66,12 @@ app.use('/', (request, response) => { }); ``` -This will produce the initial non-interactive HTML output of your React components. +これにより、React コンポーネントの非インタラクティブな初期 HTML 出力が生成されます。 -This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails. +このメソッドは、**ハイドレーションができない非インタラクティブな HTML をレンダーします**。これは、React をシンプルな静的ページジェネレータとして使用したい場合や、メールのような完全に静的なコンテンツをレンダーする場合に有用です。 -Interactive apps should use [`renderToString`](/reference/react-dom/server/renderToString) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client. +インタラクティブなアプリでは、サーバ上で [`renderToString`](/reference/react-dom/server/renderToString) を、クライアント上で [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を使用すべきです。 diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md index ec3d58937..73924eb1d 100644 --- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md +++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md @@ -4,7 +4,7 @@ title: renderToStaticNodeStream -`renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) +`renderToStaticNodeStream` は、非インタラクティブな React ツリーを [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams) にレンダーします。 ```js const stream = renderToStaticNodeStream(reactNode) @@ -16,11 +16,11 @@ const stream = renderToStaticNodeStream(reactNode) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/} -On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams). +サーバ上において、`renderToStaticNodeStream` を呼び出して [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 ```js import { renderToStaticNodeStream } from 'react-dom/server'; @@ -29,35 +29,35 @@ const stream = renderToStaticNodeStream(); stream.pipe(response); ``` -[See more examples below.](#usage) +[さらに例を見る](#usage) -The stream will produce non-interactive HTML output of your React components. +このストリームは、React コンポーネントの非インタラクティブな HTML 出力を生成します。 -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX 要素。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. The resulting HTML can't be hydrated on the client. +HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。結果として得られる HTML はクライアント上でハイドレーションすることはできません。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `renderToStaticNodeStream` output cannot be hydrated. +* `renderToStaticNodeStream` の出力はハイドレーションすることができません。 -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. +* このメソッドは、すべての[サスペンスバウンダリ](/reference/react/Suspense)が完了するまで出力を返さずに待機します。 -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. +* React 18 時点において、このメソッドはすべての出力をバッファリングするため、実際にはストリームを使用する利点が得られません。 -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +* 返されるストリームは utf-8 でエンコードされたバイトストリームです。他のエンコーディングのストリームが必要な場合は、テキストのトランスコーディング用の変換ストリームを提供する [iconv-lite](https://www.npmjs.com/package/iconv-lite) のようなプロジェクトを参照してください。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Rendering a React tree as static HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/} +### React ツリーを静的 HTML として Node.js の Readable ストリームにレンダーする {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/} -Call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: +`renderToStaticNodeStream` を呼び出して、サーバからのレスポンスにパイプできる [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)を取得します。 ```js {5-6} import { renderToStaticNodeStream } from 'react-dom/server'; @@ -69,12 +69,12 @@ app.use('/', (request, response) => { }); ``` -The stream will produce the initial non-interactive HTML output of your React components. +このストリームは、React コンポーネントの非インタラクティブな初期 HTML 出力を生成します。 -This method renders **non-interactive HTML that cannot be hydrated.** This is useful if you want to use React as a simple static page generator, or if you're rendering completely static content like emails. +このメソッドは、**ハイドレーションができない非インタラクティブな HTML をレンダーします**。これは、React をシンプルな静的ページジェネレータとして使用したい場合や、メールのような完全に静的なコンテンツをレンダーする場合に有用です。 -Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) on the client. +インタラクティブなアプリでは、サーバ上で [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) を、クライアント上で [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を使用すべきです。 diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a982..4694f304e 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -4,13 +4,13 @@ title: renderToString -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` はストリーミングやデータ待機をサポートしていません。[代替手段を見る](#alternatives)。 -`renderToString` renders a React tree to an HTML string. +`renderToString` は React ツリーを HTML 文字列にレンダーします。 ```js const html = renderToString(reactNode) @@ -22,11 +22,11 @@ const html = renderToString(reactNode) --- -## Reference {/*reference*/} +## リファレンス {/*reference*/} ### `renderToString(reactNode)` {/*rendertostring*/} -On the server, call `renderToString` to render your app to HTML. +サーバ上において、`renderToString` を呼び出してあなたのアプリを HTML にレンダーします。 ```js import { renderToString } from 'react-dom/server'; @@ -34,31 +34,31 @@ import { renderToString } from 'react-dom/server'; const html = renderToString(); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +クライアント側では、このようにサーバ生成された HTML を操作可能にするために [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を用います。 -[See more examples below.](#usage) +[さらに例を見る](#usage) -#### Parameters {/*parameters*/} +#### 引数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* `reactNode`: HTML にレンダーしたい React ノード。例えば、`` のような JSX ノード。 -#### Returns {/*returns*/} +#### 返り値 {/*returns*/} -An HTML string. +HTML 文字列。 -#### Caveats {/*caveats*/} +#### 注意点 {/*caveats*/} -* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML. +* `renderToString` のサスペンスに対するサポートは限定的です。コンポーネントがサスペンドすると、`renderToString` はそのフォールバックを HTML として直ちに送信します。 -* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code) +* `renderToString` はブラウザでも動作しますが、クライアントコードでの使用は[推奨されません](#removing-rendertostring-from-the-client-code)。 --- -## Usage {/*usage*/} +## 使用法 {/*usage*/} -### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/} +### React ツリーを HTML として文字列にレンダーする {/*rendering-a-react-tree-as-html-to-a-string*/} -Call `renderToString` to render your app to an HTML string which you can send with your server response: +`renderToString` を呼び出して、あなたのアプリを、サーバからのレスポンスとして送信できる HTML 文字列にレンダーします。 ```js {5-6} import { renderToString } from 'react-dom/server'; @@ -70,35 +70,35 @@ app.use('/', (request, response) => { }); ``` -This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +これにより、React コンポーネントの初期の非インタラクティブな HTML 出力が生成されます。クライアント側では、サーバーが生成した HTML の*ハイドレーション*を行い操作可能にするために、[`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を呼び出す必要があります。 -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` はストリーミングやデータ待機をサポートしていません。[代替手段を見る](#alternatives)。 --- -## Alternatives {/*alternatives*/} +## 代替手段 {/*alternatives*/} -### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} +### サーバ上で `renderToString` からストリーム対応メソッドへの移行 {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} -`renderToString` returns a string immediately, so it does not support streaming or waiting for data. +`renderToString` は直ちに文字列を返すため、ストリーミングやデータの待機をサポートしていません。 -When possible, we recommend using these fully-featured alternatives: +可能な場合、全機能を備えた以下の代替手段の使用を推奨します。 -* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) +* Node.js を使用している場合は、[`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) を使用します。 +* Deno や、[Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) をサポートするモダンなエッジランタイムを使用している場合は、[`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) を使用します。 -You can continue using `renderToString` if your server environment does not support streams. +サーバ環境がストリームをサポートしていない場合は、`renderToString` の使用を続けても構いません。 --- -### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/} +### クライアントコードから `renderToString` を削除する {/*removing-rendertostring-from-the-client-code*/} -Sometimes, `renderToString` is used on the client to convert some component to HTML. +時に、`renderToString` はクライアント上で何らかのコンポーネントを HTML に変換するために使用されることがあります。 ```js {1-2} // 🚩 Unnecessary: using renderToString on the client @@ -108,7 +108,7 @@ const html = renderToString(); console.log(html); // For example, "..." ``` -Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM: +**クライアント上で** `react-dom/server` をインポートすることは、不必要にバンドルサイズが増加するため避けるべきです。ブラウザで何らかのコンポーネントを HTML にレンダーする必要がある場合は、[`createRoot`](/reference/react-dom/client/createRoot) を使用し、DOM から HTML を読み取ります： ```js import { createRoot } from 'react-dom/client'; @@ -122,17 +122,17 @@ flushSync(() => { console.log(div.innerHTML); // For example, "..." ``` -The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property. +[`flushSync`](/reference/react-dom/flushSync) の呼び出しは、[`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) プロパティを読み取る前に DOM が更新されるようにするために必要です。 --- -## Troubleshooting {/*troubleshooting*/} +## トラブルシューティング {/*troubleshooting*/} -### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### コンポーネントがサスペンドすると HTML に常にフォールバックが含まれる {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} -`renderToString` does not fully support Suspense. +`renderToString` はサスペンスを完全にはサポートしていません。 -If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [``](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads. +何らかのコンポーネントが（[`lazy`](/reference/react/lazy) で定義されている、データをフェッチしているなどの理由で）サスペンドした場合、`renderToString` はそのコンテンツがロードされるのを待ちません。代わりに、`renderToString` はその上にある最も近い [``](/reference/react/Suspense) バウンダリを見つけ、その `fallback` を HTML にレンダーします。コンテンツは、クライアントでコードがロードされるまで表示されません。 -To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. +これを解決するには、[ストリーミング対応の推奨ソリューション](#migrating-from-rendertostring-to-a-streaming-method-on-the-server)のいずれかを使用します。これらは、サーバ上でコンテンツがロードされるにつれて分割してコンテンツをストリームするため、クライアントコードがロードされる前に、ユーザはページが徐々に埋まっていくところを見ることができます。