[dynamicIO] Fix dev warmup (#77829)

When `dynamicIO` is enabled, we're triggering a warmup request in dev mode. This ensures that replayed logs are associated with the correct environment (`Prerender` vs. `Server`), by seeding the caches before the actual render.

This PR fixes two issues with the dev warmup:
- Ensures that cache keys are identical between the warmup, the subsequent dynamic render, and the dynamic validation, by providing the HMR refresh hash (part of the cache key) for all dev render phases.
- Ensures that stale cache entries are discarded during the warmup, by providing the implicit tags also during the warmup (and the dynamic validation).

Author: unstubbable

packages/next/src/client/components/app-router-headers.ts

@@ -12,6 +12,7 @@ export const NEXT_ROUTER_PREFETCH_HEADER = 'Next-Router-Prefetch' as const
 export const NEXT_ROUTER_SEGMENT_PREFETCH_HEADER =
   'Next-Router-Segment-Prefetch' as const
 export const NEXT_HMR_REFRESH_HEADER = 'Next-HMR-Refresh' as const
+export const NEXT_HMR_REFRESH_HASH_COOKIE = '__next_hmr_refresh_hash__' as const
 export const NEXT_URL = 'Next-Url' as const
 export const RSC_CONTENT_TYPE_HEADER = 'text/x-component' as const
 

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -46,6 +46,7 @@ import type { GlobalErrorComponent } from '../../error-boundary'
 import type { DevIndicatorServerState } from '../../../../server/dev/dev-indicator-server-state'
 import reportHmrLatency from '../utils/report-hmr-latency'
 import { TurbopackHmr } from '../utils/turbopack-hot-reloader-common'
+import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../app-router-headers'
 
 export interface Dispatcher {
   onBuildOk(): void
@@ -412,7 +413,7 @@ function processMessage(
 
       // Store the latest hash in a session cookie so that it's sent back to the
       // server with any subsequent requests.
-      document.cookie = `__next_hmr_refresh_hash__=${obj.hash}`
+      document.cookie = `${NEXT_HMR_REFRESH_HASH_COOKIE}=${obj.hash}`
 
       if (RuntimeErrorHandler.hadRuntimeError) {
         if (reloading) return

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

@@ -16,13 +16,14 @@ import type {
 import type { Params } from '../request/params'
 import type { ImplicitTags } from '../lib/implicit-tags'
 import type { WorkStore } from './work-async-storage.external'
+import { NEXT_HMR_REFRESH_HASH_COOKIE } from '../../client/components/app-router-headers'
 
 export type WorkUnitPhase = 'action' | 'render' | 'after'
 
 export interface CommonWorkUnitStore {
   /** NOTE: Will be mutated as phases change */
   phase: WorkUnitPhase
-  readonly implicitTags: ImplicitTags | undefined
+  readonly implicitTags: ImplicitTags
 }
 
 export interface RequestStore extends CommonWorkUnitStore {
@@ -121,6 +122,13 @@ export interface PrerenderStoreModern extends CommonWorkUnitStore {
   // not part of the primary render path and are just prerendering to produce
   // validation results
   validating?: boolean
+
+  /**
+   * The HMR refresh hash is only provided in dev mode. It is needed for the dev
+   * warmup render to ensure that the cache keys will be identical for the
+   * subsequent dynamic render.
+   */
+  readonly hmrRefreshHash: string | undefined
 }
 
 export interface PrerenderStorePPR extends CommonWorkUnitStore {
@@ -154,7 +162,16 @@ export type PrerenderStore =
   | PrerenderStorePPR
   | PrerenderStoreModern
 
-export interface UseCacheStore extends CommonWorkUnitStore {
+export interface CommonCacheStore
+  extends Omit<CommonWorkUnitStore, 'implicitTags'> {
+  /**
+   * A cache work unit store might not always have an outer work unit store,
+   * from which implicit tags could be inherited.
+   */
+  readonly implicitTags: ImplicitTags | undefined
+}
+
+export interface UseCacheStore extends CommonCacheStore {
   type: 'cache'
   // Collected revalidate times and tags for this cache entry during the cache render.
   revalidate: number // implicit revalidate time from inner caches / fetches
@@ -173,7 +190,7 @@ export interface UseCacheStore extends CommonWorkUnitStore {
   readonly draftMode: DraftModeProvider | undefined
 }
 
-export interface UnstableCacheStore extends CommonWorkUnitStore {
+export interface UnstableCacheStore extends CommonCacheStore {
   type: 'unstable-cache'
   // Draft mode is only available if the outer work unit store is a request
   // store and draft mode is enabled.
@@ -276,10 +293,10 @@ export function getHmrRefreshHash(
     return undefined
   }
 
-  return workUnitStore.type === 'cache'
+  return workUnitStore.type === 'cache' || workUnitStore.type === 'prerender'
     ? workUnitStore.hmrRefreshHash
     : workUnitStore.type === 'request'
-      ? workUnitStore.cookies.get('__next_hmr_refresh_hash__')?.value
+      ? workUnitStore.cookies.get(NEXT_HMR_REFRESH_HASH_COOKIE)?.value
       : undefined
 }
 

packages/next/src/server/app-render/work-unit-async-storage.external.ts

@@ -68,7 +68,7 @@ type RequestContext = RequestResponsePair & {
   renderOpts?: WrapperRenderOpts
   isHmrRefresh?: boolean
   serverComponentsHmrCache?: ServerComponentsHmrCache
-  implicitTags: ImplicitTags | undefined
+  implicitTags: ImplicitTags
 }
 
 type RequestResponsePair =

packages/next/src/server/async-storage/request-store.ts

@@ -393,6 +393,7 @@ export class AppRouteRouteModule extends RouteModule<
               stale: INFINITE_CACHE,
               tags: [...implicitTags.tags],
               prerenderResumeDataCache: null,
+              hmrRefreshHash: undefined,
             })
 
           let prospectiveResult
@@ -478,6 +479,7 @@ export class AppRouteRouteModule extends RouteModule<
             stale: INFINITE_CACHE,
             tags: [...implicitTags.tags],
             prerenderResumeDataCache: null,
+            hmrRefreshHash: undefined,
           })
 
           let responseHandled = false

packages/next/src/server/route-modules/app-route/module.ts

@@ -33,6 +33,7 @@ import { MiddlewareSpan } from '../lib/trace/constants'
 import { CloseController } from './web-on-close'
 import { getEdgePreviewProps } from './get-edge-preview-props'
 import { getBuiltinRequestContext } from '../after/builtin-request-context'
+import { getImplicitTags } from '../lib/implicit-tags'
 
 export class NextRequestHint extends NextRequest {
   sourcePage: string
@@ -251,18 +252,26 @@ export async function adapter(
               cookiesFromResponse = cookies
             }
             const previewProps = getEdgePreviewProps()
+            const page = '/' // Fake Work
+            const fallbackRouteParams = null
+
+            const implicitTags = await getImplicitTags(
+              page,
+              request.nextUrl,
+              fallbackRouteParams
+            )
 
             const requestStore = createRequestStoreForAPI(
               request,
               request.nextUrl,
-              undefined,
+              implicitTags,
               onUpdateCookies,
               previewProps
             )
 
             const workStore = createWorkStore({
-              page: '/', // Fake Work
-              fallbackRouteParams: null,
+              page,
+              fallbackRouteParams,
               renderOpts: {
                 cacheLifeProfiles:
                   params.request.nextConfig?.experimental?.cacheLife,

packages/next/src/server/web/adapter.ts

@@ -0,0 +1,7 @@
+import { revalidatePath } from 'next/cache'
+
+export async function GET() {
+  revalidatePath('/')
+
+  return Response.json({ revalidated: true })
+}

test/development/app-dir/dynamic-io-dev-warmup/app/revalidate/route.ts

@@ -21,13 +21,21 @@ describe('dynamic-io-dev-warmup', () => {
 
   it('logs with Prerender or Server environment depending based on whether the timing of when the log runs relative to this environment boundary', async () => {
     let browser = await next.browser('/')
-    // At the moment this second render is required for the logs to resolves in the expected environment
-    // This doesn't reproduce locally but I suspect some kind of lazy initialization during dev that leads the initial render
-    // to not resolve in a microtask on the first render.
-    await browser.close()
-    browser = await next.browser('/')
+    let logs = await browser.log()
+
+    assertLog(logs, 'after layout cache read', 'Prerender')
+    assertLog(logs, 'after page cache read', 'Prerender')
+    assertLog(logs, 'after cached layout fetch', 'Prerender')
+    assertLog(logs, 'after cached page fetch', 'Prerender')
+    assertLog(logs, 'after uncached layout fetch', 'Server')
+    assertLog(logs, 'after uncached page fetch', 'Server')
 
-    const logs = await browser.log()
+    // After a revalidation the subsequent warmup render must discard stale
+    // cache entries.
+    await next.fetch('/revalidate')
+
+    browser = await next.browser('/')
+    logs = await browser.log()
 
     assertLog(logs, 'after layout cache read', 'Prerender')
     assertLog(logs, 'after page cache read', 'Prerender')