[metadata] skip head cache in default slot

packages/next/src/client/components/router-reducer/reducers/find-head-in-cache.ts

@@ -1,5 +1,6 @@
 import type { FlightRouterState } from '../../../../server/app-render/types'
 import type { CacheNode } from '../../../../shared/lib/app-router-context.shared-runtime'
+import { DEFAULT_SEGMENT_KEY } from '../../../../shared/lib/segment'
 import { createRouterCacheKey } from '../create-router-cache-key'
 
 export function findHeadInCache(
@@ -22,28 +23,22 @@ function findHeadInCacheImpl(
 
   // First try the 'children' parallel route if it exists
   // when starting from the "root", this corresponds with the main page component
-  if (parallelRoutes.children) {
-    const [segment, childParallelRoutes] = parallelRoutes.children
-    const childSegmentMap = cache.parallelRoutes.get('children')
-    if (childSegmentMap) {
-      const cacheKey = createRouterCacheKey(segment)
-      const cacheNode = childSegmentMap.get(cacheKey)
-      if (cacheNode) {
-        const item = findHeadInCacheImpl(
-          cacheNode,
-          childParallelRoutes,
-          keyPrefix + '/' + cacheKey
-        )
-        if (item) return item
-      }
-    }
-  }
+  const parallelRoutesKeys = Object.keys(parallelRoutes).filter(
+    (key) => key !== 'children'
+  )
 
-  // if we didn't find metadata in the page slot, check the other parallel routes
-  for (const key in parallelRoutes) {
-    if (key === 'children') continue // already checked above
+  // if we are at the root, we need to check the children slot first
+  if ('children' in parallelRoutes) {
+    parallelRoutesKeys.unshift('children')
+  }
 
+  for (const key of parallelRoutesKeys) {
     const [segment, childParallelRoutes] = parallelRoutes[key]
+    // If the parallel is not matched and using the default segment,
+    // skip searching the head from it.
+    if (segment === DEFAULT_SEGMENT_KEY) {
+      continue
+    }
     const childSegmentMap = cache.parallelRoutes.get(key)
     if (!childSegmentMap) {
       continue

packages/next/src/lib/metadata/metadata.tsx

@@ -206,9 +206,11 @@ export function createMetadataComponents({
     const promise = resolveFinalMetadata()
     if (serveStreamingMetadata) {
       return (
-        <Suspense fallback={null}>
-          <AsyncMetadata promise={promise} />
-        </Suspense>
+        <div hidden>
+          <Suspense fallback={null}>
+            <AsyncMetadata promise={promise} />
+          </Suspense>
+        </div>
       )
     }
     const metadataState = await promise

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

@@ -245,6 +245,8 @@ interface ParseRequestHeadersOptions {
 }
 
 const flightDataPathHeadKey = 'h'
+const getFlightViewportKey = (requestId: string) => requestId + 'v'
+const getFlightMetadataKey = (requestId: string) => requestId + 'm'
 
 interface ParsedRequestHeaders {
   /**
@@ -336,30 +338,6 @@ function createNotFoundLoaderTree(loaderTree: LoaderTree): LoaderTree {
   ]
 }
 
-function createDivergedMetadataComponents(
-  Metadata: React.ComponentType,
-  serveStreamingMetadata: boolean
-): {
-  StaticMetadata: React.ComponentType<{}>
-  StreamingMetadata: React.ComponentType<{}> | null
-} {
-  function EmptyMetadata() {
-    return null
-  }
-  const StreamingMetadata: React.ComponentType | null = serveStreamingMetadata
-    ? Metadata
-    : null
-
-  const StaticMetadata: React.ComponentType<{}> = serveStreamingMetadata
-    ? EmptyMetadata
-    : Metadata
-
-  return {
-    StaticMetadata,
-    StreamingMetadata,
-  }
-}
-
 /**
  * Returns a function that parses the dynamic segment and return the associated value.
  */
@@ -527,14 +505,6 @@ async function generateDynamicRSCPayload(
       serveStreamingMetadata,
     })
 
-    const { StreamingMetadata, StaticMetadata } =
-      createDivergedMetadataComponents(() => {
-        return (
-          // Adding requestId as react key to make metadata remount for each render
-          <MetadataTree key={requestId} />
-        )
-      }, serveStreamingMetadata)
-
     flightData = (
       await walkTreeWithFlightRouterState({
         ctx,
@@ -551,9 +521,9 @@ async function generateDynamicRSCPayload(
               isPossibleServerAction={ctx.isPossibleServerAction}
             />
             {/* Adding requestId as react key to make metadata remount for each render */}
-            <ViewportTree key={requestId} />
-            {StreamingMetadata ? <StreamingMetadata /> : null}
-            <StaticMetadata />
+            <ViewportTree key={getFlightViewportKey(requestId)} />
+            {/* Not add requestId as react key to ensure segment prefetch could result consistently if nothing changed */}
+            <MetadataTree key={getFlightMetadataKey(requestId)} />
           </React.Fragment>
         ),
         injectedCSS: new Set(),
@@ -857,14 +827,6 @@ async function getRSCPayload(
 
   const preloadCallbacks: PreloadCallbacks = []
 
-  const { StreamingMetadata, StaticMetadata } =
-    createDivergedMetadataComponents(() => {
-      return (
-        // Not add requestId as react key to ensure segment prefetch could result consistently if nothing changed
-        <MetadataTree />
-      )
-    }, serveStreamingMetadata)
-
   const seedData = await createComponentTree({
     ctx,
     loaderTree: tree,
@@ -878,7 +840,6 @@ async function getRSCPayload(
     missingSlots,
     preloadCallbacks,
     authInterrupts: ctx.renderOpts.experimental.authInterrupts,
-    StreamingMetadata,
     StreamingMetadataOutlet,
   })
 
@@ -896,8 +857,9 @@ async function getRSCPayload(
         statusCode={ctx.res.statusCode}
         isPossibleServerAction={ctx.isPossibleServerAction}
       />
-      <ViewportTree key={ctx.requestId} />
-      <StaticMetadata />
+      <ViewportTree key={getFlightViewportKey(ctx.requestId)} />
+      {/* Not add requestId as react key to ensure segment prefetch could result consistently if nothing changed */}
+      <MetadataTree />
     </React.Fragment>
   )
 
@@ -984,16 +946,8 @@ async function getErrorRSCPayload(
     serveStreamingMetadata: serveStreamingMetadata,
   })
 
-  const { StreamingMetadata, StaticMetadata } =
-    createDivergedMetadataComponents(
-      () => (
-        <React.Fragment key={flightDataPathHeadKey}>
-          {/* Adding requestId as react key to make metadata remount for each render */}
-          <MetadataTree key={requestId} />
-        </React.Fragment>
-      ),
-      serveStreamingMetadata
-    )
+  // {/* Adding requestId as react key to make metadata remount for each render */}
+  const metadata = <MetadataTree key={getFlightMetadataKey(requestId)} />
 
   const initialHead = (
     <React.Fragment key={flightDataPathHeadKey}>
@@ -1003,12 +957,11 @@ async function getErrorRSCPayload(
         isPossibleServerAction={ctx.isPossibleServerAction}
       />
       {/* Adding requestId as react key to make metadata remount for each render */}
-      <ViewportTree key={requestId} />
+      <ViewportTree key={getFlightViewportKey(requestId)} />
       {process.env.NODE_ENV === 'development' && (
         <meta name="next-error" content="not-found" />
       )}
-      {StreamingMetadata ? <StreamingMetadata /> : null}
-      <StaticMetadata />
+      {metadata}
     </React.Fragment>
   )
 
@@ -1028,10 +981,7 @@ async function getErrorRSCPayload(
   const seedData: CacheNodeSeedData = [
     initialTree[0],
     <html id="__next_error__">
-      <head>
-        {StreamingMetadata ? <StreamingMetadata /> : null}
-        <StaticMetadata />
-      </head>
+      <head>{metadata}</head>
       <body>
         {process.env.NODE_ENV !== 'production' && err ? (
           <template

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

@@ -39,7 +39,6 @@ export function createComponentTree(props: {
   missingSlots?: Set<string>
   preloadCallbacks: PreloadCallbacks
   authInterrupts: boolean
-  StreamingMetadata: React.ComponentType | null
   StreamingMetadataOutlet: React.ComponentType
 }): Promise<CacheNodeSeedData> {
   return getTracer().trace(
@@ -76,7 +75,6 @@ async function createComponentTreeInternal({
   missingSlots,
   preloadCallbacks,
   authInterrupts,
-  StreamingMetadata,
   StreamingMetadataOutlet,
 }: {
   loaderTree: LoaderTree
@@ -91,7 +89,6 @@ async function createComponentTreeInternal({
   missingSlots?: Set<string>
   preloadCallbacks: PreloadCallbacks
   authInterrupts: boolean
-  StreamingMetadata: React.ComponentType | null
   StreamingMetadataOutlet: React.ComponentType | null
 }): Promise<CacheNodeSeedData> {
   const {
@@ -390,7 +387,6 @@ async function createComponentTreeInternal({
 
   // Resolve the segment param
   const actualSegment = segmentParam ? segmentParam.treeSegment : segment
-  const metadata = StreamingMetadata ? <StreamingMetadata /> : undefined
 
   // Use the same condition to render metadataOutlet as metadata
   const metadataOutlet = StreamingMetadataOutlet ? (
@@ -513,7 +509,6 @@ async function createComponentTreeInternal({
             missingSlots,
             preloadCallbacks,
             authInterrupts,
-            StreamingMetadata: isChildrenRouteKey ? StreamingMetadata : null,
             // `StreamingMetadataOutlet` is used to conditionally throw. In the case of parallel routes we will have more than one page
             // but we only want to throw on the first one.
             StreamingMetadataOutlet: isChildrenRouteKey
@@ -699,12 +694,6 @@ async function createComponentTreeInternal({
       actualSegment,
       <React.Fragment key={cacheNodeKey}>
         {pageElement}
-        {/*
-         * The order here matters since a parent might call findDOMNode().
-         * findDOMNode() will return the first child if multiple children are rendered.
-         * But React will hoist metadata into <head> which breaks scroll handling.
-         */}
-        {metadata}
         {layerAssets}
         <OutletBoundary>
           <MetadataOutlet ready={getViewportReady} />

packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx

@@ -202,7 +202,6 @@ export async function walkTreeWithFlightRouterState({
         getMetadataReady,
         preloadCallbacks,
         authInterrupts: experimental.authInterrupts,
-        StreamingMetadata: null,
         StreamingMetadataOutlet,
       }
     )

test/e2e/app-dir/metadata-streaming-parallel-routes/app/layout.tsx

@@ -14,6 +14,11 @@ export default function Root({ children }: { children: ReactNode }) {
             {`to /parallel-routes-default`}
           </Link>
           <br />
+
+          <Link href="/parallel-routes-no-children" id="to-no-children">
+            {`to /parallel-routes-no-children`}
+          </Link>
+          <br />
         </div>
         {children}
       </body>

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@bar/default.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'default @bar'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@bar/first/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return <p id="bar-page">test-page @bar - 1</p>
+}
+
+export const metadata = {
+  title: 'first page - @bar',
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@bar/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h2>@bar Layout</h2>
+      <div id="bar-children">{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@bar/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'page @bar'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@bar/second/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return <p id="bar-page">test-page @bar - 2</p>
+}
+
+export const metadata = {
+  title: 'second page - @bar',
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@foo/default.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'default @foo'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@foo/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h2>@foo Layout</h2>
+      <div id="foo-children">{children}</div>
+    </div>
+  )
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@foo/no-bar/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'no-bar @foo'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@foo/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'page @foo'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/@foo/test-page/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'test-page @foo'
+}

test/e2e/app-dir/metadata-streaming-parallel-routes/app/parallel-routes-no-children/layout.tsx

@@ -0,0 +1,34 @@
+import { connection } from 'next/server'
+import Link from 'next/link'
+
+// skip rendering children
+export default function Layout({ bar, foo }) {
+  return (
+    <div>
+      <h1>Parallel Routes Layout - No Children</h1>
+
+      <Link href="/parallel-routes-no-children/first" id="to-no-children-first">
+        {`to /parallel-routes-no-children/first`}
+      </Link>
+      <br />
+      <Link
+        href="/parallel-routes-no-children/second"
+        id="to-no-children-second"
+      >
+        {`to /parallel-routes-no-children/second`}
+      </Link>
+      <br />
+
+      <div id="foo-slot">{foo}</div>
+      <div id="bar-slot">{bar}</div>
+    </div>
+  )
+}
+
+export async function generateMetadata() {
+  await connection()
+  await new Promise((resolve) => setTimeout(resolve, 300))
+  return {
+    title: 'parallel-routes-default layout title',
+  }
+}