缓存策略体系

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // 静态页面：CDN 缓存 1 天，浏览器缓存 1 小时
    '/about': { headers: { 'Cache-Control': 's-maxage=86400, max-age=3600' } },
 
    // 视频列表：ISR 模式，CDN 缓存 60 秒，过期后 SWR
    '/videos': { isr: 60 },
 
    // 视频详情：SSR + CDN 缓存 1 小时
    '/videos/**': { isr: 3600 },
 
    // API：服务端缓存 30 秒
    '/api/videos': { cache: { maxAge: 30 } },
 
    // 用户 API：不缓存
    '/api/user/**': { cache: false, headers: { 'Cache-Control': 'no-store' } },
  },
})

// server/api/videos/popular.get.ts
export default defineCachedEventHandler(async (event) => {
  const videos = await db.select().from(videosTable)
    .orderBy(desc(videosTable.views))
    .limit(20)
  return videos
}, {
  maxAge: 60,       // 缓存 60 秒
  staleMaxAge: 300, // 过期后仍可返回旧数据 300 秒（SWR）
  name: 'popular-videos',
  getKey: (event) => 'popular',  // 缓存 key
})

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    storage: {
      cache: {
        driver: 'redis',
        host: process.env.REDIS_HOST,
        port: 6379,
        db: 0,
      },
    },
  },
})

const { data } = await useFetch('/api/videos/popular', {
  key: 'popular-videos',
  getCachedData(key, nuxtApp) {
    // 如果缓存中有数据且不超过 30 秒，直接返回
    const cached = nuxtApp.payload.data[key] || nuxtApp.static.data[key]
    if (cached) return cached
    return null  // null 表示需要重新请求
  },
})

const { data, refresh } = await useFetch('/api/videos', {
  key: 'video-list',
  getCachedData(key, nuxtApp) {
    return nuxtApp.payload.data[key]  // 先返回旧数据
  },
})
 
// 页面可见时后台刷新
onMounted(() => {
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      refresh()  // 后台刷新，不阻塞 UI
    }
  })
})

// server/utils/cache.ts
export async function cachedQuery<T>(
  key: string,
  queryFn: () => Promise<T>,
  ttl = 60
): Promise<T> {
  const storage = useStorage('cache')
 
  // 1. 先查缓存
  const cached = await storage.getItem<T>(key)
  if (cached) return cached
 
  // 2. 缓存未命中，查数据库
  const result = await queryFn()
 
  // 3. 写入缓存
  await storage.setItem(key, result, { ttl })
 
  return result
}

// server/api/videos/popular.get.ts
export default defineEventHandler(async () => {
  return cachedQuery('videos:popular', async () => {
    return db.select().from(videosTable)
      .orderBy(desc(videosTable.views))
      .limit(20)
  }, 60)
})

const result = await queryFn()
// 即使结果为空，也缓存（避免穿透）
await storage.setItem(key, result ?? '__NULL__', { ttl: result ? 60 : 10 })

const jitter = Math.floor(Math.random() * 10)  // 0-10 秒随机偏移
await storage.setItem(key, result, { ttl: ttl + jitter })

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    strategies: 'generateSW',
    registerType: 'autoUpdate',
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
      runtimeCaching: [
        {
          urlPattern: /^https:\/\/api\.example\.com\/videos/,
          handler: 'StaleWhileRevalidate',
          options: { cacheName: 'api-videos', expiration: { maxEntries: 50 } },
        },
        {
          urlPattern: /\.(jpg|jpeg|png|webp|avif)$/,
          handler: 'CacheFirst',
          options: { cacheName: 'images', expiration: { maxEntries: 200, maxAgeSeconds: 86400 * 30 } },
        },
      ],
    },
  },
})

# 检查 CDN 缓存状态
curl -I https://example.com/api/videos/popular
# 看 X-Cache: HIT / MISS
# 看 Age: 45（已缓存 45 秒）
# 看 Cache-Control: s-maxage=60