预渲染

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

Nuxt 允许在构建时渲染您应用程序中的选定页面。当请求这些页面时，Nuxt 将提供预构建的页面，而不是即时生成它们。

在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目录中任何非动态页面，以及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: {
    // Set prerender to true to configure it to be prerendered
    '/rss.xml': { prerender: true },
    // Set it to false to configure it to be skipped for prerendering
    '/this-DOES-NOT-get-prerendered': { prerender: false },
    // Everything under /blog gets prerendered as long as it
    // is linked to from another page
    '/blog/**': { prerender: true },
  },
})
阅读更多关于 Nitro 的routeRules配置。

作为简写，您还可以使用defineRouteRules在页面文件中配置此项。

此功能是实验性的，要使用它，您必须在nuxt.config中启用experimental.inlineRouteRules选项。
app/pages/index.vue
<script setup>
// Or set at the page level
defineRouteRules({
  prerender: true,
})
</script>

<template>
  <div>
    <h1>Homepage</h1>
    <p>Pre-rendered at build time</p>
  </div>
</template>

这将转换为

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

运行时预渲染配置

prerenderRoutes

您可以在Nuxt 上下文中的运行时使用此功能，为 Nitro 添加更多要预渲染的路由。

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

<template>
  <div>
    <h1>This will register other routes for prerendering when prerendered</h1>
  </div>
</template>
在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
        }
      },
    },
  },
})