[dynamicIO] wait for cache signal before validating

wait for caches to fill in dev before performing validation

packages/next/src/server/app-render/app-render.tsx

@@ -1942,6 +1942,7 @@ async function spawnDynamicValidationInDev(
 ): Promise<void> {
   const { componentMod: ComponentMod } = ctx
 
+  const cacheSignal = new CacheSignal()
   const firstAttemptServerController = new AbortController()
   let serverDynamicTracking = createDynamicTrackingState(false)
 
@@ -1950,20 +1951,20 @@ async function spawnDynamicValidationInDev(
     phase: 'render',
     implicitTags: [],
     renderSignal: firstAttemptServerController.signal,
-    cacheSignal: null,
+    cacheSignal,
     // During the prospective render we don't want to synchronously abort on dynamic access
     // because it could prevent us from discovering all caches in siblings. So we omit the controller
     // from the prerender store this time.
     controller: firstAttemptServerController,
     // With PPR during Prerender we don't need to track individual dynamic reasons
     // because we will always do a final render after caches have filled and we
     // will track it again there
-    dynamicTracking: serverDynamicTracking,
+    dynamicTracking: null,
     revalidate: INFINITE_CACHE,
     expire: INFINITE_CACHE,
     stale: INFINITE_CACHE,
     tags: [],
-    // Dev only property that allows certain logs to be supressed
+    // Dev only property that allows certain logs to be suppressed
     validating: true,
   }
 
@@ -1977,80 +1978,70 @@ async function spawnDynamicValidationInDev(
 
   let reactServerStream = await workUnitAsyncStorage.run(
     firstAttemptServerPrerenderStore,
+    ComponentMod.renderToReadableStream,
+    firstAttemptRSCPayload,
+    clientReferenceManifest.clientModules,
+    {
+      signal: firstAttemptServerController.signal,
+      onError: () => {},
+    }
+  )
+
+  await cacheSignal.cacheReady()
+  firstAttemptServerController.abort()
+
+  const secondAttemptServerController = new AbortController()
+  serverDynamicTracking = createDynamicTrackingState(false)
+
+  const secondAttemptServerPrerenderStore: PrerenderStore = {
+    type: 'prerender',
+    phase: 'render',
+    implicitTags: [],
+    renderSignal: secondAttemptServerController.signal,
+    cacheSignal: null,
+    // During the prospective render we don't want to synchronously abort on dynamic access
+    // because it could prevent us from discovering all caches in siblings. So we omit the controller
+    // from the prerender store this time.
+    controller: secondAttemptServerController,
+    // With PPR during Prerender we don't need to track individual dynamic reasons
+    // because we will always do a final render after caches have filled and we
+    // will track it again there
+    dynamicTracking: serverDynamicTracking,
+    revalidate: INFINITE_CACHE,
+    expire: INFINITE_CACHE,
+    stale: INFINITE_CACHE,
+    tags: [],
+    // Dev only property that allows certain logs to be suppressed
+    validating: true,
+  }
+
+  const secondAttemptRSCPayload = await workUnitAsyncStorage.run(
+    secondAttemptServerPrerenderStore,
+    getRSCPayload,
+    tree,
+    ctx,
+    isNotFound
+  )
+
+  reactServerStream = await workUnitAsyncStorage.run(
+    secondAttemptServerPrerenderStore,
     scheduleInSequentialTasks,
     () => {
       const stream = ComponentMod.renderToReadableStream(
-        firstAttemptRSCPayload,
+        secondAttemptRSCPayload,
         clientReferenceManifest.clientModules,
         {
-          signal: firstAttemptServerController.signal,
+          signal: secondAttemptServerController.signal,
           onError: () => {},
         }
       )
-      return asHaltedStream(stream, firstAttemptServerController.signal)
+      return asHaltedStream(stream, secondAttemptServerController.signal)
     },
     () => {
-      firstAttemptServerController.abort()
+      secondAttemptServerController.abort()
     }
   )
 
-  if (serverDynamicTracking.syncDynamicErrorWithStack) {
-    // If we had a sync dynamic error then we need to retry without
-    reactServerStream.cancel()
-
-    const secondAttemptServerController = new AbortController()
-    serverDynamicTracking = createDynamicTrackingState(false)
-
-    const secondAttemptServerPrerenderStore: PrerenderStore = {
-      type: 'prerender',
-      phase: 'render',
-      implicitTags: [],
-      renderSignal: secondAttemptServerController.signal,
-      cacheSignal: null,
-      // During the prospective render we don't want to synchronously abort on dynamic access
-      // because it could prevent us from discovering all caches in siblings. So we omit the controller
-      // from the prerender store this time.
-      controller: secondAttemptServerController,
-      // With PPR during Prerender we don't need to track individual dynamic reasons
-      // because we will always do a final render after caches have filled and we
-      // will track it again there
-      dynamicTracking: serverDynamicTracking,
-      revalidate: INFINITE_CACHE,
-      expire: INFINITE_CACHE,
-      stale: INFINITE_CACHE,
-      tags: [],
-      // Dev only property that allows certain logs to be supressed
-      validating: true,
-    }
-
-    const secondAttemptRSCPayload = await workUnitAsyncStorage.run(
-      secondAttemptServerPrerenderStore,
-      getRSCPayload,
-      tree,
-      ctx,
-      isNotFound
-    )
-
-    reactServerStream = await workUnitAsyncStorage.run(
-      secondAttemptServerPrerenderStore,
-      scheduleInSequentialTasks,
-      () => {
-        const stream = ComponentMod.renderToReadableStream(
-          secondAttemptRSCPayload,
-          clientReferenceManifest.clientModules,
-          {
-            signal: secondAttemptServerController.signal,
-            onError: () => {},
-          }
-        )
-        return asHaltedStream(stream, secondAttemptServerController.signal)
-      },
-      () => {
-        secondAttemptServerController.abort()
-      }
-    )
-  }
-
   const [warmupStream, renderStream] = reactServerStream.tee()
 
   await warmFlightResponse(warmupStream, clientReferenceManifest)

packages/next/src/server/base-server.ts

@@ -3085,34 +3085,27 @@ export default abstract class Server<
         if (this.renderOpts.dev) {
           let cache = this.prefetchCacheScopesDev.get(urlPathname)
 
+          if (isServerAction || !cache) {
+            cache = new Map()
+            this.prefetchCacheScopesDev.set(urlPathname, cache)
+          }
+
           // we need to seed the prefetch cache scope in dev
           // since we did not have a prefetch cache available
           // and this is not a prefetch request
           if (
-            !cache &&
             !isPrefetchRSCRequest &&
             routeModule?.definition.kind === RouteKind.APP_PAGE &&
             !isServerAction
           ) {
-            cache = new Map()
-
             await runWithCacheScope({ cache }, () =>
               originalResponseGenerator({ ...state, isDevWarmup: true })
             )
-            this.prefetchCacheScopesDev.set(urlPathname, cache)
           }
 
-          if (cache) {
-            return runWithCacheScope({ cache }, () =>
-              originalResponseGenerator(state)
-            ).finally(() => {
-              if (isPrefetchRSCRequest) {
-                this.prefetchCacheScopesDev.set(urlPathname, cache)
-              } else {
-                this.prefetchCacheScopesDev.del(urlPathname)
-              }
-            })
-          }
+          return runWithCacheScope({ cache }, () =>
+            originalResponseGenerator(state)
+          )
         }
 
         return originalResponseGenerator(state)

packages/next/src/server/lib/prefetch-cache-scopes.ts

@@ -13,7 +13,7 @@ export class PrefetchCacheScopes {
 
   private evict() {
     for (const [key, value] of this.cacheScopes) {
-      if (value.timestamp < Date.now() - 30_000) {
+      if (value.timestamp < Date.now() - 5_000) {
         this.cacheScopes.delete(key)
       }
     }
@@ -23,7 +23,14 @@ export class PrefetchCacheScopes {
   // filter _rsc query
   get(url: string) {
     setImmediate(() => this.evict())
-    return this.cacheScopes.get(url)?.cache
+    const currentScope = this.cacheScopes.get(url)
+    if (currentScope) {
+      if (currentScope.timestamp < Date.now() - 5_000) {
+        return undefined
+      }
+      return currentScope.cache
+    }
+    return undefined
   }
 
   set(url: string, cache: CacheScopeStore['cache']) {

packages/next/src/server/use-cache/use-cache-wrapper.ts

@@ -516,6 +516,14 @@ export function cache(kind: string, id: string, fn: any) {
       const cacheScope: undefined | CacheScopeStore =
         cacheScopeAsyncLocalStorage.getStore()
       if (cacheScope) {
+        const cacheSignal =
+          workUnitStore && workUnitStore.type === 'prerender'
+            ? workUnitStore.cacheSignal
+            : null
+
+        if (cacheSignal) {
+          cacheSignal.beginRead()
+        }
         const cachedEntry: undefined | Promise<CacheEntry> =
           cacheScope.cache.get(serializedCacheKey)
         if (cachedEntry !== undefined) {
@@ -532,14 +540,44 @@ export function cache(kind: string, id: string, fn: any) {
             // expire time is under 5 minutes, then we consider this cache entry dynamic
             // as it's not worth generating static pages for such data. It's better to leave
             // a PPR hole that can be filled in dynamically with a potentially cached entry.
+            if (cacheSignal) {
+              cacheSignal.endRead()
+            }
             return makeHangingPromise(
               workUnitStore.renderSignal,
               'dynamic "use cache"'
             )
           }
           const [streamA, streamB] = existingEntry.value.tee()
           existingEntry.value = streamB
-          stream = streamA
+
+          if (cacheSignal) {
+            // When we have a cacheSignal we need to block on reading the cache
+            // entry before ending the read.
+            const buffer: any[] = []
+            const reader = streamA.getReader()
+            for (let entry; !(entry = await reader.read()).done; ) {
+              buffer.push(entry.value)
+            }
+
+            let idx = 0
+            stream = new ReadableStream({
+              pull(controller) {
+                if (idx < buffer.length) {
+                  controller.enqueue(buffer[idx++])
+                } else {
+                  controller.close()
+                }
+              },
+            })
+            cacheSignal.endRead()
+          } else {
+            stream = streamA
+          }
+        } else {
+          if (cacheSignal) {
+            cacheSignal.endRead()
+          }
         }
       }
 

test/development/app-dir/dynamic-io-dev-cache-scope/app/api/data.ts

@@ -0,0 +1,9 @@
+function delay() {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 100)
+  })
+}
+export async function fetchData() {
+  await delay()
+  return '' + Math.random()
+}

test/development/app-dir/dynamic-io-dev-cache-scope/app/cached/page.tsx

@@ -0,0 +1,42 @@
+import {
+  revalidateTag,
+  unstable_cacheLife as cacheLife,
+  unstable_cacheTag,
+} from 'next/cache'
+import { fetchData } from '../api/data'
+// import { Suspense } from 'react'
+// import { cookies, headers } from 'next/headers'
+
+function InnerComponent({ children }) {
+  return <span id="value">{children}</span>
+}
+
+async function refresh() {
+  'use server'
+  revalidateTag('hello')
+}
+
+async function reload() {
+  'use server'
+}
+
+async function Component() {
+  'use cache'
+  cacheLife({ revalidate: 6 })
+  unstable_cacheTag('hello')
+  return <InnerComponent>{await fetchData()}</InnerComponent>
+}
+
+export default async function Home() {
+  return (
+    <>
+      <form action={refresh}>
+        <button id="refresh">Refresh</button>
+      </form>
+      <form action={reload}>
+        <button id="reload">Reload</button>
+      </form>
+      <Component />
+    </>
+  )
+}

test/development/app-dir/dynamic-io-dev-cache-scope/app/layout.tsx

@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}

test/development/app-dir/dynamic-io-dev-cache-scope/app/uncached/page.tsx

@@ -0,0 +1,33 @@
+import { fetchData } from '../api/data'
+// import { Suspense } from 'react'
+// import { cookies, headers } from 'next/headers'
+
+function InnerComponent({ children }) {
+  return <span id="value">{children}</span>
+}
+
+async function refresh() {
+  'use server'
+}
+
+async function reload() {
+  'use server'
+}
+
+async function Component() {
+  return <InnerComponent>{await fetchData()}</InnerComponent>
+}
+
+export default async function Home() {
+  return (
+    <>
+      <form action={refresh}>
+        <button id="refresh">Refresh</button>
+      </form>
+      <form action={reload}>
+        <button id="reload">Reload</button>
+      </form>
+      <Component />
+    </>
+  )
+}