😉 记录学习，分享经验，持续成长
前端渲染模式
部署一个Web页面，都会面临如何渲染页面的选择：
- 应该在 浏览器端 运行代码（CSR）？
- 应该在 服务器端 进行渲染（SSR）？
- 或者在 构建阶段 预渲染页面（SSG或预渲染）？
1. CSR (客户端渲染, Client-Side Rendering)
🚀 流程
-浏览器请求 HTML（只包含``` <div id="app"></div> ```之类的占位符）。
-下载 JS 文件（前端代码很大，需要时间下载）。
-执行 JS，生成 DOM 结构（JS 解析和运行也需要时间）。
-渲染 UI（最后才让用户看到完整页面）。
优缺点
✅ 优点
- 效率高，一次加载后无需重复加载全部页面(基于单页面，不会出现多个.html 文件，index.html, home.html)
- 渲染逻辑由前端控制，开发进度快
- 系统具有更好的交互性
❌ 缺点
- 首屏加载比较慢（需要等待 JS 执行完成）
- 搜索引擎 SEO 不亲善，因为最初的 HTML 内容少
使用场景
- 需要很多动态交互的 SPA 应用
- 不重视 SEO，如互动网站、交流平台
2. SSR (服务器渲染, Server-Side Rendering)
- 在 服务器中渲染 HTML ，并将完整的 HTML 返回给浏览器
- 并非一次性生成全部页面，每次访问需要完整运行代码（动态生成 HTML，返回新的HTML 出现多个.html文件）
优缺点
✅ 优点
- 首屏加载快，没有 CSR 的等待 JS 执行渲染间隙
- 亲善 SEO ，因为每次访问都有完整的 HTML 为搜索引擎爬取
❌ 缺点
- 服务器消耗资源，每次请求都需要运行渲染
- 整体请求时间比 CSR 长
1）、服务器消耗资源，每次请求都需要运行渲染？
举个🌰：
在 SSR（服务器渲染）模式下，每当用户请求一个页面，服务器就需要执行 JavaScript 代码，
服务器再次返回一个 全新的 HTML，然后再返回给浏览器。
```
CSR（客户端渲染）是如何工作的？
🚀 只请求 & 更新需要的数据，而不是整个 HTML
1️⃣ 你访问 example.com/home
服务器只返回 一个 HTML 文件，并附带 JS 代码（Vue/React）。
这个 HTML 几乎是空的，主要靠 JS 运行后动态填充内容。
2️⃣ 你点击一个链接去 example.com/about
不会发起新的 HTML 请求！
Vue Router/React Router 拦截这个点击事件，用 JS 变更 URL。
前端代码 通过 fetch() 或 AJAX 获取 about 页面的数据。
只修改页面上的内容，而不刷新整个网页。
👉 特点：页面跳转时，不重新请求整个 HTML，只更新部分数据和 DOM。
```
2）、整体请求时间比 CSR 长？
举个🌰：
SSR 的首屏渲染比 CSR 快（因为服务器已经帮忙生成 HTML）
SSR 的整体请求时间比 CSR 长（因为服务器需要计算 HTML）
使用场景
- 重视 SEO 的网站（毕业业企、文章类网站）
- 首屏加载速度要求高
3. SSG (静态站点生成, Static Site Generation)
- 在 构建阶段 下预先生成好 HTML 文件
- 部署后，直接返回静态 HTML ，没有需要加载的渲染逻辑
优缺点
✅ 优点
- 构建好后页面加载极快（CDN 直接处理 HTML）
- 系统繁忙度低，不需要在服务器计算
❌ 缺点
- 不适合动态数据更新频繁的场景
使用场景
- 内容基本固定、不常变化的网站
- 博客
- 文档网站（VuePress、Docusaurus）
- 企业官网
4、预渲染
介于 CSR 和 SSG 之间。
使用工具（如 Puppeteer）在构建时执行 JavaScript 并生成 HTML 文件。
适用于 前端框架（Vue/React）但又需要 SEO。
优缺点
✅ 优点
-SEO 友好（预渲染出的 HTML 适合爬虫）。
-不影响前端框架的开发体验。
❌ 缺点
- 构建时间长，对于大规模站点可能不适用。
- 无法处理动态内容（例如个性化数据）。
使用场景
- 适用于 爬虫可见，但用户交互复杂 的页面
- 营销类网站（Landing Page）
- 部分内容动态但 SEO 重要的网站