Vue Academy · 课时

SSR、SSG 与 SPA 模式

Q: 「SSR、SSG 与 SPA 模式」这节课中我会学到什么？

ssr:true/false、Nitro 预渲染、generate 命令，以及按路由进行混合渲染 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

ssr:true/false、Nitro 预渲染、generate 命令，以及按路由进行混合渲染

SSR、SSG 与 SPA 模式 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

渲染模式概览

Nuxt 可以通过三种方式渲染您的 app：SSR（服务器为每个请求进行渲染）、SSG（在构建时预先生成 page）和 SPA（全部在浏览器中渲染）。您甚至可以针对不同路由混合使用这些模式。

SSR：默认模式

使用 ssr: true（默认值）时，服务器会为每个请求渲染 HTML，客户端再对其进行水合。这能带来更快的首次绘制和良好的 SEO，因为爬虫可以看到完整的标记。

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

SSR 的优势场景

SSR 适合经常变化或需要个性化的内容，例如仪表板、信息流以及价格实时变化的电子商务页面；在这些场景中，您希望每次请求都获得最新的 HTML。

SPA 模式

设置 ssr: false 会将 Nuxt 转为单页面 app：服务器发送一个空壳，浏览器负责渲染全部内容。这种模式更易于托管，但 SEO 较弱，首次绘制也更慢。

export default defineNuxtConfig({
  ssr: false
})

SPA 的适用场景

SPA 模式适合内部工具和登录后才能使用的 app；这些场景不需要 SEO，并且可以将其部署为静态文件，从任意 CDN 提供服务。

SSG：静态站点生成

运行 nuxt generate 会在构建时将每个 page 预渲染为静态 HTML。最终得到的是一个文件夹，其中的文件可以托管在任何地方，无需 Node 服务器。

npx nuxt generate
# outputs static HTML to .output/public

SSG 的适用场景

SSG 非常适合很少变化的内容，例如博客、文档和营销站点。page 加载速度极快，并且可以通过 CDN 低成本提供服务。

使用 routeRules 逐路由渲染

routeRules 配置可以根据路径模式设置每条路由的渲染模式。这就是混合渲染：同一个 app 的不同部分采用不同策略。

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

常用 routeRules 选项

prerender: true 会在构建时生成 page；ssr: false 会使其成为 SPA；swr: n 会将 SSR 结果缓存 n 秒（过期后重新验证）；redirect 会将用户发送到其他位置。

增量静态再生

isr 选项会在首次请求时预渲染并缓存输出，之后定期重新生成。它将 SSG 的速度与 SSR 的新鲜度结合起来，适合热门 page。

routeRules: {
  '/products/**': { isr: 600 }
}

选择策略

建议先使用 SSR，它能在 SEO 和交互性之间取得最佳默认平衡。对于静态内容使用 SSG，对于私有 app 使用 SPA；随着性能需求逐渐明确，再使用 routeRules 微调单条路由。

快速检查

测试您对渲染模式的掌握情况。

回顾

您已经学习了渲染模式：

SSR（默认）会为每个请求进行渲染：SEO 良好，首次绘制快速。
ssr:false 会为私有 app 提供 SPA。
nuxt generate 会生成静态 SSG 站点。
routeRules 支持混合渲染：可针对每条路由设置 prerender、swr、isr 和 ssr:false。

常见问题解答

「SSR、SSG 与 SPA 模式」课时是免费的吗？

是的 — 「SSR、SSG 与 SPA 模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「SSR、SSG 与 SPA 模式」这节课中我会学到什么？

ssr:true/false、Nitro 预渲染、generate 命令，以及按路由进行混合渲染你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「SSR、SSG 与 SPA 模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy