[metadata] remove the default segement check for metadata rendering (#77119)

### What

Remove the default segment checks for metadata rendering. When the
`default.js` is rendered, it should still have the metadata. It was a
condition added due to possible of duplicated metadata, but it's
resolved by other conditions such as only rendering in child slot, and
hoisting metadata into rsc head for navigation.

Author: huozhi

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

@@ -21,7 +21,6 @@ import type { LoadingModuleData } from '../../shared/lib/app-router-context.shar
 import type { Params } from '../request/params'
 import { workUnitAsyncStorage } from './work-unit-async-storage.external'
 import { OUTLET_BOUNDARY_NAME } from '../../lib/metadata/metadata-constants'
-import { DEFAULT_SEGMENT_KEY } from '../../shared/lib/segment'
 import type { UseCachePageComponentProps } from '../use-cache/use-cache-wrapper'
 
 /**
@@ -394,19 +393,12 @@ async function createComponentTreeInternal({
 
   // Resolve the segment param
   const actualSegment = segmentParam ? segmentParam.treeSegment : segment
-
-  // Only render metadata on the actual SSR'd segment not the `default` segment,
-  // as it's used as a placeholder for navigation.
-  const isNotDefaultSegment = actualSegment !== DEFAULT_SEGMENT_KEY
-
-  const metadata =
-    isNotDefaultSegment && StreamingMetadata ? <StreamingMetadata /> : undefined
+  const metadata = StreamingMetadata ? <StreamingMetadata /> : undefined
 
   // Use the same condition to render metadataOutlet as metadata
-  const metadataOutlet =
-    isNotDefaultSegment && StreamingMetadataOutlet ? (
-      <StreamingMetadataOutlet />
-    ) : undefined
+  const metadataOutlet = StreamingMetadataOutlet ? (
+    <StreamingMetadataOutlet />
+  ) : undefined
 
   const notFoundElement = NotFound ? (
     <>

test/e2e/app-dir/metadata-streaming/app/dynamic-api/page.tsx

@@ -23,7 +23,7 @@ async function SubComponent() {
 
 export async function generateMetadata() {
   await connection()
-  await new Promise((resolve) => setTimeout(resolve, 3000))
+  await new Promise((resolve) => setTimeout(resolve, 800))
   return {
     title: `Dynamic api ${Math.random()}`,
   }

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

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

test/e2e/app-dir/metadata-streaming/app/parallel-routes-default/@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/app/parallel-routes-default/@bar/page.tsx

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

test/e2e/app-dir/metadata-streaming/app/parallel-routes-default/@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-default/@foo/default.tsx

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

test/e2e/app-dir/metadata-streaming/app/parallel-routes-default/@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/app/parallel-routes-default/@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-default/@foo/page.tsx

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

test/e2e/app-dir/metadata-streaming/app/parallel-routes-default/@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-default/default.tsx

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

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

@@ -0,0 +1,22 @@
+import { connection } from 'next/server'
+
+export default function Layout({ bar, foo, children }) {
+  return (
+    <div>
+      <h1>Parallel Routes Layout - No Children</h1>
+      <div id="foo-slot">{foo}</div>
+      <div id="bar-slot">{bar}</div>
+
+      {/* hitting default.js */}
+      {children}
+    </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/app/parallel-routes-default/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-default/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, 1000))
+  return {
+    title: `Dynamic api ${Math.random()}`,
+  }
+}

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

@@ -1,13 +1,20 @@
+import Link from 'next/link'
 import { connection } from 'next/server'
 
-export default function TestPage() {
-  return 'test page'
+export default function Page() {
+  return (
+    <div>
+      <p>no bar</p>
+      <Link href="/parallel-routes">Back to /parallel-routes</Link>
+    </div>
+  )
 }
 
 export async function generateMetadata() {
   await connection()
-  await new Promise((resolve) => setTimeout(resolve, 3000))
+  await new Promise((resolve) => setTimeout(resolve, 1000))
   return {
     title: `Dynamic api ${Math.random()}`,
+    description: 'no-bar description',
   }
 }

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

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

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

@@ -6,7 +6,7 @@ export default function TestPage() {
 
 export async function generateMetadata() {
   await connection()
-  await new Promise((resolve) => setTimeout(resolve, 3000))
+  await new Promise((resolve) => setTimeout(resolve, 1000))
   return {
     title: `Dynamic api ${Math.random()}`,
   }

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

@@ -93,9 +93,11 @@ describe('app-dir - metadata-streaming', () => {
 
     expect((await browser.elementsByCss('head title')).length).toBe(1)
     expect((await browser.elementsByCss('body title')).length).toBe(0)
+    expect(await browser.elementByCss('title').text()).toBe('parallel title')
 
     const $ = await next.render$('/parallel-routes')
     expect($('title').length).toBe(1)
+    expect($('head title').text()).toBe('parallel title')
 
     // validate behavior remains the same on client navigations
     await browser.elementByCss('[href="/parallel-routes/test-page"]').click()
@@ -113,13 +115,29 @@ describe('app-dir - metadata-streaming', () => {
     const browser = await next.browser('/parallel-routes')
     await browser.elementByCss('[href="/parallel-routes/no-bar"]').click()
 
+    // Wait for navigation is finished and metadata is updated
     await retry(async () => {
       expect(await browser.elementByCss('title').text()).toContain(
         'Dynamic api'
       )
     })
 
+    await retry(async () => {
+      expect((await browser.elementsByCss('title')).length).toBe(1)
+    })
+  })
+
+  it('should still render metadata if children is not rendered in parallel routes layout', async () => {
+    const browser = await next.browser('/parallel-routes-default')
+
     expect((await browser.elementsByCss('title')).length).toBe(1)
+    expect(await browser.elementByCss('body title').text()).toBe(
+      'parallel-routes-default layout title'
+    )
+
+    const $ = await next.render$('/parallel-routes-default')
+    expect($('title').length).toBe(1)
+    expect($('body title').text()).toBe('parallel-routes-default layout title')
   })
 
   describe('dynamic api', () => {