Feat add a static etag for Image (#398)

* feat add a static etag

* Create hot-toys-push.md

Author: conico974

.changeset/hot-toys-push.md

@@ -0,0 +1,5 @@
+---
+"open-next": patch
+---
+
+Feat add a static etag for Image Optimization

packages/open-next/src/adapters/image-optimization-adapter.ts

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { IncomingMessage, ServerResponse } from "node:http";
 import https from "node:https";
 import path from "node:path";
@@ -20,7 +21,7 @@ import {
 // @ts-ignore
 import type { NextUrlWithParsedQuery } from "next/dist/server/request-meta";
 
-import { loadConfig } from "./config/util.js";
+import { loadBuildId, loadConfig } from "./config/util.js";
 import { awsLogger, debug, error } from "./logger.js";
 import { optimizeImage } from "./plugins/image-optimization.js";
 import { setNodeEnv } from "./util.js";
@@ -33,6 +34,7 @@ const s3Client = new S3Client({ logger: awsLogger });
 setNodeEnv();
 const nextDir = path.join(__dirname, ".next");
 const config = loadConfig(nextDir);
+const buildId = loadBuildId(nextDir);
 const nextConfig = {
   ...defaultConfig,
   images: {
@@ -64,14 +66,24 @@ export async function handler(
       headers,
       queryString === null ? undefined : queryString,
     );
+    let etag: string | undefined;
+    // We don't cache any images, so in order to be able to return 304 responses, we compute an ETag from what is assumed to be static
+    if (process.env.OPENNEXT_STATIC_ETAG) {
+      etag = computeEtag(imageParams);
+    }
+    if (etag && headers["if-none-match"] === etag) {
+      return {
+        statusCode: 304,
+      };
+    }
     const result = await optimizeImage(
       headers,
       imageParams,
       nextConfig,
       downloadHandler,
     );
 
-    return buildSuccessResponse(result);
+    return buildSuccessResponse(result, etag);
   } catch (e: any) {
     return buildFailureResponse(e);
   }
@@ -115,16 +127,38 @@ function validateImageParams(
   return imageParams;
 }
 
-function buildSuccessResponse(result: any) {
+function computeEtag(imageParams: {
+  href: string;
+  width: number;
+  quality: number;
+}) {
+  return createHash("sha1")
+    .update(
+      JSON.stringify({
+        href: imageParams.href,
+        width: imageParams.width,
+        quality: imageParams.quality,
+        buildId,
+      }),
+    )
+    .digest("base64");
+}
+
+function buildSuccessResponse(result: any, etag?: string) {
+  const headers: Record<string, string> = {
+    Vary: "Accept",
+    "Content-Type": result.contentType,
+    "Cache-Control": `public,max-age=${result.maxAge},immutable`,
+  };
+  if (etag) {
+    headers["ETag"] = etag;
+  }
+
   return {
     statusCode: 200,
     body: result.buffer.toString("base64"),
     isBase64Encoded: true,
-    headers: {
-      Vary: "Accept",
-      "Cache-Control": `public,max-age=${result.maxAge},immutable`,
-      "Content-Type": result.contentType,
-    },
+    headers,
   };
 }
 

packages/open-next/src/build.ts

@@ -375,12 +375,16 @@ async function createImageOptimizationBundle() {
     },
   });
 
-  // Copy over .next/required-server-files.json file
+  // Copy over .next/required-server-files.json file and BUILD_ID
   fs.mkdirSync(path.join(outputPath, ".next"));
   fs.copyFileSync(
     path.join(appBuildOutputPath, ".next/required-server-files.json"),
     path.join(outputPath, ".next/required-server-files.json"),
   );
+  fs.copyFileSync(
+    path.join(appBuildOutputPath, ".next/BUILD_ID"),
+    path.join(outputPath, ".next/BUILD_ID"),
+  );
 
   // Sharp provides pre-build binaries for all platforms. https://github.com/lovell/sharp/blob/main/docs/install.md#cross-platform
   // Target should be same as used by Lambda, see https://github.com/sst/sst/blob/ca6f763fdfddd099ce2260202d0ce48c72e211ea/packages/sst/src/constructs/NextjsSite.ts#L114