fix(core, lambda-at-edge): render page to HTML properly for next.js 11.1+ versions (#1596)

Author: dphang

package.json

@@ -65,7 +65,7 @@
     "jest": "^27.0.4",
     "lerna": "^4.0.0",
     "lint-staged": "^11.1.2",
-    "next": "^10.2.3",
+    "next": "^11.1.0",
     "prettier": "^2.0.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/libs/core/package.json

@@ -35,6 +35,7 @@
     "@hapi/accept": "^5.0.1",
     "cookie": "^0.4.1",
     "jsonwebtoken": "^8.5.1",
+    "next": "^11.1.0",
     "path-to-regexp": "^6.1.0",
     "regex-parser": "^2.2.10"
   },

packages/libs/core/src/handle/fallback.ts

@@ -10,6 +10,7 @@ import {
   StaticRoute
 } from "../types";
 import { notFoundPage } from "../route/notfound";
+import { renderPageToHtml } from "../utils/renderUtils";
 
 type FallbackRoute = StaticRoute & {
   fallback: string | null;
@@ -49,7 +50,8 @@ const renderFallback = async (
 
   const page = getPage(route.page);
   try {
-    const { html, renderOpts } = await page.renderReqToHTML(
+    const { html, renderOpts } = await renderPageToHtml(
+      page,
       req,
       res,
       "passthrough"

packages/libs/core/src/index.ts

@@ -3,3 +3,4 @@ export * from "./handle";
 export * from "./revalidate";
 export * from "./route";
 export * from "./types";
+export * from "./utils";

packages/libs/core/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./renderUtils";

packages/libs/core/src/utils/renderUtils.ts

@@ -0,0 +1,42 @@
+import { resultToChunks } from "next/dist/server/utils";
+import { IncomingMessage, ServerResponse } from "http";
+
+/**
+ * Render to HTML helper. Starting in Next.js 11.1 a change was introduced so renderReqToHTML no longer returns a string.
+ * See: https://github.com/vercel/next.js/pull/27319
+ * This is a helper to properly render it in backwards compatible way.
+ * @param page
+ * @param req
+ * @param res
+ * @param renderMode
+ */
+export const renderPageToHtml = async (
+  page: {
+    renderReqToHTML: (
+      req: IncomingMessage,
+      res: ServerResponse,
+      renderMode: string | boolean
+    ) =>
+      | PromiseLike<{ renderOpts: Record<string, any>; html: string }>
+      | { renderOpts: Record<string, any>; html: string };
+  },
+  req: IncomingMessage,
+  res: ServerResponse,
+  renderMode: "export" | "passthrough" | true
+): Promise<{ html: string; renderOpts: Record<string, any> }> => {
+  const { renderOpts, html: htmlResult } = await page.renderReqToHTML(
+    req,
+    res,
+    renderMode
+  );
+
+  let html;
+  if (typeof htmlResult === "string") {
+    html = htmlResult;
+  } else {
+    const htmlChunks = htmlResult ? await resultToChunks(htmlResult) : [];
+    html = htmlChunks.join("");
+  }
+
+  return { html, renderOpts };
+};