Nuxt3部署Vercel后初始页面加载缓慢问题排查与解决咨询

我在Vercel上部署的Nuxt落地页存在偶发的初始加载缓慢问题，首页加载耗时过长，且几乎全部耗时来自站点主请求。观察到请求中存在X-Nitro-Prerender:/api/_content/query/oXVcX8nCZd.1697526020655.json，且始终出现X-Vercel-Cache: MISS缓存未命中情况。请问这是否是加载缓慢的原因？该如何解决？

配置文件 #

nuxt.config.ts #

import dynamicRoutes from './helpers/dynamicRoutes'

export default defineNuxtConfig({
    devtools: {enabled: process.env.NODE_ENV !== 'production'},
    modules: ['@nuxt/image', '@nuxtjs/robots', '@nuxtjs/tailwindcss', '@funken-studio/sitemap-nuxt-3'],
    routeRules: {
        '/**': {prerender: true},
        '/blogs/**': {ssr: true}
    },
    nitro: {
        prerender: {
            crawlLinks: true,
        }
    },
    sitemap: {
        hostname: 'https:/<>',
        cacheTime: 1,
        routes: dynamicRoutes,
        defaults: {
            changefreq: 'daily',
            priority: 1,
            lastmod: new Date().toISOString(),
        },
    }
})

vercel.json #

{
  "redirects": [
    {
      "source": "/dashboard/:path*",
      "destination": "https://<>/dashboard/:path*",
      "permanent": true
    },
    {
      "source": "/account/:path*",
      "destination": "https://<>/account/:path*",
      "permanent": true
    },
    {
      "source": "/login/:path*",
      "destination": "https://<>/login/:path*",
      "permanent": true
    }
  ]
}

原因确认 #

是的，X-Vercel-Cache: MISS和X-Nitro-Prerender请求是导致加载缓慢的核心原因。这说明首页未被正确预渲染并缓存到Vercel边缘节点，每次请求都需要服务器端动态生成内容，额外的计算与IO操作直接拉长了加载耗时。

具体解决步骤 #

1. 修正预渲染规则冲突
   当前routeRules用/**全局设置预渲染，又用/blogs/**覆盖为SSR，容易导致预渲染逻辑混乱。建议明确区分静态页与动态页：

   routeRules: {
     // 明确指定静态落地页预渲染
     '/': { prerender: true },
     '/about': { prerender: true },
     // 博客类动态路由保持SSR
     '/blogs/**': { ssr: true }
   }
   

   避免全局匹配规则，防止意外干扰动态路由的预渲染逻辑。

2. 确保预渲染内容正确生成
   检查dynamicRoutes是否包含首页路径，若首页不在预渲染路由列表中，Nitro不会自动预渲染它。可手动添加核心路由到预渲染配置：

   nitro: {
     prerender: {
       crawlLinks: true,
       // 手动指定需要预渲染的核心路由
       routes: ['/', '/about', ...dynamicRoutes]
     }
   }
   

   构建时查看终端输出，确认是否出现Prerendering route: /的日志，若没有则说明预渲染触发失败。

3. 优化Vercel缓存策略
   预渲染后的静态文件应被Vercel自动缓存，但如果存在@nuxt/content这类运行时查询依赖，可能导致缓存失效。可通过以下方式优化：

   • 启用@nuxt/content静态内容生成，避免运行时查询：

     content: {
       static: true
     }
     

   • 在vercel.json中添加缓存控制头，延长静态页面的边缘缓存时间：

     "headers": [
       {
         "source": "/(.*)",
         "headers": [
           {
             "key": "Cache-Control",
             "value": "s-maxage=86400, stale-while-revalidate"
           }
         ]
       }
     ]
     

   其中s-maxage=86400表示边缘缓存有效期1天，stale-while-revalidate允许在更新缓存时返回旧内容，避免用户等待。

4. 排查动态内容干扰
   若首页包含运行时获取的动态数据（如用户信息、实时数据），会导致预渲染失败并触发SSR。检查首页组件逻辑，尽量分离静态与动态内容：静态部分预渲染，动态部分通过客户端请求获取。

5. 重新部署并验证缓存
   修改配置后，在Vercel触发完整构建（不要用增量部署），部署完成后访问首页，查看响应头：

   • 确认X-Vercel-Cache: HIT，说明内容已被边缘缓存
   • 确认不再出现X-Nitro-Prerender相关请求，说明页面已预渲染为静态文件

内容的提问来源于stack exchange，提问作者Mathijs