SSR（Server-Side Rendering）和 SSG（Static Site Generation）是两种不同的前端渲染策略，主要区别在于HTML 生成的时机和方式。以下是它们的核心差异、优缺点及适用场景的对比：

一、核心区别：HTML 生成时机

二、性能与体验对比

三、优缺点与适用场景

1. SSR 的优缺点

• 优点：
  • 实时数据：每次请求都能获取最新数据（如用户个人信息、实时评论）。
  • SEO 友好：搜索引擎可直接抓取渲染后的 HTML。
  • 动态内容：适合频繁更新的页面（如电商商品详情页、社交媒体动态）。
• 缺点：
  • 服务器成本高：需维护长期运行的服务器，并发量大时需扩容。
  • 首屏速度依赖网络：用户需等待服务器渲染和数据请求。
• 适用场景：
  • 数据实时性要求高的页面（如 Dashboard、用户中心）。
  • 需要 SEO 但内容频繁更新的页面（如新闻详情页）。
  • 用户交互复杂、依赖服务端状态的应用（如在线游戏、协作工具）。

2. SSG 的优缺点

• 优点：
  • 极致性能：静态文件可缓存到 CDN，全球用户访问速度快。
  • 低成本：无需长期运行服务器，可部署到静态文件托管平台（如 Vercel、Netlify）。
  • 高并发：轻松应对百万级流量（如营销活动页、博客）。
• 缺点：
  • 数据时效性差：内容更新需重新构建部署。
  • 动态内容支持有限：不适合实时变化的内容（除非结合 ISR）。
• 适用场景：
  • 内容静态或更新频率低的页面（如博客、文档网站、企业官网）。
  • 需要 SEO 但数据变化少的页面（如产品介绍页、帮助中心）。
  • 需快速部署和扩展的应用（如活动页、临时网站）。

四、技术实现对比

五、混合方案：ISR（增量静态再生）

为弥补 SSG 数据时效性差的问题，部分框架（如 Next.js、Nuxt.js）支持 ISR（Incremental Static Regeneration）：

• 原理：在构建时生成静态 HTML，后续通过后台定时或触发机制重新生成部分页面，无需全量重建。
• 适用场景：适合数据定期更新但无需实时的场景（如电商商品列表、新闻聚合页）。

• 示例（Next.js）：

  export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  
  return {
    props: { products },
    revalidate: 60 * 60, // 每小时重新生成一次
  };
  }

六、如何选择？

根据以下因素决策：

1. 数据更新频率：

   • 实时更新 → SSR
   • 很少更新 → SSG
   • 定期更新 → SSG + ISR

2. SEO 需求：

   • 强需求 → SSR 或 SSG（优先 SSG，性能更佳）
   • 无需求 → CSR（客户端渲染）或 SSR

3. 服务器成本：

   • 预算有限 → SSG
   • 预算充足 → SSR

4. 用户体验：

   • 极致首屏速度 → SSG
   • 动态交互为主 → SSR

5. 开发复杂度：

   • 简单 → SSG
   • 复杂（如依赖服务端状态） → SSR

七、总结

实际项目中，也可根据页面特性混合使用（如首页 SSG + 详情页 SSR），最大化性能与灵活性。