渲染模式

1. 客户端渲染（CSR）
2. 服务端渲染（SSR）
3. 静态站点生成（SSG）
4. 混合渲染（Hybrid Rendering）
5. 流式服务端渲染（Streaming SSR）

指标	CSR	SSR	SSG	Streaming SSR
TTFB	50ms	300-800ms	20ms	100ms（分块）
FCP	JS 下载后	立即	立即	分块逐步
动态数据	✅	✅	❌	✅渐进式
服务端负载	低	高	零	中等
适用场景	Dashboard	电商详情页	博客	长列表页

客户端渲染（CSR）

1. 服务端返回空 HTML 骨架
2. 浏览器下载 JS Bundle 后执行 React/Vue 挂载
3. 数据通过客户端 API 动态获取

性能：

• FCP：1.5s+（依赖 JS 下载）
• TTI：2s+（需等待 React 初始化）
• SEO：需要动态渲染器支持

适用场景：

• 后台管理系统（如数据看板）
• 需要复杂客户端交互的应用

服务端渲染（SSR）

1. 使用 ReactDOMServer.renderToString() 生成初始 HTML
2. 服务端数据预取（Next.js getServerSideProps）
3. 客户端 Hydration 过程

性能：

• TTFB：800ms（服务端计算时间）
• FCP：1.2s（直接输出 HTML）
• Hydration 时间：额外 500ms

静态站点生成（SSG）

1. 构建时数据预取（Next.js getStaticProps + getStaticPaths）
2. 内容版本化（哈希指纹资源文件）
3. 增量静态再生（revalidate 参数控制更新周期）

性能：

• TTFB：< 50ms（CDN 边缘节点响应）
• FCP：200-500ms（预生成完整 HTML + 内联关键 CSS）
• TTI：1s（仅需加载轻量客户端 JS）

如何选择？

1. SEO 关键路径 → SSR/SSG
2. 动态个性化内容 → SSR + Client-side Fetch
3. 纯静态内容 → SSG + CDN
4. 复杂交互视图 → CSR + Skeleton
5. 混合内容 → Streaming SSR + Partial Hydration