Skip to content

Translating ja/streaming.md into Japanese #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions ja/streaming.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# ストリーミング

`vue-server-renderer` は、基本的なレンダラーとバンドルレンダラーの両方のためにストリームレンダリングをサポートします。`renderToString` の代わりに`renderToStream`を使用するだけです:

```js
const stream = renderer.renderToStream(context)
```

返り値は [Node.js stream](https://nodejs.org/api/stream.html) です:

```js
let html = ''
stream.on('data', data => {
html += data.toString()
})
stream.on('end', () => {
console.log(html) // render complete
})
stream.on('error', err => {
// handle error...
})
```

## ストリーミングに関する注意事項

ストリームレンダリングモードでは、レンダラーが仮想 DOM ツリーを横断するときに、できるだけ早くデータを出力します。つまり、より早く「最初のチャンク」を取得し、それをクライアントにすばやく出力し始めることを意味します。

しかし、最初のデータチャンクが発行したときに子コンポーネントがまだインスタンス化されていないと、ライフサイクルフックが呼び出されることはありません。つまり、子コンポーネントがライフサイクルフック内のレンダリングコンテキストにデータを添付する必要がある場合、これらのデータはストリームの開始時に使用できません。アプリケーションは全体の HTML の表示の前に多くのコンテキスト情報(ヘッド情報やインラインに書かれたクリティカル CSS など)を表示する必要があるため、これらのコンテキストデータを使用する前にストリームの完了を待つ必要があります。

したがって、コンポーネントライフサイクルフックによって読み込まれたコンテキストデータに依存する場合は、ストリーミングモードを使用することは**推奨されません**。