feat: introduce dynamicIO

Author: hiroppy

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",

pnpm-lock.yaml

@@ -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();

public/service-worker.js

@@ -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/api/now/route.ts

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

src/app/examples/(caching)/data-cache/fetch/no-store/page.tsx src/app/examples/(caching)/_data-cache/fetch/no-store/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)/data-cache/fetch/page.tsx src/app/examples/(caching)/_data-cache/fetch/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)/data-cache/fetch/revalidate/layout.tsx src/app/examples/(caching)/_data-cache/fetch/revalidate/layout.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)/data-cache/fetch/revalidate/page.tsx src/app/examples/(caching)/_data-cache/fetch/revalidate/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)/data-cache/fetch/revalidate/revalidate-path/page.tsx src/app/examples/(caching)/_data-cache/fetch/revalidate/revalidate-path/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)/data-cache/fetch/revalidate/revalidate-tag/page.tsx src/app/examples/(caching)/_data-cache/fetch/revalidate/revalidate-tag/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>;
+}

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

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