Fix missing keys in Fragments in arrays

Author: eps1lon

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

@@ -171,6 +171,8 @@ interface ParseRequestHeadersOptions {
   readonly isRoutePPREnabled: boolean
 }
 
+const flightDataPathHeadKey = 'flight-data-path-head'
+
 interface ParsedRequestHeaders {
   /**
    * Router state provided from the client-side router. Used to handle rendering
@@ -368,11 +370,11 @@ async function generateDynamicRSCPayload(
         isFirst: true,
         // For flight, render metadata inside leaf page
         rscPayloadHead: (
-          <>
+          <React.Fragment key={flightDataPathHeadKey}>
             <NonIndex ctx={ctx} />
             {/* Adding requestId as react key to make metadata remount for each render */}
             <MetadataTree key={requestId} />
-          </>
+          </React.Fragment>
         ),
         injectedCSS: new Set(),
         injectedJS: new Set(),
@@ -522,11 +524,11 @@ async function getRSCPayload(
     typeof varyHeader === 'string' && varyHeader.includes(NEXT_URL)
 
   const initialHead = (
-    <>
+    <React.Fragment key={flightDataPathHeadKey}>
       <NonIndex ctx={ctx} />
       {/* Adding requestId as react key to make metadata remount for each render */}
       <MetadataTree key={ctx.requestId} />
-    </>
+    </React.Fragment>
   )
 
   return {
@@ -539,7 +541,7 @@ async function getRSCPayload(
     f: [[initialTree, seedData, initialHead]],
     m: missingSlots,
     G: GlobalError,
-  } satisfies RSCPayload & { P: React.ReactNode }
+  } satisfies InitialRSCPayload & { P: React.ReactNode }
 }
 
 /**
@@ -579,14 +581,14 @@ async function getErrorRSCPayload(
   })
 
   const initialHead = (
-    <>
+    <React.Fragment key={flightDataPathHeadKey}>
       <NonIndex ctx={ctx} />
       {/* Adding requestId as react key to make metadata remount for each render */}
       <MetadataTree key={requestId} />
       {process.env.NODE_ENV === 'development' && (
         <meta name="next-error" content="not-found" />
       )}
-    </>
+    </React.Fragment>
   )
 
   const initialTree = createFlightRouterStateFromLoaderTree(

packages/next/src/server/app-render/create-component-tree.tsx

@@ -54,6 +54,8 @@ function errorMissingDefaultExport(pagePath: string, convention: string) {
   )
 }
 
+const cacheNodeKey = 'cache-node'
+
 async function createComponentTreeInternal({
   createSegmentPath,
   loaderTree: tree,
@@ -500,10 +502,10 @@ async function createComponentTreeInternal({
       // identical even without it. But maybe there's some findDOMNode-related
       // reason that I'm not aware of, so I'm leaving it as-is out of extreme
       // caution, for now.
-      <>
+      <React.Fragment key={cacheNodeKey}>
         {layerAssets}
         {parallelRouteProps.children}
-      </>,
+      </React.Fragment>,
       loadingData,
     ]
   }
@@ -526,14 +528,14 @@ async function createComponentTreeInternal({
     return [
       actualSegment,
       parallelRouteCacheNodeSeedData,
-      <>
+      <React.Fragment key={cacheNodeKey}>
         <Postpone
           prerenderState={staticGenerationStore.prerenderState}
           reason='dynamic = "force-dynamic" was used'
           route={staticGenerationStore.route}
         />
         {layerAssets}
-      </>,
+      </React.Fragment>,
       loadingData,
     ]
   }
@@ -618,7 +620,7 @@ async function createComponentTreeInternal({
   return [
     actualSegment,
     parallelRouteCacheNodeSeedData,
-    <>
+    <React.Fragment key={cacheNodeKey}>
       {segmentElement}
       {/* This null is currently critical. The wrapped Component can render null and if there was not fragment
             surrounding it this would look like a pending tree data state on the client which will cause an error
@@ -629,7 +631,7 @@ async function createComponentTreeInternal({
             null it will look like `null` (the array is elided) and this is what confuses the client router.
             TODO-APP update router to use a Symbol for partial tree detection */}
       {null}
-    </>,
+    </React.Fragment>,
     loadingData,
   ]
 }