前端常见渲染方式总览
前端渲染 = 页面 HTML 在哪里、什么时候生成
| 渲染方式 | 简称 |
|---|---|
| 客户端渲染 | CSR |
| 服务端渲染 | SSR |
| 静态站点生成 | SSG |
| 增量静态生成 | ISR |
| 流式渲染 | Streaming SSR |
| 同构渲染 | Isomorphic |
| 客户端混合渲染 | Hybrid |
| 边缘渲染 | Edge Rendering |
一、CSR（Client Side Rendering）
原理
- 服务端返回 空 HTML + JS
- 浏览器下载 JS
- JS 运行后生成 DOM
HTML → JS → Render
实现
- React / Vue SPA
- Vite / Webpack
<div></div> <script src="bundle.js"></script>
优点
- 前后端分离
- 交互体验好
- 开发简单
缺点
- 首屏慢
- SEO 差
- 白屏时间长
适用
- 后台系统
- 内部系统
二、SSR（Server Side Rendering）
原理
- 服务端直接返回 完整 HTML
- 浏览器直接渲染
- JS 再接管（Hydration）
Server Render → HTML → Hydrate
实现
- Next.js
- Nuxt
- Vue SSR
优点
- 首屏快
- SEO 友好
缺点
- 服务端压力大
- 架构复杂
关键点
Hydration（水合）
三、SSG（Static Site Generation）
原理
- 构建时生成 HTML
- 部署为静态文件
Build Time → HTML
实现
- Next.js
getStaticProps - VitePress / VuePress
优点
- 性能极致
- 成本低
缺点
- 数据不实时
适用
- 文档
- 博客
- 官网
四、ISR（Incremental Static Regeneration）
原理
- 静态生成
- 按需更新部分页面
实现
revalidate: 60
优点
- 静态性能
- 动态数据
缺点
- 架构复杂
- 平台依赖
五、Streaming SSR（流式渲染）
原理
- HTML 分块返回
- 边生成边展示
Header → Main → Footer
实现
- React 18
- Suspense
优点
- 极快首屏
- 更好用户体验
缺点
- 实现复杂
六、同构渲染（Isomorphic）
一套代码，跑在客户端 + 服务端
- React / Vue 同构
- 核心是 SSR + CSR
七、Hybrid（混合渲染）
思路
- 不同页面用不同策略
| 页面 | 渲染方式 |
|---|---|
| 首页 | SSR |
| 列表 | SSG |
| 详情 | ISR |
| 后台 | CSR |
实现
- Next.js App Router
- Nuxt 3
八、Edge Rendering（边缘渲染）
原理
- 在 CDN 节点渲染
- 靠近用户
实现
- Vercel Edge
- Cloudflare Workers
优点
- 延迟极低
九、对比总结表（面试必背）
| 维度 | CSR | SSR | SSG |
|---|---|---|---|
| 首屏 | 慢 | 快 | 极快 |
| SEO | 差 | 好 | 好 |
| 成本 | 低 | 高 | 低 |
| 实时性 | 强 | 强 | 弱 |
| 复杂度 | 低 | 高 | 中 |
十、选型建议（真实项目）
- 后台系统 → CSR
- 内容站点 → SSG / ISR
- 电商首页 → SSR + Streaming
- 超高性能 → Edge
十一、面试 1 分钟标准回答
前端常见渲染方式包括 CSR、SSR、SSG 和 ISR。 CSR 在浏览器生成 HTML，交互好但首屏慢； SSR 在服务端生成 HTML，首屏快且 SEO 友好； SSG 在构建时生成静态页面，性能最好但不实时。 实际项目中通常采用混合渲染策略。
十二、一句话终极总结
渲染方式的本质，是'HTML 在哪里生成'。