feat: introduce dynamicIO

next.config.ts

@@ -1,13 +1,13 @@
-import type { NextConfig } from 'next';
+import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   // logging: {
   //   fetches: {
   //     fullUrl: true,
   //   },
   // },
-  transpilePackages: ["shiki"],
   experimental: {
+    dynamicIO: true,
     taint: true,
     // typedRoutes: true,
   },

package.json

@@ -19,7 +19,7 @@
     "@shikijs/transformers": "^1.22.2",
     "algoliasearch": "^4.24.0",
     "instantsearch.js": "^4.75.3",
-    "next": "15.0.1",
+    "next": "canary",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-instantsearch": "^7.13.6",

public/service-worker.js

@@ -11,7 +11,7 @@ self.addEventListener("fetch", (e) => {
     e.respondWith(
       (async () => {
         const res = await fetch(e.request);
-        const createdAt = Date.now();
+        const createdAt = performance.now();
 
         // res.text() fails is when trying to read the same response stream twice.
         const clone = res.clone();

src/app/search/page.tsx → src/app/_search/page.tsx

@@ -5,12 +5,12 @@ import { Result } from "@/app/_components/search/result";
 import { SearchBox } from "@/app/_components/search/searchBox";
 import { client } from "@/app/_utils/algolia";
 import { Suspense, useState } from "react";
-import { Configure } from "react-instantsearch";
-import { InstantSearchNext } from "react-instantsearch-nextjs";
+// TODO: need to upgrade below
+// Error: Route "/(.)search" used `headers().get('x-nonce')`. `headers()` should be awaited before using its value.
+// import { Configure } from "react-instantsearch";
+// import { InstantSearchNext } from "react-instantsearch-nextjs";
 import { meta } from "../examples/data";
 
-export const dynamic = "force-dynamic";
-
 export default function Page() {
   const [tag, setTag] = useState<string | null>(null);
 
@@ -42,7 +42,7 @@ export default function Page() {
         ))}
       </ul>
       <div className="flex-1 w-full md:w-0">
-        <Suspense>
+        {/* <Suspense>
           <InstantSearchNext indexName="examples" searchClient={client}>
             <Configure tagFilters={tag ?? undefined} />
             <div className="text-gray-200 flex flex-col gap-4">
@@ -55,7 +55,7 @@ export default function Page() {
               </footer>
             </div>
           </InstantSearchNext>
-        </Suspense>
+        </Suspense> */}
       </div>
     </div>
   );

src/app/api/now/route.ts

@@ -1,9 +1,7 @@
 import { NextResponse } from "next/server";
 
-export const revalidate = 0;
-
 export async function GET() {
   return NextResponse.json({
-    now: Date.now(),
+    now: performance.now(),
   });
 }

src/app/examples/(caching)/data-cache/no-fetch/data.ts → src/app/examples/(caching)/_data-cache/no-fetch/data.ts

@@ -1,3 +1,3 @@
 export async function getNow(id?: string) {
-  return Date.now();
+  return performance.now();
 }

src/app/examples/(caching)/full-route-cache/dynamic/page.tsx → src/app/examples/(caching)/_full-route-cache/dynamic/page.tsx

@@ -1,12 +1,10 @@
+"use cache";
+
 // [!code word:force-dynamic]
 import { Boundary } from "@/app/_components/boundary";
 import { Suspense } from "react";
 
-export const dynamic = "force-dynamic";
-// or
-// export const revalidate = 0;
-
-export default function Page() {
+export default async function Page() {
   return (
     <div className="flex gap-4">
       <Suspense fallback={<Loading />}>

src/app/examples/(caching)/full-route-cache/page.tsx → src/app/examples/(caching)/_full-route-cache/page.tsx

@@ -1,8 +1,10 @@
+"use cache";
+
 import { Boundary } from "@/app/_components/boundary";
 import { Link } from "@/app/_components/link";
 import type { PropsWithChildren } from "react";
 
-export default function Page() {
+export default async function Page() {
   return (
     <Boundary label="Page">
       <div className="flex flex-col gap-2">

src/app/examples/(caching)/_full-route-cache/revalidation/page.tsx

@@ -0,0 +1,8 @@
+// [!code word:revalidate]
+import { Boundary } from "@/app/_components/boundary";
+
+export default async function Page() {
+  "use cache";
+
+  return <Boundary label="Page">{performance.now()}</Boundary>;
+}

src/app/examples/(caching)/full-route-cache/static/page.tsx → src/app/examples/(caching)/_full-route-cache/static/page.tsx

@@ -1,7 +1,9 @@
+"use cache";
+
 import { Boundary } from "@/app/_components/boundary";
 import { Suspense } from "react";
 
-export default function Page() {
+export default async function Page() {
   return (
     <div className="flex gap-4 w-full">
       <Suspense fallback={<Loading />}>

src/app/examples/(caching)/dynamicIO/directive/component-level/page.tsx

@@ -0,0 +1,20 @@
+// [!code word:use cache]
+
+export default async function Page() {
+  return (
+    <div className="space-y-4">
+      <NoCached />
+      <Cached />
+    </div>
+  );
+}
+
+async function NoCached() {
+  return <p>no cached: {performance.now()}</p>;
+}
+
+async function Cached() {
+  "use cache";
+
+  return <p>cached: {performance.now()}</p>;
+}

src/app/examples/(caching)/dynamicIO/directive/file-level/page.tsx

@@ -0,0 +1,16 @@
+// [!code word:use cache]
+
+"use cache";
+
+export default async function Page() {
+  return (
+    <div>
+      <p>{performance.now()}</p>
+      <Child />
+    </div>
+  );
+}
+
+function Child() {
+  return <p>{performance.now()}</p>;
+}