一、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：知识学习记录，如有不严谨之处，欢迎交流！
