[toc]
一、CSR（客户端渲染）
CSR（Client-Side Rendering）是一种在浏览器端生成页面的技术。
工作原理
- 用户请求页面。
- 服务器发送最小 HTML 结构及 JavaScript 和 CSS 文件。
- 浏览器加载并执行 JavaScript，动态获取数据并渲染页面。
优点：
- 响应速度快：一旦HTML文件加载完成，浏览器就可以开始渲染页面，而不需要等待服务器返回完整的渲染结果。
- 动态性强：由于页面渲染在客户端进行，因此可以方便地实现各种动态交互效果。
- 前端部署简单：只需要一个静态服务即可部署前端代码，降低了部署成本。
缺点：
- 首屏加载时间长：由于需要加载整个JavaScript包，可能导致首屏加载时间较长，特别是对于复杂的单页应用（SPA）。
- 不利于SEO：搜索引擎爬虫可能无法很好地解析由JavaScript动态生成的页面内容，导致SEO效果较差。
- 白屏时间：在JavaScript代码加载和执行期间，用户可能会看到空白的页面，即所谓的“白屏时间”。
二、SSR（服务器端渲染）
SSR（Server-Side Rendering）是一种在服务器上生成完整 HTML 页面的技术。
工作原理
- 用户请求页面。
- 服务器获取数据并生成 HTML。
- 服务器将完整的 HTML 页面发送给浏览器。
- 浏览器显示页面内容，同时下载和执行 JavaScript 和 CSS 文件。
优点：
- 首屏加载速度快：由于服务器已经生成了完整的HTML页面，因此客户端可以直接显示这个页面，无需等待JavaScript加载和执行。
- SEO友好：搜索引擎爬虫可以很好地解析由服务器生成的HTML页面内容，有利于SEO优化。
- 适合复杂页面：对于包含大量数据、需要复杂计算的页面，SSR可以更好地处理并减少客户端的负载。
缺点：
- 服务器压力大：对于每个请求，服务器都需要重新渲染页面，这可能导致服务器压力过大。
- 开发限制：SSR要求开发者在编写Vue组件时，需要考虑到服务器端和客户端环境的差异，不能过度依赖客户端环境。
- 调试困难：SSR的调试过程相对复杂，需要同时考虑到服务器端和客户端的日志和错误信息。
三、SSG（静态站点生成）
SSG（Static Site Generation）是一种在构建阶段生成静态 HTML 文件的技术。
工作原理
- 在构建阶段，所有页面被预渲染为静态 HTML 文件。
- 用户请求页面时，服务器直接返回预渲染的 HTML 文件。
优点：
- 性能卓越：由于页面是静态的，因此无需等待服务器渲染，直接由浏览器加载显示，具有出色的性能。
- 安全性高：由于服务器只提供静态文件，因此降低了遭受攻击的风险。
- 适合内容型网站：对于内容更新不频繁的内容型网站（如博客、文档网站等），SSG是一个很好的选择。
缺点：
- 动态性受限：由于页面是静态的，因此难以实现复杂的动态交互效果。
- 构建时间长：对于大型站点，构建时间可能会比较长。
- 不适合频繁更新：对于需要频繁更新数据的网站，SSG可能不太适合，因为每次更新都需要重新构建并部署整个网站。