Nuxt3 + Nitro中使用SWR路由缓存时如何自定义缓存键名称？

问题说明 #

当前使用Nuxt3默认Nitro服务器的SWR路由缓存时，Redis中生成的缓存键为nitro:routes:_:index.il7asoJjJE.json，需要自定义该键名。

可行解决方案 #

方案一：利用Nitro路由缓存钩子修改键名 #

Nitro提供了routeCache:key钩子，可直接拦截并修改路由缓存的生成键名，无需改动原有routeRules配置：

1. 在项目根目录创建plugins/nitro-cache-key.ts文件：

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('routeCache:key', (originalKey, event) => {
    // 匹配需要自定义键名的路由
    if (event.node.req.url === '/') {
      // 返回自定义键名，可根据需求调整格式
      return 'custom:homepage:swr'
    }
    // 其他路由保留默认键名逻辑
    return originalKey
  })
})

2. 重启Nuxt服务后，访问根路由时，Redis中会生成你指定的自定义键名，同时保留routeRules中设置的7200秒SWR缓存规则。

方案二：手动实现SWR缓存（完全控制键名） #

如果需要更灵活的缓存逻辑，可以放弃routeRules中的swr配置，通过服务器中间件手动处理缓存逻辑，完全自定义键名：

1. 创建server/middleware/custom-swr-cache.ts文件：

export default defineEventHandler(async (event) => {
  // 只处理根路由
  if (event.node.req.url !== '/') return

  const cache = useStorage('cache')
  // 自定义缓存键名
  const cacheKey = 'custom:homepage:html'
  const cachedContent = await cache.getItem(cacheKey)

  // 如果有缓存，直接返回并设置SWR响应头
  if (cachedContent) {
    event.node.res.setHeader('Cache-Control', 's-maxage=7200, stale-while-revalidate')
    return send(event, cachedContent, 'text/html')
  }

  // 监听响应，渲染完成后缓存内容
  onResponse(async (event) => {
    if (event.node.res.statusCode === 200) {
      const htmlContent = await getResponseData(event) as string
      await cache.setItem(cacheKey, htmlContent, { ttl: 7200 })
    }
  })
})

2. 删除nuxt.config.ts中routeRules里的swr配置，重启服务即可生效。

补充说明 #

Nitro默认的路由缓存键生成逻辑是结合路由路径、查询参数和内容哈希生成的，目的是避免不同版本的内容缓存冲突。目前官方routeRules配置中没有直接设置自定义键名的选项，上述两种方案是当前可行的解决方式。

内容的提问来源于stack exchange，提问作者李晓川