前端渲染渲染方式都有哪些以及区别和实现
一、前端常见渲染方式总览（先给全景）
前端渲染 = 页面 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>
优点
缺点
适用
三、SSR（Server Side Rendering）
原理
- 服务端直接返回 完整 HTML
- 浏览器直接渲染
- JS 再接管（Hydration）
Server Render → HTML → Hydrate
实现
优点
缺点
关键点
Hydration（水合）
四、SSG（Static Site Generation）
原理
Build Time → HTML
实现
- Next.js
getStaticProps - VitePress / VuePress
优点
缺点
适用
五、ISR（Incremental Static Regeneration）
原理
实现
revalidate: 60
优点
缺点
六、Streaming SSR（流式渲染）
原理
Header → Main → Footer
实现
优点
缺点
七、同构渲染（Isomorphic）
一套代码，跑在客户端 + 服务端
- React / Vue 同构
- 核心是 SSR + CSR
八、Hybrid（混合渲染）
思路
| 页面 | 渲染方式 |
|---|
| 首页 | SSR |
| 列表 | SSG |
| 详情 | ISR |
| 后台 | CSR |
实现
九、Edge Rendering（边缘渲染）
原理
实现
- 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 在哪里生成”。
