use a separate request store for the restarted render

Author: lubieowoce

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

@@ -1701,7 +1701,9 @@ async function renderToHTMLOrFlightImpl(
     const rootParams = getRootParams(loaderTree, ctx.getDynamicParamFromSegment)
     const devValidatingFallbackParams =
       getRequestMeta(req, 'devValidatingFallbackParams') || null
-    const requestStore = createRequestStoreForRender(
+
+    const createRequestStore = createRequestStoreForRender.bind(
+      null,
       req,
       res,
       url,
@@ -1714,6 +1716,7 @@ async function renderToHTMLOrFlightImpl(
       renderResumeDataCache,
       devValidatingFallbackParams
     )
+    const requestStore = createRequestStore()
 
     if (
       process.env.NODE_ENV === 'development' &&
@@ -1725,6 +1728,9 @@ async function renderToHTMLOrFlightImpl(
     ) {
       const setIsrStatus = renderOpts.setIsrStatus
       req.originalRequest.on('end', () => {
+        // Note: if we're in Cache Components mode, and we restart the render due to a cache miss,
+        // we'll create a new request store, and the ISR status will not be picked up here.
+        // This is fine, because the indicator isn't useful in CC mode anyway.
         if (!requestStore.usedDynamic && !workStore.forceDynamic) {
           // only node can be ISR so we only need to update the status here
           const { pathname } = new URL(req.url || '/', 'http://n')
@@ -1785,7 +1791,8 @@ async function renderToHTMLOrFlightImpl(
             formState,
             postponedState,
             metadata,
-            devValidatingFallbackParams
+            devValidatingFallbackParams,
+            createRequestStore
           )
 
           return new RenderResult(stream, {
@@ -1812,6 +1819,8 @@ async function renderToHTMLOrFlightImpl(
     }
 
     const stream = await renderToStreamWithTracing(
+      // NOTE: in Cache Components (dev), if the render is restarted, it will use a different requestStore
+      // than the one that we're passing in here.
       requestStore,
       req,
       res,
@@ -1820,7 +1829,8 @@ async function renderToHTMLOrFlightImpl(
       formState,
       postponedState,
       metadata,
-      devValidatingFallbackParams
+      devValidatingFallbackParams,
+      createRequestStore
     )
 
     // Invalid dynamic usages should only error the request in development.
@@ -2004,7 +2014,8 @@ async function renderToStream(
   formState: any,
   postponedState: PostponedState | null,
   metadata: AppPageRenderResultMetadata,
-  devValidatingFallbackParams: OpaqueFallbackRouteParams | null
+  devValidatingFallbackParams: OpaqueFallbackRouteParams | null,
+  createRequestStore: () => RequestStore
 ): Promise<ReadableStream<Uint8Array>> {
   const { assetPrefix, htmlRequestId, nonce, pagePath, renderOpts, requestId } =
     ctx
@@ -2265,8 +2276,7 @@ async function renderToStream(
 
         // The initial render acted as a prospective render to warm the caches.
         // Now, we need to do another render.
-
-        // TODO(restart-on-cache-miss): we should use a separate request store for this instead
+        requestStore = createRequestStore()
 
         // We've filled the caches, so now we can render as usual.
         requestStore.prerenderResumeDataCache = null
@@ -2275,10 +2285,6 @@ async function renderToStream(
         )
         requestStore.cacheSignal = null
 
-        // Reset mutable fields.
-        requestStore.prerenderPhase = undefined
-        requestStore.usedDynamic = undefined
-
         // The initial render already wrote to its debug channel. We're not using it,
         // so we need to create a new one.
         const finalRenderDebugChannel =