[metadata]: ensure metadata boundary is only rendered once on client nav

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

@@ -19,7 +19,30 @@ function findHeadInCacheImpl(
     // Returns the entire Cache Node of the segment whose head we will render.
     return [cache, keyPrefix]
   }
+
+  // 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
+      }
+    }
+  }
+
+  // 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
+
     const [segment, childParallelRoutes] = parallelRoutes[key]
     const childSegmentMap = cache.parallelRoutes.get(key)
     if (!childSegmentMap) {

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

@@ -522,6 +522,7 @@ async function generateDynamicRSCPayload(
             <NonIndex ctx={ctx} />
             {/* Adding requestId as react key to make metadata remount for each render */}
             <ViewportTree key={requestId} />
+            {StreamingMetadata ? <StreamingMetadata /> : null}
             <StaticMetadata />
           </React.Fragment>
         ),
@@ -532,7 +533,6 @@ async function generateDynamicRSCPayload(
         getViewportReady,
         getMetadataReady,
         preloadCallbacks,
-        StreamingMetadata,
         StreamingMetadataOutlet,
       })
     ).map((path) => path.slice(1)) // remove the '' (root) segment

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

@@ -40,7 +40,6 @@ export async function walkTreeWithFlightRouterState({
   getMetadataReady,
   ctx,
   preloadCallbacks,
-  StreamingMetadata,
   StreamingMetadataOutlet,
 }: {
   loaderTreeToFilter: LoaderTree
@@ -56,8 +55,7 @@ export async function walkTreeWithFlightRouterState({
   getViewportReady: () => Promise<void>
   ctx: AppRenderContext
   preloadCallbacks: PreloadCallbacks
-  StreamingMetadata: React.ComponentType<{}> | null
-  StreamingMetadataOutlet: React.ComponentType<{}>
+  StreamingMetadataOutlet: React.ComponentType
 }): Promise<FlightDataPath[]> {
   const {
     renderOpts: { nextFontManifest, experimental },
@@ -206,7 +204,7 @@ export async function walkTreeWithFlightRouterState({
         getMetadataReady,
         preloadCallbacks,
         authInterrupts: experimental.authInterrupts,
-        StreamingMetadata,
+        StreamingMetadata: null,
         StreamingMetadataOutlet,
       }
     )
@@ -267,7 +265,6 @@ export async function walkTreeWithFlightRouterState({
       getViewportReady,
       getMetadataReady,
       preloadCallbacks,
-      StreamingMetadata,
       StreamingMetadataOutlet,
     })
 

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { connection } from 'next/server'
+
+export default function TestPage() {
+  return 'test page'
+}
+
+export async function generateMetadata() {
+  await connection()
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  return {
+    title: `Dynamic api ${Math.random()}`,
+  }
+}

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

@@ -1,5 +1,15 @@
+import Link from 'next/link'
+
 export default function Page() {
-  return <div>Hello from Nested</div>
+  return (
+    <div>
+      Hello from Nested{' '}
+      <Link href="/parallel-routes/test-page">
+        To /parallel-routes/test-page
+      </Link>
+      <Link href="/parallel-routes/no-bar">To /parallel-routes/no-bar</Link>
+    </div>
+  )
 }
 
 export const metadata = {

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

@@ -0,0 +1,13 @@
+import { connection } from 'next/server'
+
+export default function TestPage() {
+  return 'test page'
+}
+
+export async function generateMetadata() {
+  await connection()
+  await new Promise((resolve) => setTimeout(resolve, 3000))
+  return {
+    title: `Dynamic api ${Math.random()}`,
+  }
+}

test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts

@@ -88,14 +88,38 @@ describe('app-dir - metadata-streaming', () => {
     expect((await browser.elementsByCss('body meta')).length).toBe(9)
   })
 
-  it('should only insert metadata once for parallel routes', async () => {
+  it('should only insert metadata once for parallel routes when slots match', async () => {
     const browser = await next.browser('/parallel-routes')
 
     expect((await browser.elementsByCss('head title')).length).toBe(1)
     expect((await browser.elementsByCss('body title')).length).toBe(0)
 
     const $ = await next.render$('/parallel-routes')
     expect($('title').length).toBe(1)
+
+    // validate behavior remains the same on client navigations
+    await browser.elementByCss('[href="/parallel-routes/test-page"]').click()
+
+    await retry(async () => {
+      expect(await browser.elementByCss('title').text()).toContain(
+        'Dynamic api'
+      )
+    })
+
+    expect((await browser.elementsByCss('title')).length).toBe(1)
+  })
+
+  it('should only insert metadata once for parallel routes when there is a missing slot', async () => {
+    const browser = await next.browser('/parallel-routes')
+    await browser.elementByCss('[href="/parallel-routes/no-bar"]').click()
+
+    await retry(async () => {
+      expect(await browser.elementByCss('title').text()).toContain(
+        'Dynamic api'
+      )
+    })
+
+    expect((await browser.elementsByCss('title')).length).toBe(1)
   })
 
   describe('dynamic api', () => {