You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
*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.
*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.
### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
62
+
### React ツリーを HTML として Node.js の Readable ストリームにレンダーする {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/}
63
63
64
-
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:
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.
76
+
このストリームは、React コンポーネントの非インタラクティブな初期 HTML 出力を生成します。クライアント側では、サーバが生成した HTML の*ハイドレーション*を行い操作可能にするために、[`hydrateRoot`](/reference/react-dom/client/hydrateRoot)を呼び出す必要があります。
It will produce non-interactive HTML output of your React components.
31
+
これにより、React コンポーネントの非インタラクティブな HTML 出力が生成されます。
32
32
33
-
[See more examples below.](#usage)
33
+
[さらに例を見る](#usage)
34
34
35
-
#### Parameters {/*parameters*/}
35
+
#### 引数 {/*parameters*/}
36
36
37
-
*`reactNode`: A React node you want to render to HTML. For example, a JSX node like `<Page />`.
37
+
*`reactNode`: HTML にレンダーしたい React ノード。例えば、`<Page />` のような JSX ノード。
38
38
39
-
#### Returns {/*returns*/}
39
+
#### 返り値 {/*returns*/}
40
40
41
-
An HTML string.
41
+
HTML 文字列。
42
42
43
-
#### Caveats {/*caveats*/}
43
+
#### 注意点 {/*caveats*/}
44
44
45
-
*`renderToStaticMarkup`output cannot be hydrated.
45
+
*`renderToStaticMarkup`の出力に対してハイドレーションは行えません。
46
46
47
-
*`renderToStaticMarkup`has limited Suspense support. If a component suspends, `renderToStaticMarkup`immediately sends its fallback as HTML.
47
+
*`renderToStaticMarkup`のサスペンスに対するサポートは限定的です。コンポーネントがサスペンドすると、`renderToStaticMarkup`はそのフォールバックを HTML として直ちに出力します。
48
48
49
-
*`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)
49
+
*`renderToStaticMarkup`はブラウザで動作しますが、クライアントコードでの使用は推奨されません。ブラウザでコンポーネントを HTML にレンダーする必要がある場合は、[DOM ノードにレンダーしてその HTML を取得してください](/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code)。
50
50
51
51
---
52
52
53
-
## Usage {/*usage*/}
53
+
## 使用法 {/*usage*/}
54
54
55
-
### Rendering a non-interactive React tree as HTML to a string {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
55
+
### 非インタラクティブな React ツリーを HTML として文字列にレンダーする {/*rendering-a-non-interactive-react-tree-as-html-to-a-string*/}
56
56
57
-
Call `renderToStaticMarkup`to render your app to an HTML string which you can send with your server response:
57
+
`renderToStaticMarkup`を呼び出して、あなたのアプリを、サーバからのレスポンスとして送信できる HTML 文字列にレンダーします。
This will produce the initial non-interactive HTML output of your React components.
69
+
これにより、React コンポーネントの非インタラクティブな初期 HTML 出力が生成されます。
70
70
71
71
<Pitfall>
72
72
73
-
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.
73
+
このメソッドは、**ハイドレーションができない非インタラクティブな HTML をレンダーします**。これは、React をシンプルな静的ページジェネレータとして使用したい場合や、メールのような完全に静的なコンテンツをレンダーする場合に有用です。
74
74
75
-
Interactive apps should use [`renderToString`](/reference/react-dom/server/renderToString)on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)on the client.
The stream will produce non-interactive HTML output of your React components.
34
+
このストリームは、React コンポーネントの非インタラクティブな HTML 出力を生成します。
35
35
36
-
#### Parameters {/*parameters*/}
36
+
#### 引数 {/*parameters*/}
37
37
38
-
*`reactNode`: A React node you want to render to HTML. For example, a JSX element like `<Page />`.
38
+
*`reactNode`: HTML にレンダーしたい React ノード。例えば、`<Page />` のような JSX 要素。
39
39
40
-
#### Returns {/*returns*/}
40
+
#### 返り値 {/*returns*/}
41
41
42
-
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.
42
+
HTML 文字列を出力する [Node.js の Readable ストリーム](https://nodejs.org/api/stream.html#readable-streams)。結果として得られる HTML はクライアント上でハイドレーションすることはできません。
43
43
44
-
#### Caveats {/*caveats*/}
44
+
#### 注意点 {/*caveats*/}
45
45
46
-
*`renderToStaticNodeStream`output cannot be hydrated.
*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.
### 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*/}
58
+
### React ツリーを静的 HTML として Node.js の Readable ストリームにレンダーする {/*rendering-a-react-tree-as-static-html-to-a-nodejs-readable-stream*/}
59
59
60
-
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:
The stream will produce the initial non-interactive HTML output of your React components.
72
+
このストリームは、React コンポーネントの非インタラクティブな初期 HTML 出力を生成します。
73
73
74
74
<Pitfall>
75
75
76
-
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.
76
+
このメソッドは、**ハイドレーションができない非インタラクティブな HTML をレンダーします**。これは、React をシンプルな静的ページジェネレータとして使用したい場合や、メールのような完全に静的なコンテンツをレンダーする場合に有用です。
77
77
78
-
Interactive apps should use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)on the server and [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)on the client.
0 commit comments