流式渲染 Streaming SSR
以下是关于流式渲染(Streaming SSR)的基本知识点总结:
一、流式渲染核心概念
1. 与传统SSR对比
维度 | 传统SSR | 流式SSR |
---|---|---|
响应方式 | 完整HTML生成后一次性返回 | 分块逐步返回HTML内容 |
首字节时间 | 较慢(需等待所有数据处理完成) | 极快(立即发送初始HTML结构) |
内存压力 | 高(需缓存完整页面) | 低(分块处理) |
用户体验 | 全有或全无 | 渐进式加载(骨架屏→内容填充→交互就绪) |
2. 核心优势
- 更早的FP/FCP:首字节到达时间缩短50-80%
- 更高的并发能力:服务器内存占用减少60%+
- 更好的用户感知:页面逐块加载的视觉反馈
- 动态优先级控制:关键内容优先发送
二、基础实现方案
1. React 流式实现
// 服务端代码(Node.js)
import { renderToPipeableStream } from 'react-dom/server';app.get('/stream', (req, res) => {const { pipe } = renderToPipeableStream(<App />,{bootstrapScripts: ['/main.js'],onShellReady() {res.setHeader('Content-type', 'text/html');pipe(res);}});
});// 客户端代码(选择性注水)
import { hydrateRoot } from 'react-dom/client';hydrateRoot(document.getElementById('root'),<App />
);
2. Vue 流式方案
// 使用@vue/server-renderer
import { renderToStream } from '@vue/server-renderer'const stream = renderToStream(app)stream.on('data', (chunk) => {res.write(chunk);
});stream.on('end', () => {res.end();
});
三、进阶优化策略
1. 动态优先级控制
// 关键内容优先发送
function App() {return (<Layout><Suspense fallback={<Skeleton />}><HeroSection /> {/* 优先渲染 */}</Suspense><Suspense fallback={null}><SecondaryContent /> {/* 后续渲染 */}</Suspense></Layout>);
}
2. 数据获取优化
// 服务端数据预取(React)
async function fetchData() {const [mainData, secondaryData] = await Promise.all([fetchMainData(), // 关键数据fetchSecondaryData() // 非关键数据]);return { mainData