feat: cập nhật lại cache image

server/api/image-proxy.get.ts

@@ -1,27 +1,9 @@
 import { createHash } from 'crypto'
 import { useRedis } from '../utils/redis'
 
-const CACHE_TTL = 604800 // 7 ngày
+const CACHE_TTL = 604800 // 7 ngày (Redis)
+const BROWSER_TTL = 31536000 // 1 năm (browser immutable cache)
 const CACHE_PREFIX = 'img:'
-const DEFAULT_WIDTH = null
-const DEFAULT_QUALITY = 85
-
-async function getCachedWebP(redis: any, key: string): Promise<Buffer | null> {
-  try {
-    const cached = await redis.getBuffer(key)
-    return cached || null
-  } catch {
-    return null
-  }
-}
-
-async function setCachedWebP(redis: any, key: string, data: Buffer): Promise<void> {
-  try {
-    await redis.set(key, data, 'EX', CACHE_TTL)
-  } catch {
-    // Ignore cache write errors
-  }
-}
 
 export default defineEventHandler(async (event) => {
   const url = getQuery(event).url as string
@@ -34,23 +16,27 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'Invalid URL protocol' })
   }
 
-  const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : DEFAULT_WIDTH
-  const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : DEFAULT_QUALITY
+  const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : undefined
+  const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : 85
+  
   const cacheKey = CACHE_PREFIX + createHash('md5').update(`${url}|${width}|${quality}`).digest('hex')
-
   const redis = useRedis()
 
-  // Check cache
-  const cached = await getCachedWebP(redis, cacheKey)
-  if (cached) {
-    setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable')
-    setResponseHeader(event, 'content-type', 'image/webp')
-    setResponseHeader(event, 'x-cache', 'HIT')
-    setResponseHeader(event, 'access-control-allow-origin', '*')
-    return cached
+  // Check Redis cache
+  try {
+    const cached = await redis.getBuffer(cacheKey)
+    if (cached) {
+      setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`)
+      setResponseHeader(event, 'content-type', 'image/webp')
+      setResponseHeader(event, 'x-cache', 'HIT')
+      setResponseHeader(event, 'access-control-allow-origin', '*')
+      return cached
+    }
+  } catch {
+    // Redis might be down, continue to fetch
   }
 
-  // Fetch original image
+  // Fetch from upstream
   let response: Response
   try {
     response = await fetch(url, {
@@ -59,6 +45,7 @@ export default defineEventHandler(async (event) => {
         'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
         'Referer': new URL(url).origin,
         'Origin': new URL(url).origin,
+        'Cache-Control': 'no-cache',
       },
       signal: AbortSignal.timeout(15000),
     })
@@ -72,40 +59,44 @@ export default defineEventHandler(async (event) => {
 
   const contentType = response.headers.get('content-type') || ''
   
-  // Skip non-image content types
   if (!contentType.startsWith('image/')) {
     throw createError({ statusCode: 400, message: 'Not an image' })
   }
 
   const buffer = Buffer.from(await response.arrayBuffer())
   
-  // Convert to WebP with optional resizing (dynamic import to avoid ESM resolution in dev)
+  // Convert to WebP
   let webpBuffer: Buffer
+  let converted = true
   try {
     const { default: sharp } = await import('sharp')
-    let transform = sharp(buffer)      .webp({ quality, effort: 4 })
+    let transform = sharp(buffer).webp({ quality, effort: 4 })
     
     if (width) {
       transform = transform.resize(width, null, { withoutEnlargement: true })
     }
     
     webpBuffer = await transform.toBuffer()
-  } catch (error: any) {
+  } catch {
     // If conversion fails, return original
+    setResponseHeader(event, 'cache-control', `public, max-age=3600, stale-while-revalidate=300`)
     setResponseHeader(event, 'content-type', contentType)
-    setResponseHeader(event, 'cache-control', 'public, max-age=3600')
-    setResponseHeader(event, 'x-cache', 'MISS')
+    setResponseHeader(event, 'x-cache', 'MISS (fallback)')
     setResponseHeader(event, 'access-control-allow-origin', '*')
     return buffer
   }
 
   // Cache in Redis
-  await setCachedWebP(redis, cacheKey, webpBuffer)
+  try {
+    await redis.set(cacheKey, webpBuffer, 'EX', CACHE_TTL)
+  } catch {
+    // Ignore cache write errors
+  }
 
-  setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable')
+  setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`)
   setResponseHeader(event, 'content-type', 'image/webp')
   setResponseHeader(event, 'content-length', webpBuffer.length.toString())
-  setResponseHeader(event, 'x-cache', 'MISS')
+  setResponseHeader(event, 'x-cache', converted ? 'MISS (converted)' : 'MISS')
   setResponseHeader(event, 'access-control-allow-origin', '*')
   
   return webpBuffer