SPA、SSR、SSG：渲染方式怎么选

约 1300 字大约 4 分钟

2026-10-22

「首屏白屏怎么办」「SEO 不好怎么办」—— 这类问题的根源都是 页面在哪里渲染：浏览器里（SPA）、服务器实时（SSR）、构建时（SSG）。选错了模式，后面全是补丁。这篇讲清三种和选型。

一、SPA：浏览器全权渲染

单页应用（React/Vue 默认模式）：

浏览器下载一个空 HTML + 一大包 JS
  → JS 执行 → 请求接口 → 渲染页面内容

优点：交互体验好（无刷新切换）、服务器压力小（静态文件）、前后端彻底分离；
缺点首屏要等 JS 下载+执行+接口返回（白屏时间）、 SEO 差（爬虫看到的是空 HTML，虽然 Google 能跑 JS，但不保证）、弱网/低端机体验崩。

适合：后台管理系统、Web 应用（登录后才能用的那种）。 不适合：内容站、营销页（要 SEO、要首屏快）。

二、SSR：服务器实时渲染

用户请求 → 服务器拉数据 → 服务端把组件渲染成 HTML 字符串 → 返回完整页面 → 浏览器下载 JS 后「接管」（hydration） → 后续交互按 SPA 走。

Next.js（React）、Nuxt（Vue）是代表。

优点：首屏快（HTML 直接有内容）、SEO 友好（爬虫看得到）、个性化容易（每个请求都能按用户渲染）；
缺点：服务器有渲染压力（CPU 密集）、架构复杂（Node 服务常驻）、部署贵（要跑 Node 服务，不能纯静态托管）、 hydration 有「双端一致性」坑。

适合：电商详情页（个性化价格）、资讯站（SEO+实时数据）、任何「首屏快 + 内容动态 + SEO」三者都要的场景。

三、SSG：构建时渲染

构建阶段就把每个页面渲染成静态 HTML：

npm run build
  → 遍历所有路由 → 服务端渲染一遍 → 输出 /about/index.html …
  → 部署成纯静态文件

用户访问 = 下载现成 HTML。本站（VuePress）就是纯 SSG。

优点：最快的首屏（CDN 直接吐 HTML）、最好的 SEO、最便宜的部署（静态托管免费/极便宜）、最安全（没有运行时服务端）；
缺点：内容更新要重新构建（文章发布有几分钟延迟）、千人一面的内容（个性化靠客户端 JS 补齐）、页面极多时构建慢（几千页起步几分钟）。

适合：博客、文档站、营销页、企业官网 —— 内容不频繁变、且不需要按用户定制的页面。

四、演进：混着用才是现实

现代框架都是混合模式，一页一策略：

Next.js 14+ / Nuxt 3 的套路：

/                    → SSG（首页，构建时生成）
/blog/[slug]         → ISR（增量静态再生：静态+定时/按需重新生成）
/product/[id]        → SSR（详情页，按用户/实时价格渲染）
/dashboard           → CSR（登录后的应用，纯客户端渲染）

ISR（Incremental Static Regeneration） 是 SSG 的改良：页面静态托管，但后台可以按需/定时重新生成（比如文章更新后 10 秒内自动重建那一页）。兼顾了「静态的快」和「内容的鲜」。本站没上 ISR —— 静态站没有这个机制，靠「改完 push，CI 自动重建」达到同样效果（反正更新频率低）。

五、选型决策

这个页面的内容是？
  ├─ 所有人都一样，不常变 → SSG（默认选它，最快最省）
  ├─ 所有人一样，但要求实时 → ISR / SSR
  ├─ 因人而异（登录态、地域、购物车） → SSR
  └─ 纯交互应用，内容无所谓 SEO → SPA（CSR）

对照本站：

文章页 → SSG ✓（内容固定，构建时生成 40+ 页 HTML）；
搜索 → 客户端 JS + 构建时生成的索引（SSG 变体）；
不需要登录 → 不上 SSR。

个人开发者选型建议：内容站无脑 SSG（VitePress/VuePress/Astro），交互应用 SPA + 按需 SSR。别一上来就 Next.js 全 SSR —— 服务器成本和运维复杂度会把热情磨没。

六、SEO 与首屏的工程细节

不管哪种模式，这两件事都要做：

SSR/SSG 场景：

首屏 HTML 里直接有内容（爬虫和用户都受益）；
<title>、meta description、Open Graph 每页不同（本站 Plume 主题自动生成，配了 hostname 出 sitemap）；
结构化数据（JSON-LD）锦上添花。

SPA 场景（补救措施）：

预渲染（prerender）关键路由；
或者上 prerender.io 这类服务给爬虫喂静态版；
react-helmet/vue-meta 动态改 title（治标）。

七、本站的实践

技术客栈 = VuePress（SSG）：

git push → GitHub Actions 跑 vuepress build → 40 个静态 HTML → Pages 托管

好处兑现了：

Lighthouse 性能分 95+；
搜索引擎直接收录（sitemap.xml + feed.xml 都自动生成）；
部署零运维（没有服务器要管，没有运行时会挂）；
安全面极小（纯静态，没有攻击面）。

代价也认：发文章要等 CI 构建一两分钟（可接受）、没有「登录后看到不同内容」的能力（用不上）。

小结

三种渲染：SPA 浏览器干活、SSR 服务器实时干活、SSG 构建时干完活。内容站选 SSG，动态站选 SSR，后台应用选 SPA，混合场景上 ISR。本站就是 SSG 路线的实践样本 —— 快、省、稳，三样全占。