大部分为静态的网站

默认情况下，Nuxt 会在服务器端渲染页面，然后对整个页面进行水合。对于一个包含 95% 静态文本和图片的页面来说，这些用于水合的 JavaScript 大多是额外开销：它会延迟交互，并与内容争夺带宽和 CPU，从而可能影响移动端 PageSpeed 分数等指标。

Nuxt 提供了避免在不需要的地方承担这项开销的各项功能。本方案将它们结合起来：

1. 在构建时预渲染内容路由。
2. 使用 noScripts 路由规则，移除这些路由上的脚本。
3. 对需要服务器端渲染但不需要交互的组件使用服务器组件。
4. 对保留脚本的路由使用延迟水合，只有在需要时才为交互功能付出开销。

预渲染并移除脚本

对于完全没有客户端交互的路由，可以在 routeRules 中结合使用 prerender 和 noScripts：

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { prerender: true, noScripts: true },
    '/about': { prerender: true, noScripts: true },
  },
})

这些路由会在构建时渲染为纯 HTML，渲染后的页面会省略 Nuxt 入口脚本、导入映射、负载脚本和 JS 资源提示。CSS 仍会被包含。最终页面实际上几乎没有 JavaScript 成本。

导航到和离开无脚本路由

由于 noScripts 页面没有客户端路由器，因此每次导航到此类页面或从此类页面离开，都会进行整页加载。Nuxt 会为你处理这两个方向：

• 从脚本路由导航到 noScripts 路由（使用 navigateTo、<NuxtLink> 或 router.push）会触发文档加载，因此目标页面会由服务器以无脚本方式提供，而不是由客户端路由器渲染。
• 由于这些路由永远不会在客户端渲染，当覆盖它们的路由规则可以在构建时解析时，它们的页面组件会从客户端 bundle 中移除。
• 脚本页面和无脚本页面都会生成声明式的 speculation rules 标签，因此支持此功能的浏览器会在用户点击链接之前预取并预渲染目标页面。这不会在页面本身运行任何 JavaScript，并且这些规则的作用域限定为你的页面路由，因此指向 /logout 等服务器路由的链接永远不会被推测性获取。

启用实验性的 view transitions后，这些页面还会选择加入跨文档 view transitions，因此整页导航会以动画形式呈现，而不是出现闪烁：

export default defineNuxtConfig({
  experimental: {
    viewTransition: true,
  },
})

用于服务器渲染组件的小岛

静态页面的某些部分仍然适合使用背后具有真实逻辑的组件：渲染后的 Markdown、语法高亮代码、CMS 内容。对于这些内容，请使用服务器组件。它们在服务器上渲染，其依赖项永远不会进入客户端构建包：

-| app/
---| components/
-----| HighlightedMarkdown.server.vue

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <HighlightedMarkdown :markdown="post.body" />
  </article>
</template>

这样的静态小岛在 noScripts 路由上也能正常工作，因为它们的 HTML 会在渲染时嵌入。

<template>
  <div>
    <HeroSection />
    <!-- 永远不需要变为可交互的静态内容 -->
    <LazyTestimonials hydrate-never />
    <!-- 仅在滚动到视口内时进行 Hydration -->
    <LazyNewsletterSignup hydrate-on-visible />
    <!-- 浏览器空闲时进行 Hydration -->
    <LazyCookieBanner hydrate-on-idle />
  </div>
</template>

export default defineNuxtConfig({
  routeRules: {
    // 纯内容：预渲染，不包含 JavaScript
    '/': { prerender: true, noScripts: true },
    '/blog/**': { prerender: true, noScripts: true },
    // 包含交互式组件的页面：预渲染，保留脚本
    '/contact': { prerender: true },
  },
})