Feat perf improvement (#641)

* perf improvement

* remove cache interception for PPR app

* lint fix

* changeset

* fix e2e

* set `enableCacheInterception` to false by default

* Update packages/cloudflare/src/api/config.ts

Co-authored-by: Victor Berchet <victor@suumit.com>

---------

Co-authored-by: Victor Berchet <victor@suumit.com>

Author: conico974

.changeset/lovely-rooms-taste.md

@@ -0,0 +1,8 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+some performance improvements
+
+- `enableCacheInterception` is now enabled by default, it loads ISR/SSG pages from cache without waiting for the js page bundle to load
+- `routePreloadingBehavior` is now set to `withWaitUntil`, which means a single route js will be lazy loaded on cold start, but other routes will be preloaded using `waitUntil` for better performance

examples/e2e/app-pages-router/open-next.config.ts

@@ -5,4 +5,5 @@ import memoryQueue from "@opennextjs/cloudflare/overrides/queue/memory-queue";
 export default defineCloudflareConfig({
   incrementalCache: r2IncrementalCache,
   queue: memoryQueue,
+  enableCacheInterception: true,
 });

examples/e2e/app-router/e2e/isr.test.ts

@@ -103,7 +103,9 @@ test.describe("dynamicParams set to true", () => {
   test("should be HIT on a path that was prebuilt", async ({ page }) => {
     const res = await page.goto("/isr/dynamic-params-true/1");
     expect(res?.status()).toEqual(200);
-    expect(res?.headers()["x-nextjs-cache"]).toEqual("HIT");
+    // TODO: sync this to aws
+    const cacheHeader = res?.headers()["x-nextjs-cache"] ?? res?.headers()["x-opennext-cache"];
+    expect(cacheHeader).toEqual("HIT");
     const title = await page.getByTestId("title").textContent();
     const content = await page.getByTestId("content").textContent();
     expect(title).toEqual("Post 1");
@@ -115,7 +117,9 @@ test.describe("dynamicParams set to true", () => {
   // We are gonna skip this one for now, turborepo caching can cause this page to be STALE once deployed
   test.skip("should SSR on a path that was not prebuilt", async ({ page }) => {
     const res = await page.goto("/isr/dynamic-params-true/11");
-    expect(res?.headers()["x-nextjs-cache"]).toEqual("MISS");
+    // TODO: sync this to aws
+    const cacheHeader = res?.headers()["x-nextjs-cache"] ?? res?.headers()["x-opennext-cache"];
+    expect(cacheHeader).toEqual("MISS");
     const title = await page.getByTestId("title").textContent();
     const content = await page.getByTestId("content").textContent();
     expect(title).toEqual("Post 11");
@@ -140,7 +144,9 @@ test.describe("dynamicParams set to false", () => {
   test("should be HIT on a path that was prebuilt", async ({ page }) => {
     const res = await page.goto("/isr/dynamic-params-false/1");
     expect(res?.status()).toEqual(200);
-    expect(res?.headers()["x-nextjs-cache"]).toEqual("HIT");
+    // TODO: sync this to aws
+    const cacheHeader = res?.headers()["x-nextjs-cache"] ?? res?.headers()["x-opennext-cache"];
+    expect(cacheHeader).toEqual("HIT");
     const title = await page.getByTestId("title").textContent();
     const content = await page.getByTestId("content").textContent();
     expect(title).toEqual("Post 1");

examples/e2e/app-router/open-next.config.ts

@@ -14,4 +14,5 @@ export default defineCloudflareConfig({
     },
   }),
   queue: doQueue,
+  enableCacheInterception: true,
 });

examples/playground14/open-next.config.ts

@@ -3,4 +3,5 @@ import kvIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cac
 
 export default defineCloudflareConfig({
   incrementalCache: kvIncrementalCache,
+  enableCacheInterception: true,
 });

examples/playground15/open-next.config.ts

@@ -3,4 +3,5 @@ import kvIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cac
 
 export default defineCloudflareConfig({
   incrementalCache: kvIncrementalCache,
+  enableCacheInterception: true,
 });

packages/cloudflare/src/api/config.ts

@@ -28,6 +28,13 @@ export type CloudflareOverrides = {
    * Sets the revalidation queue implementation
    */
   queue?: "direct" | Override<Queue>;
+
+  /**
+   * Enable cache interception
+   * Should be `false` when PPR is used
+   * @default false
+   */
+  enableCacheInterception?: boolean;
 };
 
 /**
@@ -37,7 +44,7 @@ export type CloudflareOverrides = {
  * @returns the OpenNext configuration object
  */
 export function defineCloudflareConfig(config: CloudflareOverrides = {}): OpenNextConfig {
-  const { incrementalCache, tagCache, queue } = config;
+  const { incrementalCache, tagCache, queue, enableCacheInterception = false } = config;
 
   return {
     default: {
@@ -49,12 +56,16 @@ export function defineCloudflareConfig(config: CloudflareOverrides = {}): OpenNe
         tagCache: resolveTagCache(tagCache),
         queue: resolveQueue(queue),
       },
+      routePreloadingBehavior: "withWaitUntil",
     },
     // node:crypto is used to compute cache keys
     edgeExternals: ["node:crypto"],
     cloudflare: {
       useWorkerdCondition: true,
     },
+    dangerous: {
+      enableCacheInterception,
+    },
   };
 }