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

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

#CSR（客户端渲染）

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

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

#SSR（服务端渲染）

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

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

#SSR 在 AI 应用中的优势

AI 应用通常同时包含“公开内容页面”和“登录后的交互式对话页面”。SSR 更适合处理首屏内容、分享页面和需要服务端准备的数据，主要优势包括：

1. 更快展示首屏内容：AI 产品首页、模型介绍页、Prompt 模板页或对话分享页可以在服务端直接生成 HTML。用户不必等待完整客户端 JavaScript 下载和执行后才看到内容，有利于改善首屏体验。
2. 更适合 SEO 和社交分享：公开的 AI 生成文章、知识库页面、Prompt 广场和对话分享页可以在服务端输出标题、摘要和正文，搜索引擎及社交平台更容易抓取预览信息。
3. 服务端聚合初始数据：服务端可以在一次请求中聚合用户信息、权限、会话标题、历史消息摘要和推荐配置，减少浏览器端多次请求带来的瀑布流，降低首屏等待时间。
4. 保护服务端凭证和业务逻辑：模型 API Key、Prompt 模板、权限判断、配额检查等逻辑可以放在服务端或 BFF 层，避免把敏感凭证和核心规则直接暴露给浏览器。
5. 更容易实现个性化首屏：服务端可以根据登录态、订阅套餐、地区、实验分组和历史偏好，直接返回对应的模型入口、功能开关和推荐内容。
6. 支持流式响应的服务端入口：SSR 可以负责输出对话页面的初始 HTML，用户发送消息后再通过 SSE、WebSocket 或流式 fetch 展示模型生成过程。首屏渲染和模型实时输出可以分别处理。

需要注意，SSR 不会让模型推理本身变快，也不应该把每次 Token 的生成都重新交给 SSR。实际架构通常是：

SSR：页面骨架、会话初始数据、权限和 SEO 内容
CSR：输入框、交互状态、流式消息、停止生成和重试
服务端 API：模型调用、鉴权、配额、会话持久化和安全控制

对于完全私有、强交互的工作台，SSR 的 SEO 收益较小；如果首屏还需要等待模型调用，服务端渲染可能增加 TTFB。此时可以只 SSR 页面骨架和必要的会话信息，把模型请求放到客户端或独立的流式 API 中，并结合缓存、Suspense、Streaming SSR 和边缘部署优化体验。

#SSG（静态站点生成）

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

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

#ISR（增量静态再生）

Next.js 提出的方案。

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

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

#注意事项

#Hydration Mismatch

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

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

#window 对象

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

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

#总结