你了解 SSR、CSR、SSG 和 ISR 的区别吗？

介绍了服务端渲染 (SSR)、客户端渲染 (CSR)、静态站点生成 (SSG) 和增量静态再生 (ISR) 的概念及其区别。

服务端渲染 中等 渲染机制 渲染 框架

SSR (Server-Side Rendering, 服务端渲染)、CSR (Client-Side Rendering, 客户端渲染)、SSG (Static Site Generation, 静态站点生成) 和 ISR (Incremental Static Regeneration, 增量静态再生) 是现代前端开发的四种主要渲染策略，核心区别在于内容生成时机、方式及适用场景：

1. SSR (服务端渲染)

  • 定义：每次用户请求时，服务器动态生成完整 HTML 页面返回给客户端。
  • 特点：
    • 首屏加载快：浏览器直接渲染预先生成的 HTML。
    • 对 SEO 友好：搜索引擎能直接抓取完整内容。
    • 缺点：服务器压力大，每次请求都需实时渲染；交互性较差，需通过水合（hydration）激活交互逻辑。
  • 适用场景：电商平台、新闻网站等要求 SEO 和高首屏性能的动态内容站点。

2. CSR (客户端渲染)

  • 定义：服务器仅返回基础 HTML 结构和 JavaScript 脚本，由浏览器执行 JS 动态生成页面内容。
  • 特点：
    • 强交互性：适合复杂单页应用（SPA），可局部更新视图。
    • FP（First Paint）速度快：初始加载简单 HTML。
    • 缺点：首屏白屏时间长（需等待 JS 加载和执行）；SEO 不友好，内容依赖 JS 执行。
  • 适用场景：后台管理系统、实时协作工具等交互密集型应用。

3. SSG (静态站点生成)

  • 定义：在构建时预渲染所有页面为静态 HTML 文件，用户请求时直接返回。
  • 特点：
    • 极高性能：CDN 可缓存静态文件，访问速度快。
    • 高安全性：无服务器端动态逻辑。
    • 缺点：不适用频繁更新的动态内容；需重新构建更新。
  • 适用场景：博客、文档网站、营销页等内容稳定的站点。

4. ISR (增量静态再生)

  • 定义：扩展 SSG，允许在后台异步更新部分静态页面（定时刷新或在用户请求时触发更新）。
  • 特点：
    • 平衡性能与实时性：保留 SSG 高性能的同时支持增量内容更新。
    • 缺点：更新可能有延迟；需配置缓存策略。
  • 适用场景：电商商品页、新闻列表页等半动态内容。

关键对比

维度 SSR CSR SSG ISR
内容生成时机 服务端按请求动态生成 客户端执行 JS 生成 构建时预生成 初版预构建 + 后台增量更新
性能优势 首屏快 后续交互快 首次加载极快 首屏快且更新灵活
SEO 支持 ★★★ ★☆☆ ★★★ ★★★
动态内容能力 支持实时数据 高效处理动态交互 依赖构建更新 支持按需增量更新 
<!-- CSR 示例: 基础 HTML 依赖 JS 生成内容 -->
<!DOCTYPE html>
<html>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script> 
  </body>
</html>

<!-- SSG 示例: 构建时生成的静态页面 -->
<!-- 部署后直接访问生成的 index.html -->

场景选择建议

  • 需要丰富交互 → CSR（如 SPA 应用）。
  • 追求 SEO 和高首屏速度 → SSR（如博客、电商）。
  • 内容基本固定 → SSG（如文档站）。
  • 要求高性能但需部分动态更新 → ISR（如商品页）。