[metadata] skip head cache in default slot (#78206)

Author: huozhi

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(
@@ -33,6 +34,11 @@ function findHeadInCacheImpl(
 
   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

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',
+  }
+}

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

@@ -57,4 +57,29 @@ describe('app-dir - metadata-streaming', () => {
     expect($('title').length).toBe(1)
     expect($('body title').text()).toBe('parallel-routes-default layout title')
   })
+
+  it('should change metadata when navigating between two pages under a slot when children is not rendered', async () => {
+    // first page is /parallel-routes-no-children/first,
+    // second page is /parallel-routes-no-children/second
+    // navigating between them should change the title metadata
+    const browser = await next.browser('/parallel-routes-no-children/first')
+    await retry(async () => {
+      expect(await browser.elementByCss('title').text()).toBe(
+        'first page - @bar'
+      )
+    })
+    // go to second page
+    await browser
+      .elementByCss('[href="/parallel-routes-no-children/second"]')
+      .click()
+    // wait for navigation to finish
+    await retry(async () => {
+      expect(await browser.elementByCss('#bar-page').text()).toBe(
+        'test-page @bar - 2'
+      )
+    })
+    expect(await browser.elementByCss('title').text()).toBe(
+      'second page - @bar'
+    )
+  })
 })