ストリーミング

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

const stream = renderer.renderToStream(context)

返り値は Node.js stream (opens new window) です:

let html = ''

stream.on('data', data => {
  html += data.toString()
})

stream.on('end', () => {
  console.log(html) // 完全に描画
})

stream.on('error', err => {
  // エラーを処理 ...
})

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

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

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

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