---
title: renderToPipeableStream
---
`renderToPipeableStream` は React ツリーをパイプ可能な [Node.js ストリーム](https://nodejs.org/api/stream.html)にレンダーします。
```js
const { pipe, abort } = renderToPipeableStream(reactNode, options?)
```
この API は Node.js 専用です。Deno やモダンなエッジランタイムなどの [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) を用いる環境では、[`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) を代わりに使用してください。
---
## リファレンス {/*reference*/}
### `renderToPipeableStream(reactNode, options?)` {/*rendertopipeablestream*/}
`renderToPipeableStream` を呼び出して、React ツリーを HTML として [Node.js ストリーム](https://nodejs.org/api/stream.html#writable-streams)にレンダーします。
```js
import { renderToPipeableStream } from 'react-dom/server';
const { pipe } = renderToPipeableStream(, {
bootstrapScripts: ['/main.js'],
onShellReady() {
response.setHeader('content-type', 'text/html');
pipe(response);
}
});
```
クライアント側では、このようにサーバ生成された HTML を操作可能にするために [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) を用います。
[さらに例を見る](#usage)
#### 引数 {/*parameters*/}
* `reactNode`: HTML へとレンダーしたい React ノード。例えば、`` のような JSX 要素です。これはドキュメント全体を表すことが期待されているため、`App` コンポーネントは `` タグをレンダーする必要があります。
* **省略可能** `options`: ストリーム関連のオプションが含まれたオブジェクト。
* **省略可能** `bootstrapScriptContent`: 指定された場合、この文字列がインラインの `
```
クライアント側では、ブートストラップスクリプトは [`hydrateRoot` を呼び出して `document` 全体のハイドレーションを行う](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)必要があります。
```js [[1, 4, ""]]
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
hydrateRoot(document, );
```
これにより、サーバで生成された HTML にイベントリスナが追加され、操作可能になります。
#### ビルド出力から CSS と JS のアセットパスを読み取る {/*reading-css-and-js-asset-paths-from-the-build-output*/}
ビルド後に、最終的なアセット URL（JavaScript や CSS ファイルなど）にはよくハッシュ化が行われます。例えば、`styles.css` が `styles.123456.css` になることがあります。静的なアセットのファイル名をハッシュ化することで、同じアセットがビルドごとに異なるファイル名になることが保証されます。これが有用なのは、ある特定の名前を持つファイルの内容が不変になり、静的なアセットの長期的なキャッシングを安全に行えるようになるためです。
しかし、ビルド後までアセット URL が分からない場合、それらをソースコードに含めることができません。例えば、先ほどのように JSX に `"/styles.css"` をハードコーディングする方法は動作しません。ソースコードにそれらを含めないようにするため、ルートコンポーネントが、props 経由で渡されたマップから実際のファイル名を読み取るようにすることができます。
```js {1,6}
export default function App({ assetMap }) {
return (
...
...
...
);
}
```
サーバ上では、`` のようにレンダーし、アセット URL を含む `assetMap` を渡します。
```js {1-5,8,9}
// You'd need to get this JSON from your build tooling, e.g. read it from the build output.
const assetMap = {
'styles.css': '/styles.123456.css',
'main.js': '/main.123456.js'
};
app.use('/', (request, response) => {
const { pipe } = renderToPipeableStream(, {
bootstrapScripts: [assetMap['main.js']],
onShellReady() {
response.setHeader('content-type', 'text/html');
pipe(response);
}
});
});
```
サーバで `` のようにレンダーしているので、クライアントでも `assetMap` を使ってレンダーしてハイドレーションエラーを避ける必要があります。このためには以下のように `assetMap` をシリアライズしてクライアントに渡します。
```js {9-10}
// You'd need to get this JSON from your build tooling.
const assetMap = {
'styles.css': '/styles.123456.css',
'main.js': '/main.123456.js'
};
app.use('/', (request, response) => {
const { pipe } = renderToPipeableStream(, {
// Careful: It's safe to stringify() this because this data isn't user-generated.
bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`,
bootstrapScripts: [assetMap['main.js']],
onShellReady() {
response.setHeader('content-type', 'text/html');
pipe(response);
}
});
});
```
上記の例では、`bootstrapScriptContent` オプションを使って`