feat(core, lambda-at-edge, nextjs-component): experimental - allow serving static pages/data from origin request handler only (and disable origin response handler) (#1696)

Author: dphang

package.json

@@ -96,7 +96,8 @@
       "babel.config.js",
       "jest.config.js",
       "<rootDir>/packages/serverless-components/aws-s3",
-      "<rootDir>/packages/libs/serverless-patched"
+      "<rootDir>/packages/libs/serverless-patched",
+      "<rootDir>/packages/libs/lambda-at-edge/src/render/renderStaticPage.ts"
     ],
     "watchPathIgnorePatterns": [
       "/fixture/",

packages/compat-layers/lambda-at-edge-compat/next-aws-cloudfront.js

@@ -109,16 +109,20 @@ const toCloudFrontHeaders = (headers, headerNames, originalHeaders) => {
 
     if (headerValue instanceof Array) {
       headerValue.forEach((val) => {
+        if (val) {
+          result[headerKey].push({
+            key: headerName,
+            value: val.toString()
+          });
+        }
+      });
+    } else {
+      if (headerValue) {
         result[headerKey].push({
           key: headerName,
-          value: val.toString()
+          value: headerValue.toString()
         });
-      });
-    } else {
-      result[headerKey].push({
-        key: headerName,
-        value: headerValue.toString()
-      });
+      }
     }
   });
 

packages/e2e-tests/next-app-experimental/serverless.yml

@@ -6,6 +6,7 @@ next-app-experimental:
         foo: bar
     build:
       separateApiLambda: false
+      disableOriginResponseHandler: true
       postBuildCommands: ["node scripts/post-build-test.js"]
       assetIgnorePatterns:
         - "**/public/ignored.txt"

packages/libs/core/src/build/types.ts

@@ -8,6 +8,7 @@ export type BuildOptions = {
     [key: string]: string;
   };
   separateApiLambda?: boolean;
