Skip to content

Commit 66493d1

Browse files
sotayamashitakazupon
authored andcommitted
Translate streaming.md via GitLocalize (#22)
1 parent 8aa9472 commit 66493d1

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

Diff for: ja/streaming.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# ストリーミング
2+
3+
`vue-server-renderer` は、基本的なレンダラーとバンドルレンダラーの両方のためにストリームレンダリングをサポートします。`renderToString` の代わりに`renderToStream`を使用するだけです:
4+
5+
```js
6+
const stream = renderer.renderToStream(context)
7+
```
8+
9+
返り値は [Node.js stream](https://nodejs.org/api/stream.html) です:
10+
11+
```js
12+
let html = ''
13+
stream.on('data', data => {
14+
html += data.toString()
15+
})
16+
stream.on('end', () => {
17+
console.log(html) // render complete
18+
})
19+
stream.on('error', err => {
20+
// handle error...
21+
})
22+
```
23+
24+
## ストリーミングに関する注意事項
25+
26+
ストリームレンダリングモードでは、レンダラーが仮想 DOM ツリーを横断するときに、できるだけ早くデータを出力します。つまり、より早く「最初のチャンク」を取得し、それをクライアントにすばやく出力し始めることを意味します。
27+
28+
しかし、最初のデータチャンクが発行したときに子コンポーネントがまだインスタンス化されていないと、ライフサイクルフックが呼び出されることはありません。つまり、子コンポーネントがライフサイクルフック内のレンダリングコンテキストにデータを添付する必要がある場合、これらのデータはストリームの開始時に使用できません。アプリケーションは全体の HTML の表示の前に多くのコンテキスト情報(ヘッド情報やインラインに書かれたクリティカル CSS など)を表示する必要があるため、これらのコンテキストデータを使用する前にストリームの完了を待つ必要があります。
29+
30+
したがって、コンポーネントライフサイクルフックによって読み込まれたコンテキストデータに依存する場合は、ストリーミングモードを使用することは**推奨されません**

0 commit comments

Comments
 (0)