Vue.js SSR 流式渲染 (Streaming)

對(duì)于 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...
})

流式傳輸說(shuō)明 (Streaming Caveats)

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

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

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