Nuxt 3 Cache常见配置方式

Nuxt 3的缓存常见的配置方式，nuxtApp.hook和defineNuxtConfig.routeRules。

nuxtApp.hook

在项目中新建plugins/cache.server.ts文件：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:rendered', (ctx) => {
    const res = ctx.ssrContext?.event.node.res
    if (res) {
      const url = ctx.ssrContext?.event.node.req.url || ''

      // 根据 URL 或文件扩展名设置缓存时间
      let cacheDuration = 60 * 60 * 24 * 365 // 默认缓存 1 年（对于 HTML 等页面）

      // 判断是否为新闻详情页
      if (url.startsWith('/single/')) {
        // 这里可以提取新闻 ID 或其他动态部分
        res.setHeader('Cache-Control', 'public, max-age=3600') // 缓存 1 小时
      } else if (url.endsWith('.html')) {
        cacheDuration = 60 * 60 * 24 * 365 // HTML 文件缓存 1 年
      } else if (url.endsWith('.js') || url.endsWith('.css')) {
        cacheDuration = 60 * 60 * 24 * 30 // JavaScript 和 CSS 缓存 30 天
      } else if (
        url.endsWith('.jpg') ||
        url.endsWith('.jpeg') ||
        url.endsWith('.png') ||
        url.endsWith('.gif')
      ) {
        cacheDuration = 60 * 60 * 24 * 365 * 2 // 图片缓存 2 年
      } else if (url.endsWith('.svg') || url.endsWith('.webp')) {
        cacheDuration = 60 * 60 * 24 * 365 * 2 // SVG 和 WebP 缓存 2 年
      } else if (url.endsWith('.json')) {
        cacheDuration = 60 * 60 * 24 * 7 // JSON 文件缓存 1 周
      } else if (url.endsWith('.xml')) {
        cacheDuration = 60 * 60 * 24 * 7 // XML 文件缓存 1 周
      } else {
        cacheDuration = 60 * 60 * 24 * 7 // 默认缓存时间 1 周
      }

      // 设置 Cache-Control 头
      res.setHeader('Cache-Control', `public, max-age=${cacheDuration}`)
    }
  })
})

nuxt.config.ts的plugins引入~/plugins/cache.server.ts

  plugins: [
    {
      src: '~/plugins/cache.server.ts',
    },
  ],

defineNuxtConfig.routeRules

  routeRules: {
    '/blog/**': { cache: { maxAge: 60 * 60 } },
  },

参考文档

https://nitro.build/guide/cache
https://nuxt.com/docs/api/nuxt-config#routerules-1
https://nuxt.com/docs/api/advanced/hooks#app-hooks-runtime