服务端渲染的流式响应与 HTTP/2 Server Push：利用 Vue SSR 的 renderToStream

演示如何使用 @vue/server-renderer 的 renderToNodeStream 实现流式 SSR，结合 HTTP/2 主动推送关键 CSS/JS，大幅提升首屏性能。 · 难度：入门 · +10XP

服务端渲染的流式响应与 HTTP/2 Server Push：利用 Vue SSR 的 renderToStream

传统 SSR 需等待整个组件树渲染完毕才发送 HTML，而流式 SSR 可以边渲染边推送。本教程教你用 Node.js Stream 实现渐进式 HTML 输出，并在发送头部时使用 HTTP/2 push 推送 app.js 与 style.css。还会处理流中的 slot 与 suspense 的边界情况。

import { createSSRApp } from 'vue'
import { renderToNodeStream } from '@vue/server-renderer'
import { createServer } from 'http2'
const server = createServer()
server.on('request', async (req, res) => {
  const app = createSSRApp(App)
  const stream = renderToNodeStream(app)
  res.writeHead(200, { 'content-type': 'text/html' })
  // push 关键资源
  res.push('/app.js', {}).end(scriptContent)
  stream.pipe(res)
})