预渲染
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 爬虫的工作原理：
- 加载您的应用程序根路由 (
/)、~/pages目录中的任何非动态页面以及nitro.prerender.routes数组中的任何其他路由的 HTML。 - 将 HTML 和
payload.json保存到~/.output/public/目录以静态提供。 - 在 HTML 中查找所有锚标签 (
<a href="...">) 以导航到其他路由。 - 对找到的每个锚标签重复步骤 1-3，直到没有更多的锚标签可供爬取。
理解这一点很重要，因为无法链接到可发现页面的页面无法自动预渲染。
另请参阅 api > commands > generate#nuxt-generate选择性预渲染
您可以手动指定在构建期间 Nitro 将获取和预渲染的路由，或在 nuxt.config 文件中忽略您不想预渲染的路由，如 /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: {
// 设置 prerender 为 true 以配置为预渲染
"/rss.xml": { prerender: true },
// 设置为 false 以配置为跳过预渲染
"/this-DOES-NOT-get-prerendered": { prerender: false },
// 只要从其他页面链接到，/blog 下的所有内容都会被预渲染
"/blog/**": { prerender: true },
},
});
作为简写，您还可以在页面文件中使用 defineRouteRules 配置此项。
<script setup>
// 或在页面级别设置
defineRouteRules({
prerender: true,
});
</script>
<template>
<div>
<h1>主页</h1>
<p>在构建时预渲染</p>
</div>
</template>
这将被转换为：
export default defineNuxtConfig({
routeRules: {
"/": { prerender: true },
},
});
运行时预渲染配置
prerenderRoutes
您可以在 Nuxt 上下文 中在运行时使用此选项为 Nitro 添加更多预渲染的路由。
<script setup>
prerenderRoutes(["/some/other/url"]);
prerenderRoutes("/api/content/article/my-article");
</script>
<template>
<div>
<h1>这将在预渲染时注册其他路由进行预渲染</h1>
</div>
</template>
prerender:routes Nuxt 钩子
在预渲染之前调用此钩子以注册其他路由。
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 钩子
在预渲染期间为每个路由调用此钩子。您可以使用此钩子对每个被预渲染的路由进行细粒度处理。
export default defineNuxtConfig({
nitro: {
hooks: {
"prerender:generate"(route) {
if (route.route?.includes("private")) {
route.skip = true;
}
},
},
},
});