性能优化之SSR、SSG

news2025/7/23 6:04:11

一、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"> 关键接口）