add e2e test

Author: conico974

examples/experimental/next.config.ts

@@ -10,6 +10,7 @@ const nextConfig: NextConfig = {
   experimental: {
     ppr: "incremental",
     nodeMiddleware: true,
+    dynamicIO: true,
   },
 };
 

examples/experimental/src/app/api/revalidate/route.ts

@@ -0,0 +1,6 @@
+import { revalidateTag } from "next/cache";
+
+export function GET() {
+  revalidateTag("fullyTagged");
+  return new Response("DONE");
+}

examples/experimental/src/app/use-cache/isr/page.tsx

@@ -0,0 +1,17 @@
+import { FullyCachedComponent, ISRComponent } from "@/components/cached";
+import { Suspense } from "react";
+
+export default async function Page() {
+  // Not working for now, need a patch in next to disable full revalidation during ISR revalidation
+  return (
+    <div>
+      <h1>Cache</h1>
+      <Suspense fallback={<p>Loading...</p>}>
+        <FullyCachedComponent />
+      </Suspense>
+      <Suspense fallback={<p>Loading...</p>}>
+        <ISRComponent />
+      </Suspense>
+    </div>
+  );
+}

examples/experimental/src/app/use-cache/layout.tsx

@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <Suspense fallback={<p>Loading...</p>}>{children}</Suspense>
+    </div>
+  );
+}

examples/experimental/src/app/use-cache/ssr/page.tsx

@@ -0,0 +1,20 @@
+import { FullyCachedComponent, ISRComponent } from "@/components/cached";
+import { headers } from "next/headers";
+import { Suspense } from "react";
+
+export default async function Page() {
+  // To opt into SSR
+  const _headers = await headers();
+  return (
+    <div>
+      <h1>Cache</h1>
+      <p>{_headers.get("accept") ?? "No accept headers"}</p>
+      <Suspense fallback={<p>Loading...</p>}>
+        <FullyCachedComponent />
+      </Suspense>
+      <Suspense fallback={<p>Loading...</p>}>
+        <ISRComponent />
+      </Suspense>
+    </div>
+  );
+}

examples/experimental/src/components/cached.tsx

@@ -0,0 +1,24 @@
+import { unstable_cacheTag, unstable_cacheLife } from "next/cache";
+
+export async function FullyCachedComponent() {
+  "use cache";
+  unstable_cacheTag("fullyTagged");
+  return (
+    <div>
+      <p data-testid="fullyCached">{Date.now()}</p>
+    </div>
+  );
+}
+
+export async function ISRComponent() {
+  "use cache";
+  unstable_cacheLife({
+    stale: 1,
+    revalidate: 5,
+  });
+  return (
+    <div>
+      <p data-testid="isr">{Date.now()}</p>
+    </div>
+  );
+}

packages/open-next/src/adapters/composable-cache.ts

@@ -106,4 +106,10 @@ export default {
     }
     await globalThis.tagCache.writeTags(Array.from(setToWrite));
   },
+
+  // This one is necessary for older versions of next
+  async receiveExpiredTags(...tags: string[]) {
+    // This function does absolutely nothing
+    return;
+  },
 } satisfies ComposableCacheHandler;

packages/open-next/src/types/cache.ts

@@ -164,4 +164,8 @@ export interface ComposableCacheHandler {
   refreshTags(): Promise<void>;
   getExpiration(...tags: string[]): Promise<number>;
   expireTags(...tags: string[]): Promise<void>;
+  /**
+   * This function is only there for older versions and do nothing
+   */
+  receiveExpiredTags(...tags: string[]): Promise<void>;
 }

packages/tests-e2e/tests/experimental/use-cache.test.ts

@@ -0,0 +1,46 @@
+import { test, expect } from "@playwright/test";
+
+test("cached component should work in ssr", async ({ page }) => {
+  await page.goto("/use-cache/ssr");
+  let fullyCachedElt = page.getByTestId("fullyCached");
+  let isrElt = page.getByTestId("isr");
+  await expect(fullyCachedElt).toBeVisible();
+  await expect(isrElt).toBeVisible();
+
+  const initialFullyCachedText = await fullyCachedElt.textContent();
+  const initialIsrText = await isrElt.textContent();
+
+  let isrText = initialIsrText;
+
+  do {
+    await page.reload();
+    fullyCachedElt = page.getByTestId("fullyCached");
+    isrElt = page.getByTestId("isr");
+    await expect(fullyCachedElt).toBeVisible();
+    await expect(isrElt).toBeVisible();
+    isrText = await isrElt.textContent();
+    await page.waitForTimeout(1000);
+  } while (isrText === initialIsrText);
+
+  expect(fullyCachedElt).toHaveText(initialFullyCachedText ?? "");
+  expect(isrElt).not.toHaveText(initialIsrText ?? "");
+});
+
+test("revalidateTag should work for fullyCached component", async ({
+  page,
+  request,
+}) => {
+  await page.goto("/use-cache/ssr");
+  const fullyCachedElt = page.getByTestId("fullyCached");
+  await expect(fullyCachedElt).toBeVisible();
+
+  const initialFullyCachedText = await fullyCachedElt.textContent();
+
+  const resp = await request.get("/api/revalidate");
+  expect(resp.status()).toEqual(200);
+  expect(await resp.text()).toEqual("DONE");
+
+  await page.reload();
+  await expect(fullyCachedElt).toBeVisible();
+  expect(fullyCachedElt).not.toHaveText(initialFullyCachedText ?? "");
+});