預渲染

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
        }
      },
    },
  },
})