+  disableOriginResponseHandler?: boolean;
 };
 
 export type NextConfig = {

packages/libs/lambda-at-edge/src/build.ts

@@ -50,6 +50,7 @@ type BuildOptions = {
   assetIgnorePatterns?: string[];
   regenerationQueueName?: string;
   separateApiLambda?: boolean;
+  disableOriginResponseHandler?: boolean;
 };
 
 const defaultBuildOptions = {
@@ -767,7 +768,8 @@ class Builder {
     const {
       enableHTTPCompression,
       logLambdaExecutionTimes,
-      regenerationQueueName
+      regenerationQueueName,
+      disableOriginResponseHandler
     } = this.buildOptions;
 
     const apiBuildManifest = {
@@ -778,7 +780,8 @@ class Builder {
       ...pageManifest,
       enableHTTPCompression,
       logLambdaExecutionTimes,
-      regenerationQueueName
+      regenerationQueueName,
+      disableOriginResponseHandler
     };
     const imageBuildManifest = {
       ...imageManifest,

packages/libs/lambda-at-edge/src/default-handler.ts

@@ -6,6 +6,7 @@ import Manifest from "./manifest.json";
 import RoutesManifestJson from "./routes-manifest.json";
 // @ts-ignore
 import lambdaAtEdgeCompat from "@sls-next/next-aws-cloudfront";
+import { renderStaticPage } from "./render/renderStaticPage";
 import {
   ExternalRoute,
   getCustomHeaders,
@@ -15,6 +16,7 @@ import {
   handleFallback,
   handlePublicFiles,
   PublicFileRoute,
+  Route,
   routeDefault,
   StaticRoute
 } from "@sls-next/core";
@@ -122,18 +124,48 @@ export const handler = async (
   return response;
 };
 
-const staticRequest = (
-  request: CloudFrontRequest,
+const staticRequest = async (
+  event: OriginRequestEvent,
   file: string,
-  path: string
+  path: string,
+  route: Route,
+  manifest: OriginRequestDefaultHandlerManifest,
+  routesManifest: RoutesManifest
 ) => {
-  const s3Origin = request.origin?.s3 as CloudFrontS3Origin;
-  const s3Domain = normaliseS3OriginDomain(s3Origin);
-  s3Origin.domainName = s3Domain;
-  s3Origin.path = path;
-  request.uri = file;
-  addS3HostHeader(request, s3Domain);
-  return request;
+  const request = event.Records[0].cf.request;
+  if (manifest.disableOriginResponseHandler) {
+    const { req, res, responsePromise } = lambdaAtEdgeCompat(
+      event.Records[0].cf,
+      {
+        enableHTTPCompression: manifest.enableHTTPCompression
+      }
+    );
+
+    const bucketName = s3BucketNameFromEventRequest(request) ?? "";
+    const s3Key = (path + file).slice(1); // need to remove leading slash from path for s3 key
+
+    return await renderStaticPage({
+      route: route,
+      request: request,
+      req: req,
+      res: res,
+      responsePromise: responsePromise,
+      manifest: manifest,
+      routesManifest: routesManifest,
+      bucketName: bucketName,
+      s3Key: s3Key,
+      s3Uri: file,
+      basePath: basePath
+    });
+  } else {
+    const s3Origin = request.origin?.s3 as CloudFrontS3Origin;
+    const s3Domain = normaliseS3OriginDomain(s3Origin);
+    s3Origin.domainName = s3Domain;
+    s3Origin.path = path;
+    request.uri = file;
+    addS3HostHeader(request, s3Domain);
+    return request;
+  }
 };
 
 const reconstructOriginalRequestUri = (
@@ -205,7 +237,14 @@ const handleOriginRequest = async ({
 
   if (route.isPublicFile) {
     const { file } = route as PublicFileRoute;
-    return staticRequest(request, file, `${routesManifest.basePath}/public`);
+    return await staticRequest(
+      event,
+      file,
+      `${routesManifest.basePath}/public`,
+      route,
+      manifest,
+      routesManifest
+    );
   }
   if (route.isStatic) {
     const { file, isData } = route as StaticRoute;
@@ -214,7 +253,14 @@ const handleOriginRequest = async ({
       : `${routesManifest.basePath}/static-pages/${manifest.buildId}`;
 
     const relativeFile = isData ? file : file.slice("pages".length);
-    return staticRequest(request, relativeFile, path);
+    return await staticRequest(
+      event,
+      relativeFile,
+      path,
+      route,
+      manifest,
+      routesManifest
+    );
   }
 
   const external: ExternalRoute = route;
@@ -311,7 +357,8 @@ const handleOriginResponse = async ({
         const { throttle } = await triggerStaticRegeneration({
           basePath,
           request,
-          response,
+          eTag: response.headers["etag"]?.[0].value,
+          lastModified: response.headers["etag"]?.[0].value,
           pagePath: staticRoute.page,
           queueName: regenerationQueueName
         });

packages/libs/lambda-at-edge/src/lib/triggerStaticRegeneration.ts

@@ -4,7 +4,8 @@ import * as crypto from "crypto";
 
 interface TriggerStaticRegenerationOptions {
   request: AWSLambda.CloudFrontRequest;
-  response: AWSLambda.CloudFrontResponse;
+  eTag: string | undefined;
+  lastModified: string | undefined;
   basePath: string | undefined;
   pagePath: string;
   queueName: string;
@@ -55,10 +56,10 @@ export const triggerStaticRegeneration = async (
         // update. This will prevent the case where this page is being
         // requested again whilst its already started to regenerate.
         MessageDeduplicationId:
-          options.response.headers["etag"]?.[0].value ||
-          new Date(options.response.headers["last-modified"]?.[0].value)
-            .getTime()
-            .toString(),
+          options.eTag ??
+          (options.lastModified
+            ? new Date(options.lastModified).getTime().toString()
+            : new Date().getTime().toString()),
         // Only deduplicate based on the object, i.e. we can generate
         // different pages in parallel, just not the same one
         MessageGroupId: hashedUri