#SSR、SSG、ISR 有什么区别？

聊聊服务端渲染的各种姿势

#CSR（客户端渲染）

流程：下载空 HTML -> 下载 JS -> 执行 JS -> 渲染 DOM

• 优点：服务器压力小，SPA 切换快
• 缺点：SEO 差，首屏白屏时间长

#SSR（服务端渲染）

流程：服务器运行 React -> 生成 HTML -> 浏览器显示 -> 下载 JS -> 水合（绑定事件）

• 优点：SEO 好，首屏快（FCP 极佳）
• 缺点：服务器计算压力大（TTFB 可能慢）
• 适合：千人千面、实时性强的内容（如微博 Feed 流）

#SSG（静态站点生成）

流程：构建时生成所有 HTML -> 用户访问直接返回（像 Nginx 托管静态文件）

• 优点：速度最快（可上 CDN），服务器零压力
• 缺点：构建时间长，数据无法实时更新
• 适合：文档站、博客、营销页面

#ISR（增量静态再生）

Next.js 提出的方案。

流程：构建时先生成静态页 -> 设置有效期（如 60s）-> 过期后第一个请求触发后台重新生成 -> 覆盖旧缓存

• 优点：兼顾 SSG 的快和一定灵活性
• 适合：不需要实时但也不能太旧的页面

#注意事项

#Hydration Mismatch

服务端生成的 HTML 必须和客户端首次渲染结果完全一致。

如果不一致（如 Date.now()），React 会报警告并强制回退到 CSR。

#window 对象

服务端没有 window / document，使用前必须判断：

if (typeof window !== 'undefined') {
  // 可以用了
}

#总结