服务端渲染与静态站点（SSR / SSG / ISR）

各自是什么

模式	含义	HTML 何时生成
CSR（单页应用）	浏览器拉 JS，客户端拼接 DOM	首屏多为空壳，数据二次请求
SSR	每次请求在服务器渲染出完整 HTML	请求时
SSG	构建时预渲染成静态 HTML	构建时
ISR	静态页 + 按策略 增量再生成	构建时为首，之后后台按需刷新

典型栈：Next.js（React）、Nuxt（Vue）、Astro（多框架内容站）、Remix 等。

---

技术选型动机

诉求	更倾向
SEO、开放图谱、社交媒体预览	SSR 或 SSG
首屏时间敏感、弱网	SSR（首包含内容）或 SSG（CDN 直出）
内容大量重复、更新不频繁	SSG
列表极多、又不能每次请求都渲染	ISR 或「SSR + 缓存」
强交互、后台登录态为主	CSR 往往足够，SSR 增量成本高

---

优势（相对纯 CSR）

1. 首屏可见内容更快：HTML 直出，减少「白屏 + 瀑布请求」。
2. SEO / 爬虫友好：搜索引擎拿到结构化文本（仍需注意 hydration 与动态片段）。
3. 社交平台卡片：OG 标签在服务端填好更可控。

---

代价与注意点

1. 服务端算力与复杂度：Node 渲染集群、超时、缓存、降级 CSR。
2. 数据瀑布：SSR 若串行取数仍慢，需并行、边缘缓存、Streaming SSR。
3. 构建与部署：SSG 站点体积大时需增量构建、按路由分块。
4. ISR 需定义「何时失效」：过期策略、后台 webhook 触发重建。

---

简要结论

• 内容型 / 营销型站点：优先 SSG + CDN，更新频繁再上 ISR 或 SSR 缓存。
• 强个性化登录页：CSR 或 轻量 SSR 壳即可。
• 同一产品内：常见组合为 营销页 SSG + 应用区 CSR，由网关或反向代理按路径分流。