CSR（Client-Side Rendering 客户端渲染）
核心框架：Vue, React, Angular
- 工作方式：浏览器向服务器发送请求 → 服务器返回 HTML/JS/CSS等文件 → 最后浏览器通过 JS 动态渲染生成 DOM → 浏览器再进行渲染。
- 优点：
- 交互流畅：可直接响应。
- 前后端分离：前端注重 UI，后端注重数据。
- 缺点：
- 首屏加载较慢：打开时需加载本身及第三方库，且需通过 JS 渲染。
- SEO 不太友好：DOM 结构通过 JavaScript 动态生成（注：目前爬虫普遍能支持爬取JS内容，情况有所改善）。
- 适用场景：后台管理系统（不需要 SEO，对首屏速度要求不高，能用就行）、其他单页应用开发。
SEO 的全称是 Search Engine Optimization, 搜索引擎优化。通俗点说，就是通过调整网站的内容和结构，让它在百度、Google 这些搜索引擎的搜索结果里排名更靠前，从而获得更多免费的流量。
SSR（Server-Side Rendering 服务端渲染）
核心框架：Next.js
- 工作方式：浏览器请求服务器 → 服务器处理接口（如有）并渲染成 HTML页面 → 返回 HTML 给浏览器 + 同时加载 JS/CSS → 执行水合。
- 优点：
- 首屏加载快：服务器已直接渲染好 HTML 页面。
- SEO 友好：能爬取到完整内容。
- 缺点：
- 开发成本高：通常需要全栈开发人员。
- 服务器压力大：所有渲染操作均在服务器进行。
- 适用场景：电商网站、博客官网首页等。
SSG（Static Site Generation 静态网站生成）
核心框架：Next.js, Astro
- 工作流程：
- 本地打包（如
npm run build），生成静态 HTML 文件（每个路由对应一个 HTML）。 - 部署到 CDN 或 Nginx 等服务器。
- 浏览器请求 → 服务器返回 HTML → 进行水合。
- 本地打包（如
- 优点：
- 首屏加载极快：通过 CDN 分发静态文件。
- 服务器压力小：CDN 承载请求，无需服务器执行操作。
- SEO 最优：HTML 文件内容完整。
- 缺点：
- 不适合动态数据：编译后为静态内容。
- 构建时间长：路由过多时（如 100 个路由需编译 100 个 HTML 文件）。
- 适用场景：大家看到的都是一样的->技术文档（如 Vue、React 文档）、静态营销页、静态新闻网站等。
Hydration（水合）
定义：指 HTML 静态内容通过 JavaScript 变成动态内容的结合阶段。
以 Next.js 为例，水合过程如下：
- 服务端：Next.js收到请求 → 服务器执行 React 组件代码获取数据 → 将组件渲染成静态 HTML 字符串并返回给浏览器。
- 浏览器（显示）：浏览器收到 HTML 后立刻解析并显示内容（此时点击按钮等交互无反应）。
- 浏览器（下载）：同时下载 JavaScript 文件（包括核心库、组件等代码）。
- 水合完成：JS 下载完成后，React 调用
hydrateRoot方法，比对真实 DOM 和虚拟 DOM。若结构一致，React 给真实 DOM 绑定事件监听器，此时可进行交互。
总结对比表
| 特性 | CSR (客户端渲染) | SSR (服务端渲染) | SSG (静态网站生成) |
|---|---|---|---|
| 首屏速度 | 慢 | 快 | 极快 |
| SEO 友好度 | 较差 | 好 | 最优 |
| 服务器压力 | 小 | 大 | 小 (主要靠 CDN) |
| 数据时效性 | 实时 | 实时 | 编译时固定 |
| 典型场景 | 后台管理、SaaS | 电商、新闻首页 | 文档、博客、营销页 |
