v3
GitHub

预渲染

Nuxt 允许在构建时将页面静态渲染，以提升某些性能或 SEO 指标

Nuxt 允许从你的应用中选择特定页面在构建时渲染。Nuxt 会在请求时直接提供预构建的页面，而不是实时生成它们。

Read more in Nuxt 渲染模式.

基于爬虫的预渲染

使用nuxt generate命令通过Nitro爬虫来构建并预渲染你的应用。此命令类似于将nitro.static选项设置为true的nuxt build，或者运行nuxt build --prerender。

这将构建你的网站，启动一个 Nuxt 实例，并默认预渲染根页面/，以及该页面链接到的站点页面，接着这些页面又链接到的页面，如此类推。

npx nuxt generate

你现在可以将.output/public目录部署到任何静态托管服务，或通过npx serve .output/public在本地预览它。

Nitro 爬虫的工作流程：

  1. 加载应用根路由(/)的 HTML，你的~/pages目录中所有非动态页面的 HTML，以及nitro.prerender.routes数组中的任何其他路由。
  2. 将 HTML 和payload.json保存到~/.output/public/目录，以便静态提供。
  3. 在 HTML 中查找所有锚点标签（<a href="...">）以导航到其他路由。
  4. 对找到的每个锚点重复步骤 1-3，直到没有更多锚点可供爬取。

理解这一点非常重要，因为未被任何可发现页面链接的页面无法自动预渲染。

深入了解nuxt generate命令。

选择性预渲染

你可以在nuxt.config文件中手动指定Nitro在构建期间要抓取和预渲染的路由，或者忽略你不想预渲染的路由，例如/dynamic：

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ["/user/1", "/user/2"],
      ignore: ["/dynamic"],
    },
  },
});

你可以将其与crawlLinks选项结合使用，预渲染爬虫无法发现的一组路由，如/sitemap.xml或/robots.txt：

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/sitemap.xml", "/robots.txt"],
    },
  },
});

将nitro.prerender设置为true相当于将nitro.prerender.crawlLinks设置为true。

在 Nitro 文档中了解更多关于预渲染的内容。

最后，你也可以使用routeRules手动配置：

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 设置 prerender 为 true 以配置该路由被预渲染
    "/rss.xml": { prerender: true },
    // 设置为 false 以跳过该路由的预渲染
    "/this-DOES-NOT-get-prerendered": { prerender: false },
    // /blog 下的所有路由只要被其他页面链接都会被预渲染
    "/blog/**": { prerender: true },
  },
});
深入了解 Nitro 的routeRules配置。

作为简写，你也可以在页面文件中使用defineRouteRules配置。

此功能为实验性质，使用前需要在nuxt.config中启用experimental.inlineRouteRules选项。
pages/index.vue
<script setup>
// 也可以在页面级别设置
defineRouteRules({
  prerender: true,
});
</script>

<template>
  <div>
    <h1>主页</h1>
    <p>构建时预渲染</p>
  </div>
</template>

这会被转换为：

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/": { prerender: true },
  },
});

运行时预渲染配置

prerenderRoutes

你可以在运行时于Nuxt 上下文内使用它，添加更多 Nitro 需要预渲染的路由。

pages/index.vue
<script setup>
prerenderRoutes(["/some/other/url"]);
prerenderRoutes("/api/content/article/my-article");
</script>

<template>
  <div>
    <h1>这将在预渲染时注册其他路由</h1>
  </div>
</template>
Read more in prerenderRoutes.

prerender:routes Nuxt 钩子

此钩子在预渲染之前调用，用于注册更多路由。

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async "prerender:routes"(ctx) {
      const { pages } = await fetch("https://api.some-cms.com/pages").then(
        (res) => res.json(),
      );
      for (const page of pages) {
        ctx.routes.add(`/${page.name}`);
      }
    },
  },
});

prerender:generate Nitro 钩子

此钩子在预渲染过程中针对每个路由调用，可用于对每个被预渲染的路由做细粒度处理。

nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    hooks: {
      "prerender:generate"(route) {
        if (route.route?.includes("private")) {
          route.skip = true;
        }
      },
    },
  },
});