性能优化之SSR、SSG

一、SSR和SSG介绍

        SSR（Server-Side Rendering，服务端渲染）和 SSG（Static Site Generation，静态站点生成）是现代前端框架（如 Next.js、Nuxt.js、Gatsby）的核心渲染策略，用于解决传统 CSR（客户端渲染）的 SEO 弱、首屏慢等问题。以下是关键对比与使用指南：

1、两者核心差异

特性	SSR (服务端渲染)	SSG (静态站点生成)
渲染时机	每次请求时实时渲染	构建时预渲染所有页面
数据实时性	高（请求时获取最新数据）	低（构建后数据即固定）
适用场景	用户仪表盘、实时数据页	博客、文档、营销页
服务器压力	高（需处理每次渲染）	极低（直接托管静态文件）
部署复杂度	需 Node.js 服务器	可托管至 CDN（如 Netlify/Vercel）
典型框架	Next.js (getServerSideProps)	Next.js (getStaticProps)、Gatsby

2、工作流程对比

 SSR 流程

SSG 流程

 

3、两者如何选择？

选 SSR 当：

• 页面内容每次请求都变化（如用户个人中心）

• 需要实时数据（股票行情、聊天消息）

• 对 SEO 要求高且内容动态（电商商品详情页）

选 SSG 当：

• 内容长期不变（技术文档、博客文章）

• 追求极限加载速度（通过 CDN 全球分发）

• 需降低服务器成本（无服务器端计算）

 4、混合场景：动态静态化

现在的框架支持混合渲染模式，例如：

• ISR (Incremental Static Regeneration，增量静态再生)
  （ISR 是由 Next.js 框架提出的核心功能，用于扩展 SSG（静态站点生成）的能力，实现动态内容与静态性能的平衡）

// 以Next.js 示例：每60秒重新生成页面
export async function getStaticProps() {const res = await fetch('https://api.example.com/data');return { props: { data: res.json() },revalidate: 60 // 秒};
}

👆🏻上面的代码 意思是：

首次访问 → 返回静态页面

60秒内新请求 → 立即返回旧静态页面（后台触发重新生成）

60秒后访问 → 返回新生成的页面

• 按需生成 (On-demand Revalidation)

// 手动触发页面更新（如 CMS 内容变更时）
await res.revalidate('/path-to-update');

5、经典问题解决方案

问题	SSR 方案	SSG 方案
动态数据更新	每次请求实时渲染	ISR + 按需重新生成
百万级页面生成	不适用	惰性生成（仅生成被访问的页面）
用户登录状态处理	在 getServerSideProps 读取 Cookie	客户端渲染动态部分（如 useEffect）
兼容旧版浏览器	输出完整 HTML 无需客户端 JS	同 SSR（预渲染 HTML 可降级使用）

6、性能优化技巧

• SSR 优化：

  • 使用流式渲染（React 18+ renderToPipeableStream）

  • 缓存渲染结果（Varnish/Redis 缓存匿名用户页面）

• SSG 优化：

  • 代码分割（动态加载非关键组件）

  • 图片优化（自动转换为 WebP 格式）

  • 预取数据（<link rel="preload"> 关键接口）

7、框架推荐

• React 生态：Next.js（SSR/SSG 最成熟）

• Vue 生态：Nuxt.js（支持 nuxt generate 静态化）

• 轻量化 SSG：Astro（按需激活交互，默认输出静态 HTML）

• 内容驱动：Gatsby（GraphQL 数据层 + 强大插件库）

💡 技术决策口诀：

• 数据变 → SSR

• 数据稳 → SSG

• 部分变/部分稳 → 混合渲染（ISR + SSR）

 

ps：知识学习记录，如有不严谨之处，欢迎交流！