Move reactLoadableManifest/assetPrefix to workStore (#70768)

packages/next/src/client/components/request-async-storage.external.ts

@@ -6,7 +6,6 @@ import type { ReadonlyRequestCookies } from '../../server/web/spec-extension/ada
 
 // Share the instance module in the next-shared layer
 import { requestAsyncStorage } from './request-async-storage-instance' with { 'turbopack-transition': 'next-shared' }
-import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 import type { AfterContext } from '../../server/after/after-context'
 import type { ServerComponentsHmrCache } from '../../server/response-cache'
 
@@ -34,10 +33,6 @@ export interface RequestStore {
   readonly cookies: ReadonlyRequestCookies
   readonly mutableCookies: ResponseCookies
   readonly draftMode: DraftModeProvider
-  readonly reactLoadableManifest: DeepReadonly<
-    Record<string, { files: string[] }>
-  >
-  readonly assetPrefix: string
   readonly afterContext: AfterContext | undefined
   readonly isHmrRefresh?: boolean
   readonly serverComponentsHmrCache?: ServerComponentsHmrCache

packages/next/src/client/components/work-async-storage.external.ts

@@ -4,6 +4,7 @@ import type { DynamicServerError } from './hooks-server-context'
 import type { FetchMetrics } from '../../server/base-http'
 import type { Revalidate } from '../../server/lib/revalidate'
 import type { FallbackRouteParams } from '../../server/request/fallback-params'
+import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 
 // Share the instance module in the next-shared layer
 import { workAsyncStorage } from './work-async-storage-instance' with { 'turbopack-transition': 'next-shared' }
@@ -62,6 +63,11 @@ export interface WorkStore {
   requestEndedState?: { ended?: boolean }
 
   buildId: string
+
+  readonly reactLoadableManifest?: DeepReadonly<
+    Record<string, { files: string[] }>
+  >
+  readonly assetPrefix?: string
 }
 
 export type WorkAsyncStorage = AsyncLocalStorage<WorkStore>

packages/next/src/server/after/after-context.test.ts

@@ -498,8 +498,6 @@ const createMockRequestStore = (afterContext: AfterContext): RequestStore => {
   const partialStore: Partial<RequestStore> = {
     url: { pathname: '/', search: '' },
     afterContext: afterContext,
-    assetPrefix: '',
-    reactLoadableManifest: {},
     draftMode: undefined,
     isHmrRefresh: false,
     serverComponentsHmrCache: undefined,

packages/next/src/server/after/after-context.ts

@@ -141,8 +141,6 @@ function wrapRequestStoreForAfterCallbacks(
     },
     // TODO(after): calling a `cookies.set()` in an after() that's in an action doesn't currently error.
     mutableCookies: new ResponseCookies(new Headers()),
-    assetPrefix: requestStore.assetPrefix,
-    reactLoadableManifest: requestStore.reactLoadableManifest,
     afterContext: requestStore.afterContext,
     isHmrRefresh: requestStore.isHmrRefresh,
     serverComponentsHmrCache: requestStore.serverComponentsHmrCache,

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

@@ -42,15 +42,7 @@ function getMutableCookies(
 }
 
 export type WrapperRenderOpts = RequestLifecycleOpts &
-  Partial<
-    Pick<
-      RenderOpts,
-      | 'ComponentMod'
-      | 'onUpdateCookies'
-      | 'assetPrefix'
-      | 'reactLoadableManifest'
-    >
-  > & {
+  Partial<Pick<RenderOpts, 'onUpdateCookies'>> & {
     experimental: Pick<RenderOpts['experimental'], 'after'>
     previewProps?: __ApiPreviewProps
   }
@@ -196,8 +188,6 @@ export const withRequestStore: WithStore<RequestStore, RequestContext> = <
       return cache.draftMode
     },
 
-    reactLoadableManifest: renderOpts?.reactLoadableManifest || {},
-    assetPrefix: renderOpts?.assetPrefix || '',
     afterContext: createAfterContext(renderOpts),
     isHmrRefresh,
     serverComponentsHmrCache:

packages/next/src/server/async-storage/with-work-store.ts

@@ -2,7 +2,7 @@ import type { WithStore } from './with-store'
 import type { WorkStore } from '../../client/components/work-async-storage.external'
 import type { AsyncLocalStorage } from 'async_hooks'
 import type { IncrementalCache } from '../lib/incremental-cache'
-import type { RenderOptsPartial } from '../app-render/types'
+import type { RenderOpts } from '../app-render/types'
 import type { FetchMetric } from '../base-http'
 import type { RequestLifecycleOpts } from '../base-server'
 import type { FallbackRouteParams } from '../request/fallback-params'
@@ -30,7 +30,7 @@ export type WorkStoreContext = {
     isServerAction?: boolean
     pendingWaitUntil?: Promise<any>
     experimental: Pick<
-      RenderOptsPartial['experimental'],
+      RenderOpts['experimental'],
       'isRoutePPREnabled' | 'after' | 'dynamicIO'
     >
 
@@ -49,17 +49,19 @@ export type WorkStoreContext = {
     // TODO: remove this when we resolve accessing the store outside the execution context
     store?: WorkStore
   } & Pick<
-    // Pull some properties from RenderOptsPartial so that the docs are also
+    // Pull some properties from RenderOpts so that the docs are also
     // mirrored.
-    RenderOptsPartial,
+    RenderOpts,
+    | 'assetPrefix'
     | 'supportsDynamicResponse'
     | 'isRevalidate'
     | 'nextExport'
     | 'isDraftMode'
     | 'isDebugDynamicAccesses'
     | 'buildId'
   > &
-    Partial<RequestLifecycleOpts>
+    Partial<RequestLifecycleOpts> &
+    Partial<Pick<RenderOpts, 'reactLoadableManifest'>>
 }
 
 export const withWorkStore: WithStore<WorkStore, WorkStoreContext> = <Result>(
@@ -114,6 +116,8 @@ export const withWorkStore: WithStore<WorkStore, WorkStoreContext> = <Result>(
     requestEndedState,
     isPrefetchRequest,
     buildId: renderOpts.buildId,
+    reactLoadableManifest: renderOpts?.reactLoadableManifest || {},
+    assetPrefix: renderOpts?.assetPrefix || '',
   }
 
   // TODO: remove this when we resolve accessing the store outside the execution context

packages/next/src/shared/lib/lazy-dynamic/preload-chunks.tsx

@@ -2,7 +2,7 @@
 
 import { preload } from 'react-dom'
 
-import { getExpectedRequestStore } from '../../../client/components/request-async-storage.external'
+import { workAsyncStorage } from '../../../client/components/work-async-storage.external'
 import { encodeURIPath } from '../encode-uri-path'
 
 export function PreloadChunks({
@@ -15,13 +15,17 @@ export function PreloadChunks({
     return null
   }
 
-  const requestStore = getExpectedRequestStore('next/dynamic preload')
+  const workStore = workAsyncStorage.getStore()
+  if (workStore === undefined) {
+    return null
+  }
+
   const allFiles = []
 
   // Search the current dynamic call unique key id in react loadable manifest,
   // and find the corresponding CSS files to preload
-  if (requestStore.reactLoadableManifest && moduleIds) {
-    const manifest = requestStore.reactLoadableManifest
+  if (workStore.reactLoadableManifest && moduleIds) {
+    const manifest = workStore.reactLoadableManifest
     for (const key of moduleIds) {
       if (!manifest[key]) continue
       const chunks = manifest[key].files
@@ -36,7 +40,7 @@ export function PreloadChunks({
   return (
     <>
       {allFiles.map((chunk) => {
-        const href = `${requestStore.assetPrefix}/_next/${encodeURIPath(chunk)}`
+        const href = `${workStore.assetPrefix}/_next/${encodeURIPath(chunk)}`
         const isCss = chunk.endsWith('.css')
         // If it's stylesheet we use `precedence` o help hoist with React Float.
         // For stylesheets we actually need to render the CSS because nothing else is going to do it so it needs to be part of the component tree.