[streaming metadata]: ensure metadata boundary is only rendered once …

…on client nav

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,7 +55,6 @@ export async function walkTreeWithFlightRouterState({
   getViewportReady: () => Promise<void>
   ctx: AppRenderContext
   preloadCallbacks: PreloadCallbacks
-  StreamingMetadata: React.ComponentType<{}> | null
   StreamingMetadataOutlet: React.ComponentType<{}>
 }): Promise<FlightDataPath[]> {
   const {
@@ -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/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/page.tsx

@@ -1,5 +1,14 @@
+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>
+    </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

@@ -96,6 +96,11 @@ describe('app-dir - metadata-streaming', () => {
 
     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()
+
+    expect((await browser.elementsByCss('title')).length).toBe(1)
   })
 
   describe('dynamic api', () => {