Add etag header to optimized image response

packages/next/next-server/server/api-utils.ts

@@ -1,15 +1,15 @@
 import { IncomingMessage, ServerResponse } from 'http'
 import { parse } from 'next/dist/compiled/content-type'
 import { CookieSerializeOptions } from 'next/dist/compiled/cookie'
-import generateETag from 'etag'
-import fresh from 'next/dist/compiled/fresh'
 import getRawBody from 'raw-body'
 import { PageConfig } from 'next/types'
 import { Stream } from 'stream'
 import { isResSent, NextApiRequest, NextApiResponse } from '../lib/utils'
 import { decryptWithSecret, encryptWithSecret } from './crypto-utils'
 import { interopDefault } from './load-components'
 import { Params } from './router'
+import { sendEtagResponse } from './send-payload'
+import generateETag from 'etag'
 
 export type NextApiRequestCookies = { [key: string]: string }
 export type NextApiRequestQuery = { [key: string]: string | string[] }
@@ -216,23 +216,6 @@ export function redirect(
   return res
 }
 
-function sendEtagResponse(
-  req: NextApiRequest,
-  res: NextApiResponse,
-  body: string | Buffer
-): boolean {
-  const etag = generateETag(body)
-
-  if (fresh(req.headers, { etag })) {
-    res.statusCode = 304
-    res.end()
-    return true
-  }
-
-  res.setHeader('ETag', etag)
-  return false
-}
-
 /**
  * Send `any` body to response
  * @param req request object
@@ -261,8 +244,8 @@ export function sendData(
 
   const isJSONLike = ['object', 'number', 'boolean'].includes(typeof body)
   const stringifiedBody = isJSONLike ? JSON.stringify(body) : body
-
-  if (sendEtagResponse(req, res, stringifiedBody)) {
+  const etag = generateETag(stringifiedBody)
+  if (sendEtagResponse(req, res, etag)) {
     return
   }
 

packages/next/next-server/server/image-optimizer.ts

@@ -10,6 +10,7 @@ import { fileExists } from '../../lib/file-exists'
 // @ts-ignore no types for is-animated
 import isAnimated from 'next/dist/compiled/is-animated'
 import Stream from 'stream'
+import { sendEtagResponse } from './send-payload'
 
 let sharp: typeof import('sharp')
 //const AVIF = 'image/avif'
@@ -18,7 +19,7 @@ const PNG = 'image/png'
 const JPEG = 'image/jpeg'
 const GIF = 'image/gif'
 const SVG = 'image/svg+xml'
-const CACHE_VERSION = 1
+const CACHE_VERSION = 2
 const MODERN_TYPES = [/* AVIF, */ WEBP]
 const ANIMATABLE_TYPES = [WEBP, PNG, GIF]
 const VECTOR_TYPES = [SVG]
