Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Mar 15, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 4 additions & 12 deletions packages/next/src/server/app-render/create-component-tree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

/**
Expand Down Expand Up @@ -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 ? (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()}`,
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'default @bar'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function Layout({ children }) {
return (
<div>
<h2>@bar Layout</h2>
<div id="bar-children">{children}</div>
</div>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'page @bar'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'test-page @bar'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'default @foo'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export default function Layout({ children }) {
return (
<div>
<h2>@foo Layout</h2>
<div id="foo-children">{children}</div>
</div>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'no-bar @foo'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'page @foo'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'test-page @foo'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Page() {
return 'default no-children'
}
Original file line number Diff line number Diff line change
@@ -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',
}
}
Original file line number Diff line number Diff line change
@@ -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()}`,
}
}
Original file line number Diff line number Diff line change
@@ -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()}`,
}
}
Original file line number Diff line number Diff line change
@@ -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',
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
Original file line number Diff line number Diff line change
Expand Up @@ -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()}`,
}
Expand Down
18 changes: 18 additions & 0 deletions test/e2e/app-dir/metadata-streaming/metadata-streaming.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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', () => {
Expand Down
Loading