對于 vue-server-renderer 的基本 renderer 和 bundle renderer 都提供開箱即用的流式渲染功能。所有你需要做的就是，用 renderToStream 替代 renderToString：

const stream = renderer.renderToStream(context)

返回的值是 Node.js stream ：

let html = ''


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


stream.on('end', () => {
  console.log(html) // 渲染完成
})


stream.on('error', err => {
  // handle error...
})

流式傳輸說明 (Streaming Caveats)

在流式渲染模式下，當 renderer 遍歷虛擬 DOM 樹 (virtual DOM tree) 時，會盡快發(fā)送數(shù)據(jù)。這意味著我們可以盡快獲得"第一個 chunk"，并開始更快地將其發(fā)送給客戶端。

然而，當?shù)谝粋€數(shù)據(jù) chunk 被發(fā)出時，子組件甚至可能不被實例化，它們的生命周期鉤子也不會被調(diào)用。這意味著，如果子組件需要在其生命周期鉤子函數(shù)中，將數(shù)據(jù)附加到渲染上下文 (render context)，當流 (stream) 啟動時，這些數(shù)據(jù)將不可用。這是因為，大量上下文信息 (context information)（如頭信息 (head information) 或內(nèi)聯(lián)關(guān)鍵 CSS(inline critical CSS)）需要在應用程序標記 (markup) 之前出現(xiàn)，我們基本上必須等待流(stream)完成后，才能開始使用這些上下文數(shù)據(jù)。

因此，如果你依賴由組件生命周期鉤子函數(shù)填充的上下文數(shù)據(jù)，則不建議使用流式傳輸模式。