Fixed PPR handling and loading prefetch.rsc on instrumentation (#72)

* Improves caching and pre-rendering

* Improves initial cache registration by handling missing page data and prefetch data gracefully.

Author: AyronK

examples/redis-minimal/src/app/isr-example/blog/[id]/page.tsx

@@ -1,35 +1,33 @@
 interface Post {
-    id: string
-    title: string
-    content: string
-  }
-   
-  // Next.js will invalidate the cache when a
-  // request comes in, at most once every 60 seconds.
-  export const revalidate = 60
-   
-  export async function generateStaticParams() {
-    const posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
-      res.json()
-    )
-    return posts.map((post) => ({
-      id: String(post.id),
-    }))
-  }
-   
-  export default async function Page({
-    params,
-  }: {
-    params: Promise<{ id: string }>
-  }) {
-    const { id } = await params
-    const post: Post = await fetch(`https://api.vercel.app/blog/${id}`).then(
-      (res) => res.json()
-    )
-    return (
-      <main>
-        <h1>{post.title}</h1>
-        <p>{post.content}</p>
-      </main>
-    )
-  }
+  id: string;
+  title: string;
+  content: string;
+}
+
+export const revalidate = 3600;
+
+export async function generateStaticParams() {
+  const posts: Post[] = await fetch("https://api.vercel.app/blog").then((res) =>
+    res.json()
+  );
+  return posts.map((post) => ({
+    id: String(post.id),
+  }));
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const post: Post = await fetch(`https://api.vercel.app/blog/${id}`).then(
+    (res) => res.json()
+  );
+  return (
+    <main>
+      <h1>{post.title}</h1>
+      <p>{post.content}</p>
+    </main>
+  );
+}

examples/redis-minimal/src/app/manifest.ts

@@ -0,0 +1,20 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Next.js App",
+    short_name: "Next.js App",
+    description: "Next.js App",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#fff",
+    theme_color: "#fff",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+    ],
+  };
+}

examples/redis-minimal/src/app/ppr-example/page.tsx

