Skipping partial html files generated due to enabling ppr in Nextjs

CHANGELOG.md

@@ -0,0 +1 @@
+- Fixed Next.js issue with PPR routes not rendering correctly. (#7625)

src/frameworks/next/index.ts

@@ -49,7 +49,7 @@
   getMiddlewareMatcherRegexes,
   getNonStaticRoutes,
   getNonStaticServerComponents,
-  getHeadersFromMetaFiles,
+  getAppMetadataFromMetaFiles,
   cleanI18n,
   getNextVersion,
   hasStaticAppNotFoundComponent,
@@ -97,13 +97,13 @@
 const DEFAULT_NUMBER_OF_REASONS_TO_LIST = 5;
 
 function getReactVersion(cwd: string): string | undefined {
   return findDependency("react-dom", { cwd, omitDev: false })?.version;
 }
 
 /**
  * Returns whether this codebase is a Next.js backend.
  */
 export async function discover(dir: string) {
   if (!(await pathExists(join(dir, "package.json")))) return;
   const version = getNextVersion(dir);
   if (!(await whichNextConfigFile(dir)) && !version) return;
@@ -160,10 +160,10 @@
 
   const nextBuild = new Promise((resolve, reject) => {
     const buildProcess = spawn(cli, ["build"], { cwd: dir, env });
     buildProcess.stdout?.on("data", (data) => logger.info(data.toString()));
     buildProcess.stderr?.on("data", (data) => logger.info(data.toString()));
     buildProcess.on("error", (err) => {
       reject(new FirebaseError(`Unable to build your Next.js app: ${err}`));
     });
     buildProcess.on("exit", (code) => {
       resolve(code);
@@ -252,14 +252,18 @@
   ]);
 
   if (appPathRoutesManifest) {
-    const headersFromMetaFiles = await getHeadersFromMetaFiles(
+    const { headers: headersFromMetaFiles, pprRoutes } = await getAppMetadataFromMetaFiles(
       dir,
       distDir,
       baseUrl,
       appPathRoutesManifest,
     );
     headers.push(...headersFromMetaFiles);
 
+    for (const route of pprRoutes) {
+      reasonsForBackend.add(`route with ppr ${route}`);
+    }
+
     if (appPathsManifest) {
       const unrenderedServerComponents = getNonStaticServerComponents(
         appPathsManifest,
@@ -487,6 +491,13 @@
     ...pagesManifestLikePrerender,
   };
 
+  const { pprRoutes } = await getAppMetadataFromMetaFiles(
+    sourceDir,
+    distDir,
+    basePath,
+    appPathRoutesManifest,
+  );
+
   await Promise.all(
     Object.entries(routesToCopy).map(async ([path, route]) => {
       if (route.initialRevalidateSeconds) {
@@ -504,7 +515,6 @@
         logger.debug(`skipping ${path} due to server action`);
         return;
       }
-
       const appPathRoute =
         route.srcRoute && appPathRoutesEntries.find(([, it]) => it === route.srcRoute)?.[0];
       const contentDist = join(sourceDir, distDir, "server", appPathRoute ? "app" : "pages");
@@ -536,6 +546,12 @@
       let defaultDestPath = isDefaultLocale && join(destDir, basePath, ...destPartsOrIndex);
       if (!fileExistsSync(sourcePath) && fileExistsSync(`${sourcePath}.html`)) {
         sourcePath += ".html";
+
+        if (pprRoutes.includes(path)) {
+          logger.debug(`skipping ${path} due to ppr`);
+          return;
+        }
+
         if (localizedDestPath) localizedDestPath += ".html";
         if (defaultDestPath) defaultDestPath += ".html";
       } else if (

src/frameworks/next/testing/app.ts

@@ -16,6 +16,7 @@ export const appPathRoutesManifest: AppPathRoutesManifest = {
   "/server-action/page": "/server-action",
   "/ssr/page": "/ssr",
   "/server-action/edge/page": "/server-action/edge",
+  "/ppr/page": "/ppr",
 };
 
 export const pagesManifest: PagesManifest = {

src/frameworks/next/utils.spec.ts

@@ -32,7 +32,7 @@ import {
   getMiddlewareMatcherRegexes,
   getNonStaticRoutes,
   getNonStaticServerComponents,
-  getHeadersFromMetaFiles,
+  getAppMetadataFromMetaFiles,
   isUsingNextImageInAppDirectory,
   getNextVersion,
   getRoutesWithServerAction,
@@ -472,38 +472,63 @@ describe("Next.js utils", () => {
     });
   });
 
-  describe("getHeadersFromMetaFiles", () => {
+  describe("getAppMetadataFromMetaFiles", () => {
     let sandbox: sinon.SinonSandbox;
     beforeEach(() => (sandbox = sinon.createSandbox()));
     afterEach(() => sandbox.restore());
 
-    it("should get headers from meta files", async () => {
+    it("should return the correct headers and pprRoutes from meta files", async () => {
       const distDir = ".next";
       const readJsonStub = sandbox.stub(frameworksUtils, "readJSON");
       const dirExistsSyncStub = sandbox.stub(fsUtils, "dirExistsSync");
       const fileExistsSyncStub = sandbox.stub(fsUtils, "fileExistsSync");
 
+      // /api/static
       dirExistsSyncStub.withArgs(`${distDir}/server/app/api/static`).returns(true);
       fileExistsSyncStub.withArgs(`${distDir}/server/app/api/static.meta`).returns(true);
       readJsonStub.withArgs(`${distDir}/server/app/api/static.meta`).resolves(metaFileContents);
 
+      // /ppr
+      dirExistsSyncStub.withArgs(`${distDir}/server/app/ppr`).returns(true);
+      fileExistsSyncStub.withArgs(`${distDir}/server/app/ppr.meta`).returns(true);
+      readJsonStub.withArgs(`${distDir}/server/app/ppr.meta`).resolves({
+        ...metaFileContents,
+        postponed: "true",
+      });
+
       expect(
-        await getHeadersFromMetaFiles(".", distDir, "/asdf", appPathRoutesManifest),
-      ).to.deep.equal([
-        {
-          source: "/asdf/api/static",
-          headers: [
-            {
-              key: "content-type",
-              value: "application/json",
-            },
-            {
-              key: "custom-header",
-              value: "custom-value",
-            },
-          ],
-        },
-      ]);
+        await getAppMetadataFromMetaFiles(".", distDir, "/asdf", appPathRoutesManifest),
+      ).to.deep.equal({
+        headers: [
+          {
+            source: "/asdf/api/static",
+            headers: [
+              {
+                key: "content-type",
+                value: "application/json",
+              },
+              {
+                key: "custom-header",
+                value: "custom-value",
+              },
+            ],
+          },
+          {
+            source: "/asdf/ppr",
+            headers: [
+              {
+                key: "content-type",
+                value: "application/json",
+              },
+              {
+                key: "custom-header",
+                value: "custom-value",
+              },
+            ],
+          },
+        ],
+        pprRoutes: ["/ppr"],
+      });
     });
   });
 

src/frameworks/next/utils.ts

@@ -365,15 +365,16 @@ export function getNonStaticServerComponents(
 }
 
 /**
- * Get headers from .meta files
+ * Get metadata from .meta files
  */
-export async function getHeadersFromMetaFiles(
+export async function getAppMetadataFromMetaFiles(
   sourceDir: string,
   distDir: string,
   basePath: string,
   appPathRoutesManifest: AppPathRoutesManifest,
-): Promise<HostingHeadersWithSource[]> {
+): Promise<{ headers: HostingHeadersWithSource[]; pprRoutes: string[] }> {
   const headers: HostingHeadersWithSource[] = [];
+  const pprRoutes: string[] = [];
 
   await Promise.all(
     Object.entries(appPathRoutesManifest).map(async ([key, source]) => {
@@ -385,17 +386,20 @@ export async function getHeadersFromMetaFiles(
       const metadataPath = `${routePath}.meta`;
 
       if (dirExistsSync(routePath) && fileExistsSync(metadataPath)) {
-        const meta = await readJSON<{ headers?: Record<string, string> }>(metadataPath);
+        const meta = await readJSON<{ headers?: Record<string, string>; postponed?: string }>(
+          metadataPath,
+        );
         if (meta.headers)
           headers.push({
             source: posix.join(basePath, source),
             headers: Object.entries(meta.headers).map(([key, value]) => ({ key, value })),
           });
+        if (meta.postponed) pprRoutes.push(source);
       }
     }),
   );
 
-  return headers;
+  return { headers, pprRoutes };
 }
 
 /**