一文搞懂SSR、SSG、CSR
一文搞懂SSR、SSG、CSR
先看名称来初步了解：SSR（服务器端渲染）、SSG（静态站点生成）和CSR（客户端渲染）
CSR（客户端渲染）
（CSR）是一种将网页最初作为空 HTML shell 传递给浏览器的技术。然后，客户端 JavaScript 动态获取数据并在浏览器中呈现页面。
Vue、react这些SPA都是属于CSR，特点：初始 HTML 几乎为空，由 JS 在浏览器中渲染内容
优点：
- 响应速度快：一旦HTML文件加载完成，浏览器就可以开始渲染页面，而不需要等待服务器返回完整的渲染结果。
- 动态性强：由于页面渲染在客户端进行，因此可以方便地实现各种动态交互效果。
- 前端部署简单：只需要一个静态服务即可部署前端代码，降低了部署成本。
缺点：
- 首屏加载时间长：由于需要加载整个JavaScript包，可能导致首屏加载时间较长，特别是对于复杂的单页应用（SPA）。
- 不利于SEO：搜索引擎爬虫可能无法很好地解析由JavaScript动态生成的页面内容，导致SEO效果较差。
- 白屏时间：在JavaScript代码加载和执行期间，用户可能会看到空白的页面，即所谓的“白屏时间”。
SSR（服务器端渲染）
（SSR）是一种在服务器上渲染网页，然后将完全渲染的 HTML 页面发送到客户端浏览器的技术。
Next.js、Nuxt.js这种都是SSR，特点：动态生成 HTML（每次请求都生成）
优点：
- 首屏加载快（HTML 直接返回）
- SEO 友好（搜索引擎可以直接抓取内容）
- 可动态生成内容（比如根据请求参数或用户登录状态）
缺点：
- 服务器负载大（每次请求都要渲染页面）
- 响应时间受限于网络与服务器性能
- 实现与部署较复杂（需要运行 Node.js 服务器）
SSG（静态站点生成）
（SSG）是一种在构建时生成网页并用作纯 HTML 文件的技术。
Hugo、Gatsby、hexo等这些都是SSG，特点：提前生成好所有 HTML 文件
优点：
- 性能极好（CDN 静态文件加载）
- 可离线部署，无需服务器逻辑
- 安全性高（没有后端执行环境）
缺点：
- 无法实时更新数据（需要重新构建）
- 不适合频繁变化的内容（如社交动态、个性化页面）