預渲染
Nuxt 允許您在建置時預先渲染應用程式中的特定頁面。當請求這些頁面時，Nuxt 會提供預先建置的頁面，而不是即時產生它們。
基於爬蟲的預先渲染
使用 nuxi generate 指令，透過 Nitro 爬蟲來建置並預先渲染您的應用程式。此指令類似於將 nitro.static 選項設定為 true 的 nuxt build，或是執行 nuxt build --prerender。
這會建置您的網站，啟動一個 Nuxt 實例，並預設預先渲染根頁面 /，以及您網站中任何連結到的頁面、這些頁面連結到的任何頁面，依此類推。
npx nuxi generate
您現在可以將 .output/public 目錄部署到任何靜態託管服務，或是使用 npx serve .output/public 在本地預覽。
Nitro 爬蟲的工作原理
- 載入您應用程式根路由（
/）、~/pages目錄中任何非動態頁面，以及nitro.prerender.routes陣列中任何其他路由的 HTML。 - 將 HTML 和
payload.json儲存到~/.output/public/目錄，以進行靜態供應。 - 在 HTML 中找到所有錨點標籤（
<a href="...">），以導覽至其他路由。 - 對找到的每個錨點標籤重複步驟 1-3，直到沒有更多錨點標籤可以爬取為止。
了解這一點很重要，因為未連結到可被發現頁面的頁面無法自動預先渲染。
選擇性預先渲染
您可以在 nuxt.config 檔案中，手動指定 Nitro 將在建置期間擷取並預先渲染的路由，或忽略您不想要預先渲染的路由，例如 /dynamic。
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ["/user/1", "/user/2"],
ignore: ["/dynamic"],
},
},
});
您可以將此與 crawlLinks 選項結合使用，以預先渲染爬蟲無法發現的一組路由，例如您的 /sitemap.xml 或 /robots.txt。
export default defineNuxtConfig({
nitro: {
prerender: {
crawlLinks: true,
routes: ["/sitemap.xml", "/robots.txt"],
},
},
});
將 nitro.prerender 設定為 true 類似於將 nitro.prerender.crawlLinks 設定為 true。
最後，您可以使用 routeRules 手動設定此項。
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 },
},
});
作為簡寫方式，您也可以使用 defineRouteRules 在頁面檔案中設定此項。
<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>
這將被轉換為
export default defineNuxtConfig({
routeRules: {
"/": { prerender: true },
},
});
執行時預先渲染設定
prerenderRoutes
您可以在 Nuxt 上下文中於執行時使用此項，以新增更多要讓 Nitro 預先渲染的路由。
<script setup>
prerenderRoutes(["/some/other/url"]);
</script>
<template>
<div>
<h1>This will register other routes for prerendering when prerendered</h1>
</div>
</template>
prerender:routes Nuxt hook
這會在預先渲染之前呼叫，以註冊其他路由。
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 hook
這會在預先渲染期間針對每個路由呼叫。您可以使用此項來精細處理每個被預先渲染的路由。
export default defineNuxtConfig({
nitro: {
hooks: {
"prerender:generate"(route) {
if (route.route?.includes("private")) {
route.skip = true;
}
},
},
},
});