nuxt3 routeRules 配置教程 混合渲染配置

混合渲染允许每个路由使用不同的缓存规则路由规则并决定服务器应如何响应给定 URL 上的新请求。

以前，Nuxt应用程序和服务器的每个路由/页面都必须使用相同的渲染模式，通用或客户端。在各种情况下，某些页面可以在构建时生成，而其他页面则应在客户端呈现。例如，考虑一个带有管理部分的内容网站。每个内容页面都应该主要是静态的，并生成一次，但管理部分需要注册，并且行为更像是动态应用程序。

export default defineNuxtConfig({
  routeRules: {
    // Homepage pre-rendered at build time
    '/': { prerender: true },
    // Product page generated on-demand, revalidates in background
    '/products/**': { swr: 3600 },
    // Blog post generated on-demand once until next deploy
    '/blog/**': { isr: true },
    // Admin dashboard renders only on client-side
    '/admin/**': { ssr: false },
    // Add cors headers on API routes
    '/api/**': { cors: true },
    // Redirects legacy urls
    '/old-page': { redirect: '/new-page' }
  }
})

路由规则

• redirect: string - 定义服务器端重定向。
• ssr: boolean - 禁用应用各部分的服务器端渲染，并使其仅使用 SPAssr: false
• cors: boolean - 自动添加 cors 标头 - 您可以通过覆盖cors: trueheaders
• headers: object - 将特定标题添加到网站的各个部分 - 例如，您的资产
• swr: number|boolean - 将缓存标头添加到服务器响应中，并将其缓存在服务器或反向代理上，以实现可配置的 TTL（生存时间）。Nitro 的预设能够缓存完整的响应。当 TTL 过期时，将发送缓存的响应，同时在后台重新生成页面。如果使用 true，则添加一个不带 MaxAge 的标头。node-serverstale-while-revalidate
• isr: number|boolean - 行为与此行为相同，只是我们能够在支持此功能的平台（当前为 Netlify 或 Vercel）上将响应添加到 CDN 缓存中。如果使用，则内容将一直保留，直到下一次在 CDN 中部署。swrtrue
• prerender:boolean - 在构建时预渲染路由，并将它们作为静态资产包含在构建中
• experimentalNoScripts: boolean - 禁用 Nuxt 脚本和站点部分的 JS 资源提示的呈现。

只要有可能，路由规则将自动应用于部署平台的原生规则，以获得最佳性能（目前支持 Netlify 和 Vercel）