@@ -143,17 +144,22 @@ export async function imageOptimizer(
   if (await fileExists(hashDir, 'directory')) {
     const files = await promises.readdir(hashDir)
     for (let file of files) {
-      const [filename, extension] = file.split('.')
-      const expireAt = Number(filename)
+      const [prefix, etag, extension] = file.split('.')
+      const expireAt = Number(prefix)
       const contentType = getContentType(extension)
+      const fsPath = join(hashDir, file)
       if (now < expireAt) {
+        res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate')
+        if (sendEtagResponse(req, res, etag)) {
+          return { finished: true }
+        }
         if (contentType) {
           res.setHeader('Content-Type', contentType)
         }
-        createReadStream(join(hashDir, file)).pipe(res)
+        createReadStream(fsPath).pipe(res)
         return { finished: true }
       } else {
-        await promises.unlink(join(hashDir, file))
+        await promises.unlink(fsPath)
       }
     }
   }
@@ -223,8 +229,7 @@ export async function imageOptimizer(
     const animate =
       ANIMATABLE_TYPES.includes(upstreamType) && isAnimated(upstreamBuffer)
     if (vector || animate) {
-      res.setHeader('Content-Type', upstreamType)
-      res.end(upstreamBuffer)
+      sendResponse(req, res, upstreamType, upstreamBuffer)
       return { finished: true }
     }
   }
@@ -248,10 +253,8 @@ export async function imageOptimizer(
       if (error.code === 'MODULE_NOT_FOUND') {
         error.message += '\n\nLearn more: https://err.sh/next.js/install-sharp'
         server.logError(error)
-        if (upstreamType) {
-          res.setHeader('Content-Type', upstreamType)
-        }
-        res.end(upstreamBuffer)
+        sendResponse(req, res, upstreamType, upstreamBuffer)
+        return { finished: true }
       }
       throw error
     }
@@ -281,30 +284,46 @@ export async function imageOptimizer(
     const optimizedBuffer = await transformer.toBuffer()
     await promises.mkdir(hashDir, { recursive: true })
     const extension = getExtension(contentType)
-    const filename = join(hashDir, `${expireAt}.${extension}`)
+    const etag = getHash([optimizedBuffer])
+    const filename = join(hashDir, `${expireAt}.${etag}.${extension}`)
     await promises.writeFile(filename, optimizedBuffer)
-    res.setHeader('Content-Type', contentType)
-    res.end(optimizedBuffer)
+    sendResponse(req, res, contentType, optimizedBuffer)
   } catch (error) {
-    server.logError(error)
-    if (upstreamType) {
-      res.setHeader('Content-Type', upstreamType)
-    }
-    res.end(upstreamBuffer)
+    sendResponse(req, res, upstreamType, upstreamBuffer)
   }
 
   return { finished: true }
 }
 
+function sendResponse(
+  req: IncomingMessage,
+  res: ServerResponse,
+  contentType: string | null,
+  buffer: Buffer
+) {
+  const etag = getHash([buffer])
+  res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate')
+  if (sendEtagResponse(req, res, etag)) {
+    return
+  }
+  if (contentType) {
+    res.setHeader('Content-Type', contentType)
+  }
+  res.end(buffer)
+}
+
 function getSupportedMimeType(options: string[], accept = ''): string {
   const mimeType = mediaType(accept, options)
   return accept.includes(mimeType) ? mimeType : ''
 }
 
-function getHash(items: (string | number | undefined)[]) {
+function getHash(items: (string | number | Buffer)[]) {
   const hash = createHash('sha256')
   for (let item of items) {
-    hash.update(String(item))
+    if (typeof item === 'number') hash.update(String(item))
+    else {
+      hash.update(item)
+    }
   }
   // See https://en.wikipedia.org/wiki/Base64#Filenames
   return hash.digest('base64').replace(/\//g, '-')

packages/next/next-server/server/send-payload.ts

@@ -26,17 +26,10 @@ export function sendPayload(
   }
 
   const etag = generateEtags ? generateETag(payload) : undefined
-
-  if (fresh(req.headers, { etag })) {
-    res.statusCode = 304
-    res.end()
+  if (sendEtagResponse(req, res, etag)) {
     return
   }
 
-  if (etag) {
-    res.setHeader('ETag', etag)
-  }
-
   if (!res.getHeader('Content-Type')) {
     res.setHeader(
       'Content-Type',
@@ -72,3 +65,27 @@ export function sendPayload(
   }
   res.end(req.method === 'HEAD' ? null : payload)
 }
+
+export function sendEtagResponse(
+  req: IncomingMessage,
+  res: ServerResponse,
+  etag: string | undefined
+): boolean {
+  if (etag) {
+    /**
+     * The server generating a 304 response MUST generate any of the
+     * following header fields that would have been sent in a 200 (OK)
+     * response to the same request: Cache-Control, Content-Location, Date,
+     * ETag, Expires, and Vary. https://tools.ietf.org/html/rfc7232#section-4.1
+     */
+    res.setHeader('ETag', etag)
+  }
+
+  if (fresh(req.headers, { etag })) {
+    res.statusCode = 304
+    res.end()
+    return true
+  }
+
+  return false
+}