预渲染、服务端渲染、客户端渲染、SSR、SSG、ISR、CSR 你都梳理清楚了吗？

Lem92
206 阅读3分钟

这是前端开发中最常被混淆的一组概念，尤其是在使用 Next.js 这样的框架时。我们来彻底梳理清楚它们之间的区别与关系，并通过图表和类比帮助理解。

🧠 一张图看清概念关系

                         ┌──────────────────────┐
                         │     渲染策略（大类）    │
                         └──────────────────────┘
                                   │
         ┌────────────────────────-┼────────────────────────┐
         │                         │                        │
 ┌───────────────────────┐   ┌──────────────────┐       ┌─────────────┐
 │ 预渲染 (Pre-rendering) │   │   客户端渲染 (CSR) │       │  混合模式    │
 └───────────────────────┘   └──────────────────┘       └─────────────┘
         │
 ┌───────┼──────────────┐
 │                      │
SSG (静态生成)     SSR (服务端渲染)
 │                      │
ISR（增量静态生成）   （SSR 不缓存）

1️⃣ 渲染方式总览

渲染方式是否预渲染HTML 生成时机数据是否实时SEO 支持是否依赖服务器
SSG✅ 是构建时生成❌ 否✅ 好❌ 否（生成后是静态）
SSR✅ 是每次请求时服务端生成✅ 是✅ 好✅ 是
ISR✅ 是初次构建 + 间隔更新✅ 部分实时✅ 好❌（构建+缓存）
CSR❌ 否浏览器执行 JS 时渲染✅ 是❌ 差❌ 否

2️⃣ 各概念详细解释

✅ 预渲染（Pre-rendering）

  • 总称，指的是：在页面进入浏览器之前就生成 HTML。

  • 包括：

    • SSG（Static Site Generation）
    • SSR（Server Side Rendering）
    • ISR（Incremental Static Regeneration）

✅ SSG（Static Site Generation）= 静态生成

  • 在 构建时（next build） ，就将 HTML 生成好并写入硬盘。

  • 最适合内容固定的页面（如博客、产品介绍页）。

  • 特点：

    • 🚀 快（CDN 缓存）
    • ❌ 数据不可实时
    • ✅ SEO 友好

✅ SSR（Server Side Rendering）= 服务端渲染

  • 在 每次请求时 动态生成 HTML 页面。

  • 适合实时内容、个性化数据页面。

  • 特点：

    • ⏳ 较慢（需等服务端响应）
    • ✅ 实时数据
    • ✅ SEO 友好
    • ❌ 服务端负载高

✅ ISR（Incremental Static Regeneration）= 增量静态生成

  • Next.js 独有，结合 SSG 和 SSR 的优点。

  • 页面构建后静态缓存，设置 revalidate 时间后自动再生。

  • 特点：

    • 🚀 快（读取缓存）
    • ✅ 半实时（定期更新）
    • ✅ SEO 友好
    • ✅ 可按需更新单页

✅ CSR（Client-Side Rendering）= 客户端渲染

  • 页面初始只返回空 HTML 和 JS。

  • 数据在浏览器加载并渲染。

  • 特点：

    • ❌ 初始加载慢
    • ✅ 实时
    • ❌ 不利 SEO（除非用 SSR 或 hydrate 技术）

3️⃣ 概念对比总结表

名称全称属于预渲染渲染时机SEO 友好数据更新方式是否支持缓存
SSGStatic Site Generation✅ 是构建时✅ 好❌ 不更新✅ 是（CDN）
SSRServer Side Rendering✅ 是每次请求✅ 好✅ 实时❌ 否
ISRIncremental Static Regeneration✅ 是构建时 + 定期更新✅ 好✅ 间隔更新✅ 是
CSRClient Side Rendering❌ 否客户端运行时❌ 差✅ 实时❌ 否

4️⃣ Next.js 中如何控制渲染方式

实现目标用法示例
SSGfetch(..., { cache: 'force-cache' })
SSRfetch(...)（默认行为，不加 cache）
ISRfetch(..., { next: { revalidate: 60 } })
CSR（不预渲染）在组件中用 useEffect 请求数据，仅客户端加载

✅ 推荐使用场景

页面类型推荐渲染方式原因
博客/文档/产品页SSG / ISR内容固定，性能要求高
用户个人中心SSR依赖登录态、个性化内容
实时行情、仪表盘CSR / SSR实时性强，不适合缓存
大流量营销页SSG / ISRCDN 缓存友好、性能最好

✅ 一句话总结：

预渲染 = SSG + SSR + ISR，是构建阶段或服务端先生成 HTML 的策略；CSR 是完全靠浏览器加载渲染的方式。
Next.js 让你可以按页面、按组件灵活选择渲染方式，实现性能与用户体验的平衡。

avatar
文章
阅读
粉丝