流式渲染 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