Nuxt4 SSG 静态生成与预渲染

Nuxt 默认是 SSR（每次请求服务器现渲染），但很多站点内容几乎不变（官网、博客、工具集合），这类站点更适合 SSG（静态站点生成）：构建时一次性把所有页面渲染成 HTML 文件，部署到任意静态空间即可，成本低、速度快、SEO 也好。

SSR 与 SSG 的区别

内容不变就选 SSG，省掉运行服务器，内容天天变就保留 SSR。

开启静态生成

Nuxt 通过 nitro.prerender 控制预渲染。告诉它「要预先生成哪些路由」，构建时就会把这些页面渲染成静态 HTML：

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      // 自动顺着页面间的链接爬取，生成所有能链到的页面
      crawlLinks: true,
      // 也可以显式列出关键路由，确保一定被生成
      routes: ['/', '/tools/case-converter'],
    },
  },
})

配置好后执行：

npm run generate

构建完成后，静态产物在 .output/public/ 目录，里面是每个路由对应的 .html 文件。直接把这个目录丢到任意静态托管就行。

动态路由怎么预渲染

动态路由（如 /tools/[slug]）页面内容由参数决定，预渲染时要让 Nuxt 知道有哪些 slug。两种方式：

1. crawlLinks: true：Nuxt 从首页开始顺着 <NuxtLink> 爬，自动收录所有能访问到的动态页。
2. 显式 routes：手动列出，适合入口不在站内链接里的页面。

以本教程配套的在线工具站为例，工具列表在代码里，构建时这样确保全部生成：

// nuxt.config.ts（节选）
import { tools } from './app/data/tools'

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/', ...tools.map((t) => `/tools/${t.slug}`)],
    },
  },
})

纯静态部署

SSG 产物是普通 HTML，不需要 Node 服务器：

• GitHub Pages：把 .output/public 推到 gh-pages 分支，仓库设置里开启 Pages。
• 对象存储 + CDN（OSS / S3 / R2）：上传目录，套一层 CDN。
• Nginx / 任意 Web 服务器：把目录作为根目录，配好 try_files 即可。

如果站点内容偶尔更新，重新 npm run generate 再上传一次即可，没有运行时代码要维护。

什么时候仍用 SSR

如果页面数据实时变化（如后台仪表盘、个性化信息流），SSG 不合适——构建时写死的数据会过时。这种情况保留默认 SSR，配合 服务端接口 动态取数，部署时则需要能跑 Node 的服务器，见 部署上线。