Skip to content

Commit

Permalink
extract the metadata out of nested fragment
Browse files Browse the repository at this point in the history
  • Loading branch information
@huozhi
huozhi committed Dec 24, 2024
1 parent 795164d commit 05ad5b7
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 72 deletions.
39 changes: 22 additions & 17 deletions packages/next/src/server/app-render/app-render.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,6 +467,16 @@ async function generateDynamicRSCPayload(
MetadataBoundary,
ViewportBoundary,
})

const MetadataComponent = () => {
return (
<React.Fragment key={flightDataPathMetadataKey}>
{/* Adding requestId as react key to make metadata remount for each render */}
<MetadataTree key={requestId} />
</React.Fragment>
)
}

flightData = (
await walkTreeWithFlightRouterState({
ctx,
Expand All @@ -490,14 +500,7 @@ async function generateDynamicRSCPayload(
getViewportReady,
getMetadataReady,
preloadCallbacks,
MetadataComponent: () => {
return (
<React.Fragment key={flightDataPathMetadataKey}>
{/* Adding requestId as react key to make metadata remount for each render */}
<MetadataTree key={requestId} />
</React.Fragment>
)
},
MetadataComponent,
})
).map((path) => path.slice(1)) // remove the '' (root) segment
}
Expand Down Expand Up @@ -771,6 +774,15 @@ async function getRSCPayload(

const preloadCallbacks: PreloadCallbacks = []

function MetadataComponent() {
return (
<React.Fragment key={flightDataPathMetadataKey}>
{/* Adding requestId as react key to make metadata remount for each render */}
<MetadataTree key={ctx.requestId} />
</React.Fragment>
)
}

const seedData = await createComponentTree({
ctx,
loaderTree: tree,
Expand All @@ -784,12 +796,7 @@ async function getRSCPayload(
missingSlots,
preloadCallbacks,
authInterrupts: ctx.renderOpts.experimental.authInterrupts,
MetadataComponent: () => (
<React.Fragment key={flightDataPathMetadataKey}>
{/* Adding requestId as react key to make metadata remount for each render */}
<MetadataTree key={ctx.requestId} />
</React.Fragment>
),
MetadataComponent,
})

// When the `vary` response header is present with `Next-URL`, that means there's a chance
Expand Down Expand Up @@ -919,10 +926,8 @@ async function getErrorRSCPayload(
const seedData: CacheNodeSeedData = [
initialTree[0],
<>
{/* Place metadata in root and let React Float manages to reposition it properly */}
{initialHeadMetadata}
<html id="__next_error__">
<head />
<head>{initialHeadMetadata}</head>
<body />
</html>
</>,
Expand Down
92 changes: 37 additions & 55 deletions packages/next/src/server/app-render/create-component-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,27 +225,6 @@ async function createComponentTreeInternal({
})
: []

const notFoundElement = NotFound ? (
<>
{notFoundStyles}
<NotFound />
</>
) : undefined

const forbiddenElement = Forbidden ? (
<>
{forbiddenStyles}
<Forbidden />
</>
) : undefined

const unauthorizedElement = Unauthorized ? (
<>
{unauthorizedStyles}
<Unauthorized />
</>
) : undefined

let dynamic = layoutOrPageMod?.dynamic

if (nextConfigOutput === 'export') {
Expand Down Expand Up @@ -417,7 +396,31 @@ async function createComponentTreeInternal({
// as it's used as a placeholder for navigation.
const metadata =
actualSegment !== DEFAULT_SEGMENT_KEY ? <MetadataComponent /> : undefined
//

const notFoundElement = NotFound ? (
<>
{metadata}
{notFoundStyles}
<NotFound />
</>
) : undefined

const forbiddenElement = Forbidden ? (
<>
{metadata}
{forbiddenStyles}
<Forbidden />
</>
) : undefined

const unauthorizedElement = Unauthorized ? (
<>
{metadata}
{unauthorizedStyles}
<Unauthorized />
</>
) : undefined

// TODO: Combine this `map` traversal with the loop below that turns the array
// into an object.
const parallelRouteMap = await Promise.all(
Expand All @@ -428,26 +431,17 @@ async function createComponentTreeInternal({
const isChildrenRouteKey = parallelRouteKey === 'children'
const parallelRoute = parallelRoutes[parallelRouteKey]

const notFoundComponent = isChildrenRouteKey ? (
<>
{metadata}
{notFoundElement}
</>
) : undefined

const forbiddenComponent = isChildrenRouteKey ? (
<>
{metadata}
{forbiddenElement}
</>
) : undefined

const unauthorizedComponent = isChildrenRouteKey ? (
<>
{metadata}
{unauthorizedElement}
</>
) : undefined
const notFoundComponent = isChildrenRouteKey
? notFoundElement
: undefined

const forbiddenComponent = isChildrenRouteKey
? forbiddenElement
: undefined

const unauthorizedComponent = isChildrenRouteKey
? unauthorizedElement
: undefined

// if we're prefetching and that there's a Loading component, we bail out
// otherwise we keep rendering for the prefetch.
Expand Down Expand Up @@ -740,7 +734,6 @@ async function createComponentTreeInternal({
layerAssets,
SegmentComponent,
currentParams,
metadata,
})
forbiddenClientSegment = createErrorBoundaryClientSegmentRoot({
ErrorBoundaryComponent: Forbidden,
Expand All @@ -749,7 +742,6 @@ async function createComponentTreeInternal({
layerAssets,
SegmentComponent,
currentParams,
metadata,
})
unauthorizedClientSegment = createErrorBoundaryClientSegmentRoot({
ErrorBoundaryComponent: Unauthorized,
Expand All @@ -758,7 +750,6 @@ async function createComponentTreeInternal({
layerAssets,
SegmentComponent,
currentParams,
metadata,
})
if (
notfoundClientSegment ||
Expand All @@ -779,7 +770,6 @@ async function createComponentTreeInternal({
} else {
segmentNode = (
<React.Fragment key={cacheNodeKey}>
{metadata}
{layerAssets}
{clientSegment}
</React.Fragment>
Expand All @@ -788,7 +778,6 @@ async function createComponentTreeInternal({
} else {
segmentNode = (
<React.Fragment key={cacheNodeKey}>
{metadata}
{layerAssets}
{clientSegment}
</React.Fragment>
Expand Down Expand Up @@ -873,24 +862,17 @@ function createErrorBoundaryClientSegmentRoot({
layerAssets,
SegmentComponent,
currentParams,
metadata,
}: {
ErrorBoundaryComponent: React.ComponentType<any> | undefined
errorElement: React.ReactNode
ClientSegmentRoot: React.ComponentType<any>
layerAssets: React.ReactNode
SegmentComponent: React.ComponentType<any>
currentParams: Params
metadata: React.ReactNode
}) {
if (ErrorBoundaryComponent) {
const notFoundParallelRouteProps = {
children: (
<>
{metadata}
{errorElement}
</>
),
children: errorElement,
}
return (
<>
Expand Down

0 comments on commit 05ad5b7

Please sign in to comment.