Nuxt3+Strapi博客nuxt generate部署后新文章访问404如何解决？

为什么swr: true配置无效 #

swr: true是客户端层面的API请求缓存策略，用于在客户端刷新旧数据，但问题根源是静态部署后服务器不存在新文章对应的路由静态文件，请求直接返回404，根本无法触发客户端逻辑，所以这个配置解决不了问题。

可行解决方案 #

方案1：改用增量静态再生（ISR）部署

放弃纯静态的nuxt generate，改用Node.js服务部署，借助Nuxt的ISR功能实现首次访问自动预渲染：

1. 执行nuxt build构建服务端应用
2. 在nuxt.config.ts中配置路由规则：

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { isr: 86400 } // 缓存静态文件1天，设置为true则永久缓存，需手动触发刷新
  }
})

3. 部署构建后的.output目录作为Node.js服务
   首次访问新文章时，Nitro服务器会自动预渲染该页面并生成静态缓存文件，后续访问直接返回静态内容，兼顾静态文件的SEO优势和新增内容的访问需求。

方案2：服务器配置Fallback到index.html（客户端渲染兜底）

如果坚持纯静态部署，可通过服务器配置让404请求跳转到Nuxt的入口文件，由客户端动态渲染：
以Nginx为例，修改配置：

server {
  # ... 其他配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

这种方式无需修改Nuxt配置，但新文章页面首次访问没有预渲染的静态HTML，SEO效果会打折扣。

方案3：Strapi Webhook触发增量预渲染

通过Strapi的webhook功能，在发布新文章时自动触发服务器生成对应静态页面：

1. 在Strapi后台创建webhook，触发条件设为“文章发布”，指向服务器上的自定义脚本接口
2. 编写服务器脚本，接收webhook传递的文章slug，执行命令：

npx nuxt generate --prerender /blog/${slug}

Nuxt3支持指定单个路由预渲染，这样每次发布新文章都会自动生成对应的静态文件，无需全量重新生成所有页面。

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