前端渲染方式全景概览
核心定义：前端渲染的本质，在于页面 HTML 是在哪里、什么时候生成的。
| 渲染方式 | 简称 |
|---|---|
| 客户端渲染 | CSR |
| 服务端渲染 | SSR |
| 静态站点生成 | SSG |
| 增量静态生成 | ISR |
| 流式渲染 | Streaming SSR |
| 同构渲染 | Isomorphic |
| 客户端混合渲染 | Hybrid |
| 边缘渲染 | Edge Rendering |
客户端渲染 (CSR)
核心逻辑
简单来说，服务器只返回一个空的 HTML 骨架和必要的 JS 文件。浏览器下载后执行 JS，动态构建 DOM 并渲染页面。
HTML → JS → Render
典型方案
- React / Vue SPA 架构
- Vite / Webpack 打包工具
<div id="app"></div>
<script src="bundle.js"></script>
优势与局限
优势：前后端彻底分离，交互体验流畅，开发模式简单。
局限：首屏加载慢，SEO 效果差，白屏时间长。
适用场景：后台管理系统、内部工具等对 SEO 要求不高的应用。
服务端渲染 (SSR)
核心逻辑
服务端直接生成完整的 HTML 字符串返回给浏览器，浏览器可直接渲染内容。随后 JS 加载接管事件（Hydration）。
Server Render → HTML → Hydrate
典型方案
- Next.js (React)
- Nuxt (Vue)
- Vue SSR
关键点
Hydration（水合）：指在首次渲染完成后，将静态 HTML 转换为可交互的客户端应用的过程。