@@ -9,6 +9,8 @@ export default function Page({
   return (
     <section>
       <h1>This will be prerendered</h1>
+      <hr />
+      <h1>This will be dynamic</h1>
       <Suspense fallback={<Skeleton />}>
         <Example searchParams={searchParams} />
       </Suspense>
@@ -17,3 +19,5 @@ export default function Page({
 }
 
 export const experimental_ppr = true;
+
+export const revalidate = 3600;

examples/redis-minimal/src/pages/posts/[id].tsx

@@ -36,7 +36,7 @@ export const getStaticProps: GetStaticProps<PostPageProps> = async ({
     props: {
       post,
     },
-    revalidate: 60,
+    revalidate: 3600,
   };
 };
 

packages/nextjs-cache-handler/package-lock.json

@@ -18,7 +18,7 @@
     "next",
     "redis"
   ],
-  "version": "2.1.0-canary.11",
+  "version": "2.1.0-canary.12",
   "type": "module",
   "license": "MIT",
   "description": "Next.js cache handlers",

packages/nextjs-cache-handler/package.json

@@ -660,13 +660,6 @@ export class CacheHandler implements NextCacheHandler {
         implicitTags: softTags ?? [],
       });
 
-    if (cachedData?.value?.kind === "APP_ROUTE") {
-      cachedData.value.body = Buffer.from(
-        cachedData.value.body.toString(),
-        "base64",
-      );
-    }
-
     if (!cachedData && CacheHandler.#fallbackFalseRoutes.has(cacheKey)) {
       cachedData = await CacheHandler.#readPagesRouterPage(cacheKey);
 
@@ -734,18 +727,6 @@ export class CacheHandler implements NextCacheHandler {
         cacheHandlerValueTags = getTagsFromHeaders(value.headers ?? {});
         break;
       }
-      case "APP_ROUTE": {
-        // create a new object to avoid mutating the original value
-        value = {
-          // replace the body with a base64 encoded string to save space
-          body: value.body.toString("base64") as unknown as Buffer,
-          headers: value.headers,
-          kind: value.kind,
-          status: value.status,
-        };
-
-        break;
-      }
       default: {
         break;
       }

packages/nextjs-cache-handler/src/handlers/cache-handler.ts

@@ -14,9 +14,7 @@ export function parseBuffersToStrings(cacheHandlerValue: CacheHandlerValue) {
     return;
   }
 
-  const value: IncrementalCacheValue | null = {
-    ...cacheHandlerValue.value,
-  };
+  const value: IncrementalCacheValue | null = cacheHandlerValue.value;
 
   const kind = value?.kind;
 
@@ -27,7 +25,7 @@ export function parseBuffersToStrings(cacheHandlerValue: CacheHandlerValue) {
     if (appRouteValue?.body) {
       // Convert body Buffer to string
       // See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L97
-      appRouteData.body = appRouteValue.body.toString();
+      appRouteData.body = appRouteValue.body.toString("base64");
     }
   } else if (kind === "APP_PAGE") {
     const appPageData = value as unknown as RedisCompliantCachedAppPageValue;
@@ -36,7 +34,7 @@ export function parseBuffersToStrings(cacheHandlerValue: CacheHandlerValue) {
     if (appPageValue?.rscData) {
       // Convert rscData Buffer to string
       // See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L76
-      appPageData.rscData = appPageValue.rscData.toString();
+      appPageData.rscData = appPageValue.rscData.toString("base64");
     }
 
     if (appPageValue?.segmentData) {
@@ -45,7 +43,7 @@ export function parseBuffersToStrings(cacheHandlerValue: CacheHandlerValue) {
       appPageData.segmentData = Object.fromEntries(
         Array.from(appPageValue.segmentData.entries()).map(([key, value]) => [
           key,
-          value.toString(),
+          value.toString("base64"),
         ]),
       );
     }
@@ -63,7 +61,7 @@ export function convertStringsToBuffers(cacheValue: CacheHandlerValue) {
       // Convert body string to Buffer
       // See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L97
       const appRouteValue = value as unknown as CachedRouteValue;
-      appRouteValue.body = Buffer.from(appRouteData.body, "utf-8");
+      appRouteValue.body = Buffer.from(appRouteData.body, "base64");
     }
   } else if (kind === "APP_PAGE") {
     const appPageData = value as unknown as RedisCompliantCachedAppPageValue;
@@ -72,7 +70,7 @@ export function convertStringsToBuffers(cacheValue: CacheHandlerValue) {
     if (appPageData.rscData) {
       // Convert rscData string to Buffer
       // See: https://github.com/vercel/next.js/blob/f5444a16ec2ef7b82d30048890b613aa3865c1f1/packages/next/src/server/response-cache/types.ts#L76
-      appPageValue.rscData = Buffer.from(appPageData.rscData, "utf-8");
+      appPageValue.rscData = Buffer.from(appPageData.rscData, "base64");
     }
 
     if (appPageData.segmentData) {
@@ -81,7 +79,7 @@ export function convertStringsToBuffers(cacheValue: CacheHandlerValue) {
       appPageValue.segmentData = new Map(
         Object.entries(appPageData.segmentData).map(([key, value]) => [
           key,
-          Buffer.from(value, "utf-8"),
+          Buffer.from(value, "base64"),
         ]),
       );
     }

packages/nextjs-cache-handler/src/helpers/buffer.ts

@@ -260,16 +260,50 @@ export async function registerInitialCache(
     let html: string | undefined;
     let pageData: string | object | undefined;
     let meta: NextRouteMetadata | undefined;
+    let rscData: string | undefined;
+
+    if (debug) {
+      console.info(
+        "[CacheHandler] [%s] %s",
+        "registerInitialCache",
+        "Reading file system cache",
+      );
+    }
 
     try {
-      [html, pageData, meta] = await Promise.all([
+      [html, pageData, rscData, meta] = await Promise.all([
         fsPromises.readFile(`${pathToRouteFiles}.html`, "utf-8"),
         fsPromises
           .readFile(
             `${pathToRouteFiles}.${isAppRouter ? "rsc" : "json"}`,
             "utf-8",
           )
-          .then((data) => (isAppRouter ? data : (JSON.parse(data) as object))),
+          .then((data) => (isAppRouter ? data : (JSON.parse(data) as object)))
+          .catch((error) => {
+            console.warn(
+              "[CacheHandler] [%s] %s %s",
+              "registerInitialCache",
+              "Failed to read page data, assuming it does not exist",
+              `Error: ${error}`,
+            );
+
+            return undefined;
+          }),
+        isAppRouter
+          ? fsPromises
+              .readFile(`${pathToRouteFiles}.prefetch.rsc`, "utf-8")
+              .then((data) => data)
+              .catch((error) => {
+                console.warn(
+                  "[CacheHandler] [%s] %s %s",
+                  "registerInitialCache",
+                  "Failed to read page prefetch data, assuming it does not exist",
+                  `Error: ${error}`,
+                );
+
+                return undefined;
+              })
+          : undefined,
         isAppRouter
           ? fsPromises
               .readFile(`${pathToRouteFiles}.meta`, "utf-8")
@@ -289,23 +323,40 @@ export async function registerInitialCache(
       return;
     }
 
+    if (debug) {
+      console.info(
+        "[CacheHandler] [%s] %s",
+        "registerInitialCache",
+        "Saving file system cache to cache handler",
+      );
+    }
+
     try {
       const value: IncrementalCachedAppPageValue &
-        Pick<IncrementalCachedPageValue, "pageData"> = {
+        Partial<Pick<IncrementalCachedPageValue, "pageData">> = {
         kind: (isAppRouter ? "APP_PAGE" : "PAGES") as unknown as any,
         html,
         pageData,
         postponed: meta?.postponed,
         headers: meta?.headers,
         status: meta?.status,
-        rscData: undefined,
-        segmentData: undefined,
+        rscData:
+          isAppRouter && rscData ? Buffer.from(rscData, "utf-8") : undefined,
+        segmentData: undefined, // TODO: Add segment data
       };
 
       await cacheHandler.set(cachePath, value, {
         revalidate,
         internal_lastModified: lastModified,
       });
+
+      if (debug) {
+        console.info(
+          "[CacheHandler] [%s] %s",
+          "registerInitialCache",
+          "Saved file system cache to cache handler",
+        );
+      }
     } catch (error) {
       if (debug) {
         console.warn(