test environment labels with sync IO

Author: lubieowoce

test/development/app-dir/cache-components-dev-warmup/cache-components.dev-warmup.test.ts

@@ -308,6 +308,51 @@ describe.each([
           await testNavigation(path, assertLogs)
         }
       })
+
+      it('sync IO in the static phase', async () => {
+        const path = '/sync-io/static'
+
+        const assertLogs = async (browser: Playwright) => {
+          const logs = await browser.log()
+
+          assertLog(logs, 'after first cache', 'Prerender')
+          // sync IO in the static stage errors and advances to Server.
+          assertLog(logs, 'after sync io', 'Server')
+          assertLog(logs, 'after cache read - page', 'Server')
+        }
+
+        if (isInitialLoad) {
+          await testInitialLoad(path, assertLogs)
+        } else {
+          await testNavigation(path, assertLogs)
+        }
+      })
+
+      it('sync IO in the runtime phase', async () => {
+        const path = '/sync-io/runtime'
+
+        const assertLogs = async (browser: Playwright) => {
+          const logs = await browser.log()
+
+          assertLog(logs, 'after first cache', 'Prerender')
+          assertLog(logs, 'after cookies', RUNTIME_ENV)
+          if (hasRuntimePrefetch) {
+            // if runtime prefetching is on, sync IO in the runtime stage errors and advances to Server.
+            assertLog(logs, 'after sync io', 'Server')
+            assertLog(logs, 'after cache read - page', 'Server')
+          } else {
+            // if runtime prefetching is not on, sync IO in the runtime stage does nothing.
+            assertLog(logs, 'after sync io', RUNTIME_ENV)
+            assertLog(logs, 'after cache read - page', RUNTIME_ENV)
+          }
+        }
+
+        if (isInitialLoad) {
+          await testInitialLoad(path, assertLogs)
+        } else {
+          await testNavigation(path, assertLogs)
+        }
+      })
     })
   }
 )

test/development/app-dir/cache-components-dev-warmup/fixtures/with-prefetch-config/app/page.tsx

@@ -20,6 +20,12 @@ export default function Page() {
         <li>
           <Link href="/apis/123">/apis/123</Link>
         </li>
+        <li>
+          <Link href="/sync-io/static">/sync-io/static</Link>
+        </li>
+        <li>
+          <Link href="/sync-io/runtime">/sync-io/runtime</Link>
+        </li>
       </ul>
     </main>
   )

test/development/app-dir/cache-components-dev-warmup/fixtures/with-prefetch-config/app/sync-io/runtime/page.tsx

@@ -0,0 +1,31 @@
+import { Suspense } from 'react'
+import { CachedData, getCachedData } from '../../data-fetching'
+import { cookies } from 'next/headers'
+
+export const unstable_prefetch = { mode: 'runtime', samples: [{}] }
+
+const CACHE_KEY = __dirname + '/__PAGE__'
+
+export default async function Page() {
+  return (
+    <main>
+      <h1>Sync IO - runtime stage</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Runtime />
+      </Suspense>
+    </main>
+  )
+}
+
+async function Runtime() {
+  await getCachedData(CACHE_KEY + '-1')
+  console.log(`after first cache`)
+
+  await cookies()
+  console.log(`after cookies`)
+
+  Date.now()
+  console.log(`after sync io`)
+
+  return <CachedData label="page" cacheKey={CACHE_KEY} />
+}

test/development/app-dir/cache-components-dev-warmup/fixtures/with-prefetch-config/app/sync-io/static/page.tsx

@@ -0,0 +1,20 @@
+import { CachedData, getCachedData } from '../../data-fetching'
+
+export const unstable_prefetch = { mode: 'runtime', samples: [{}] }
+
+const CACHE_KEY = __dirname + '/__PAGE__'
+
+export default async function Page() {
+  await getCachedData(CACHE_KEY + '-1')
+  console.log(`after first cache`)
+
+  Date.now()
+  console.log(`after sync io`)
+
+  return (
+    <main>
+      <h1>Sync IO - static stage</h1>
+      <CachedData label="page" cacheKey={CACHE_KEY} />
+    </main>
+  )
+}

test/development/app-dir/cache-components-dev-warmup/fixtures/without-prefetch-config/app/page.tsx

@@ -20,6 +20,12 @@ export default function Page() {
         <li>
           <Link href="/apis/123">/apis/123</Link>
         </li>
+        <li>
+          <Link href="/sync-io/static">/sync-io/static</Link>
+        </li>
+        <li>
+          <Link href="/sync-io/runtime">/sync-io/runtime</Link>
+        </li>
       </ul>
     </main>
   )

test/development/app-dir/cache-components-dev-warmup/fixtures/without-prefetch-config/app/sync-io/runtime/page.tsx

@@ -0,0 +1,29 @@
+import { Suspense } from 'react'
+import { CachedData, getCachedData } from '../../data-fetching'
+import { cookies } from 'next/headers'
+
+const CACHE_KEY = __dirname + '/__PAGE__'
+
+export default async function Page() {
+  return (
+    <main>
+      <h1>Sync IO - runtime stage</h1>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Runtime />
+      </Suspense>
+    </main>
+  )
+}
+
+async function Runtime() {
+  await getCachedData(CACHE_KEY + '-1')
+  console.log(`after first cache`)
+
+  await cookies()
+  console.log(`after cookies`)
+
+  Date.now()
+  console.log(`after sync io`)
+
+  return <CachedData label="page" cacheKey={CACHE_KEY} />
+}

test/development/app-dir/cache-components-dev-warmup/fixtures/without-prefetch-config/app/sync-io/static/page.tsx

@@ -0,0 +1,18 @@
+import { CachedData, getCachedData } from '../../data-fetching'
+
+const CACHE_KEY = __dirname + '/__PAGE__'
+
+export default async function Page() {
+  await getCachedData(CACHE_KEY + '-1')
+  console.log(`after first cache`)
+
+  Date.now()
+  console.log(`after sync io`)
+
+  return (
+    <main>
+      <h1>Sync IO - static stage</h1>
+      <CachedData label="page" cacheKey={CACHE_KEY} />
+    </main>
+  )
+}

test/development/app-dir/cache-components-dev-warmup/fixtures/without-prefetch-config/next.config.ts

@@ -1,9 +1,7 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  experimental: {
-    cacheComponents: true,
-  },
+  cacheComponents: true,
 }
 
 export default nextConfig