流式SSR与Suspense：实现分块加载的渐进式页面渲染

利用Vue 3.3+的流式渲染API与Suspense结合，让服务器端异步组件在数据就绪后立即发送HTML块，提升TTFB感知速度。 · 难度：入门 · +10XP

流式SSR与Suspense

传统SSR需要等待所有异步组件解析完毕才发送HTML。Vue支持流式渲染：当Suspense内的异步组件解析后，立即将对应的HTML块推送到响应流中。本教程使用@vue/server-renderer的renderToNodeStream与pipe方法，构建一个Node.js http服务器，展示如何设置Suspense边界并处理流式传输中的错误。你会看到浏览器如何在服务器推送时逐步渲染页面。

import { renderToNodeStream } from '@vue/server-renderer'
import { createSSRApp } from 'vue'
import App from './App.vue'
async function handleRequest(req, res) {
  res.setHeader('Content-Type', 'text/html')
  res.write('')
  const app = createSSRApp(App)
  const stream = renderToNodeStream(app)
  stream.pipe(res, { end: false })
  stream.on('end', () => res.end(''))
}