diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx index 95d0a30b0d3f3..9f732b5838e5c 100644 --- a/packages/next/src/client/components/app-router.tsx +++ b/packages/next/src/client/components/app-router.tsx @@ -103,7 +103,6 @@ type AppRouterProps = Omit< > & { buildId: string initialHead: ReactNode - initialLayerAssets: ReactNode assetPrefix: string missingSlots: Set } @@ -153,8 +152,6 @@ export function createEmptyCacheNode(): CacheNode { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -261,7 +258,6 @@ function Head({ function Router({ buildId, initialHead, - initialLayerAssets, initialTree, initialCanonicalUrl, initialSeedData, @@ -279,7 +275,6 @@ function Router({ initialParallelRoutes, location: !isServer ? window.location : null, initialHead, - initialLayerAssets, couldBeIntercepted, }), [ @@ -288,7 +283,6 @@ function Router({ initialCanonicalUrl, initialTree, initialHead, - initialLayerAssets, couldBeIntercepted, ] ) @@ -637,27 +631,9 @@ function Router({ head = null } - // We use `useDeferredValue` to handle switching between the prefetched and - // final values. The second argument is returned on initial render, then it - // re-renders with the first argument. We only use the prefetched layer assets - // if they are available. Otherwise, we use the non-prefetched version. - const resolvedPrefetchLayerAssets = - cache.prefetchLayerAssets !== null - ? cache.prefetchLayerAssets - : cache.layerAssets - - const layerAssets = useDeferredValue( - cache.layerAssets, - // @ts-expect-error The second argument to `useDeferredValue` is only - // available in the experimental builds. When its disabled, it will always - // return `cache.layerAssets`. - resolvedPrefetchLayerAssets - ) - let content = ( {head} - {layerAssets} {cache.rsc} diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx index 24b2364d51067..c82673c2fc3c3 100644 --- a/packages/next/src/client/components/layout-router.tsx +++ b/packages/next/src/client/components/layout-router.tsx @@ -350,8 +350,6 @@ function InnerLayoutRouter({ rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -427,23 +425,6 @@ function InnerLayoutRouter({ use(unresolvedThenable) as never } - // We use `useDeferredValue` to handle switching between the prefetched and - // final values. The second argument is returned on initial render, then it - // re-renders with the first argument. We only use the prefetched layer assets - // if they are available. Otherwise, we use the non-prefetched version. - const resolvedPrefetchLayerAssets = - childNode.prefetchLayerAssets !== null - ? childNode.prefetchLayerAssets - : childNode.layerAssets - - const layerAssets = useDeferredValue( - childNode.layerAssets, - // @ts-expect-error The second argument to `useDeferredValue` is only - // available in the experimental builds. When its disabled, it will always - // return `cache.layerAssets`. - resolvedPrefetchLayerAssets - ) - // If we get to this point, then we know we have something we can render. const subtree = ( // The layout router context narrows down tree and childNodes at each level. @@ -456,7 +437,6 @@ function InnerLayoutRouter({ loading: childNode.loading, }} > - {layerAssets} {resolvedRsc} ) @@ -517,7 +497,6 @@ export default function OuterLayoutRouter({ template, notFound, notFoundStyles, - styles, }: { parallelRouterKey: string segmentPath: FlightSegmentPath @@ -529,7 +508,6 @@ export default function OuterLayoutRouter({ template: React.ReactNode notFound: React.ReactNode | undefined notFoundStyles: React.ReactNode | undefined - styles?: React.ReactNode }) { const context = useContext(LayoutRouterContext) if (!context) { @@ -562,7 +540,6 @@ export default function OuterLayoutRouter({ return ( <> - {styles} {preservedSegments.map((preservedSegment) => { const preservedSegmentValue = getSegmentValue(preservedSegment) const cacheKey = createRouterCacheKey(preservedSegment) diff --git a/packages/next/src/client/components/router-reducer/apply-flight-data.ts b/packages/next/src/client/components/router-reducer/apply-flight-data.ts index ccd516f999e28..b38e122e65939 100644 --- a/packages/next/src/client/components/router-reducer/apply-flight-data.ts +++ b/packages/next/src/client/components/router-reducer/apply-flight-data.ts @@ -11,15 +11,14 @@ export function applyFlightData( prefetchEntry?: PrefetchCacheEntry ): boolean { // The one before last item is the router state tree patch - const [treePatch, cacheNodeSeedData, head, layerAssets] = - flightDataPath.slice(-4) + const [treePatch, cacheNodeSeedData, head] = flightDataPath.slice(-3) // Handles case where prefetch only returns the router tree patch without rendered components. if (cacheNodeSeedData === null) { return false } - if (flightDataPath.length === 4) { + if (flightDataPath.length === 3) { const rsc = cacheNodeSeedData[2] const loading = cacheNodeSeedData[3] cache.loading = loading @@ -36,7 +35,6 @@ export function applyFlightData( treePatch, cacheNodeSeedData, head, - layerAssets, prefetchEntry ) } else { diff --git a/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx b/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx index 6c9172ee87758..f492e00a7ccfe 100644 --- a/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx +++ b/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx @@ -17,8 +17,6 @@ describe('clearCacheNodeDataForSegmentPath', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -28,8 +26,6 @@ describe('clearCacheNodeDataForSegmentPath', () => { rsc: <>Root layout, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -43,8 +39,6 @@ describe('clearCacheNodeDataForSegmentPath', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -58,8 +52,6 @@ describe('clearCacheNodeDataForSegmentPath', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -80,26 +72,22 @@ describe('clearCacheNodeDataForSegmentPath', () => { expect(cache).toMatchInlineSnapshot(` { "head": null, - "layerAssets": null, "lazyData": null, "loading": null, "parallelRoutes": Map { "children" => Map { "linking" => { "head": null, - "layerAssets": null, "lazyData": null, "loading": null, "parallelRoutes": Map { "children" => Map { "" => { "head": null, - "layerAssets": null, "lazyData": null, "loading": null, "parallelRoutes": Map {}, "prefetchHead": null, - "prefetchLayerAssets": null, "prefetchRsc": null, "rsc": Page @@ -108,7 +96,6 @@ describe('clearCacheNodeDataForSegmentPath', () => { }, }, "prefetchHead": null, - "prefetchLayerAssets": null, "prefetchRsc": null, "rsc": Linking @@ -116,19 +103,16 @@ describe('clearCacheNodeDataForSegmentPath', () => { }, "dashboard" => { "head": null, - "layerAssets": null, "lazyData": null, "loading": null, "parallelRoutes": Map {}, "prefetchHead": null, - "prefetchLayerAssets": null, "prefetchRsc": null, "rsc": null, }, }, }, "prefetchHead": null, - "prefetchLayerAssets": null, "prefetchRsc": null, "rsc": null, } diff --git a/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.ts b/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.ts index e58eb5ac460ce..43a99bd55fe5f 100644 --- a/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.ts +++ b/packages/next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.ts @@ -40,8 +40,6 @@ export function clearCacheNodeDataForSegmentPath( rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -58,8 +56,6 @@ export function clearCacheNodeDataForSegmentPath( rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -74,8 +70,6 @@ export function clearCacheNodeDataForSegmentPath( rsc: childCacheNode.rsc, prefetchRsc: childCacheNode.prefetchRsc, head: childCacheNode.head, - layerAssets: childCacheNode.layerAssets, - prefetchLayerAssets: childCacheNode.prefetchLayerAssets, prefetchHead: childCacheNode.prefetchHead, parallelRoutes: new Map(childCacheNode.parallelRoutes), loading: childCacheNode.loading, diff --git a/packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx b/packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx index 3a600ed698fc1..cb423519345e1 100644 --- a/packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx +++ b/packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx @@ -41,7 +41,6 @@ describe('createInitialRouterState', () => { initialParallelRoutes, location: new URL('/linking', 'https://localhost') as any, initialHead: Test, - initialLayerAssets: null, couldBeIntercepted: false, }) @@ -53,7 +52,6 @@ describe('createInitialRouterState', () => { initialParallelRoutes, location: new URL('/linking', 'https://localhost') as any, initialHead: Test, - initialLayerAssets: null, }) const expectedCache: CacheNode = { @@ -61,8 +59,6 @@ describe('createInitialRouterState', () => { rsc: children, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -85,8 +81,6 @@ describe('createInitialRouterState', () => { parallelRoutes: new Map(), loading: null, head: Test, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, }, ], @@ -97,8 +91,6 @@ describe('createInitialRouterState', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, }, diff --git a/packages/next/src/client/components/router-reducer/create-initial-router-state.ts b/packages/next/src/client/components/router-reducer/create-initial-router-state.ts index ec821f47a7072..4fb0770c802ec 100644 --- a/packages/next/src/client/components/router-reducer/create-initial-router-state.ts +++ b/packages/next/src/client/components/router-reducer/create-initial-router-state.ts @@ -21,7 +21,6 @@ export interface InitialRouterStateParameters { initialParallelRoutes: CacheNode['parallelRoutes'] location: Location | null initialHead: ReactNode - initialLayerAssets: ReactNode couldBeIntercepted?: boolean } @@ -33,7 +32,6 @@ export function createInitialRouterState({ initialParallelRoutes, location, initialHead, - initialLayerAssets, couldBeIntercepted, }: InitialRouterStateParameters) { const isServer = !location @@ -44,8 +42,6 @@ export function createInitialRouterState({ rsc: rsc, prefetchRsc: null, head: null, - layerAssets: initialLayerAssets, - prefetchLayerAssets: null, prefetchHead: null, // The cache gets seeded during the first render. `initialParallelRoutes` ensures the cache from the first render is there during the second render. parallelRoutes: isServer ? new Map() : initialParallelRoutes, @@ -71,8 +67,7 @@ export function createInitialRouterState({ undefined, initialTree, initialSeedData, - initialHead, - initialLayerAssets + initialHead ) } @@ -110,9 +105,7 @@ export function createInitialRouterState({ location.origin ) - const initialFlightData: FlightData = [ - ['', initialTree, null, null, initialLayerAssets], - ] + const initialFlightData: FlightData = [['', initialTree, null, null]] createPrefetchCacheEntryForInitialLoad({ url, kind: PrefetchKind.AUTO, diff --git a/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.test.tsx b/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.test.tsx index d5432681ac581..570cdcf00ba7e 100644 --- a/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.test.tsx +++ b/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.test.tsx @@ -31,8 +31,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -42,8 +40,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: <>Root layout, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -57,8 +53,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -72,8 +66,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -105,8 +97,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -120,8 +110,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -136,8 +124,6 @@ describe('fillCacheWithNewSubtreeData', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -148,8 +134,6 @@ describe('fillCacheWithNewSubtreeData', () => { { lazyData: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -170,8 +154,6 @@ describe('fillCacheWithNewSubtreeData', () => { Head Injected! ), - layerAssets: null, - prefetchLayerAssets: null, }, ], ]), diff --git a/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts b/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts index 3a48d967328ee..0ad45401304bc 100644 --- a/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts +++ b/packages/next/src/client/components/router-reducer/fill-cache-with-new-subtree-data.ts @@ -17,7 +17,7 @@ export function fillCacheWithNewSubTreeData( flightDataPath: FlightDataPath, prefetchEntry?: PrefetchCacheEntry ): void { - const isLastEntry = flightDataPath.length <= 6 + const isLastEntry = flightDataPath.length <= 5 const [parallelRouteKey, segment] = flightDataPath const cacheKey = createRouterCacheKey(segment) @@ -47,7 +47,6 @@ export function fillCacheWithNewSubTreeData( childCacheNode === existingChildCacheNode ) { const seedData: CacheNodeSeedData = flightDataPath[3] - const layerAssets = flightDataPath[5] const rsc = seedData[2] const loading = seedData[3] childCacheNode = { @@ -55,8 +54,6 @@ export function fillCacheWithNewSubTreeData( rsc, prefetchRsc: null, head: null, - layerAssets, - prefetchLayerAssets: null, prefetchHead: null, loading, // Ensure segments other than the one we got data for are preserved. @@ -79,7 +76,6 @@ export function fillCacheWithNewSubTreeData( flightDataPath[2], seedData, flightDataPath[4], - flightDataPath[5], prefetchEntry ) @@ -100,8 +96,6 @@ export function fillCacheWithNewSubTreeData( rsc: childCacheNode.rsc, prefetchRsc: childCacheNode.prefetchRsc, head: childCacheNode.head, - layerAssets: childCacheNode.layerAssets, - prefetchLayerAssets: childCacheNode.prefetchLayerAssets, prefetchHead: childCacheNode.prefetchHead, parallelRoutes: new Map(childCacheNode.parallelRoutes), loading: childCacheNode.loading, diff --git a/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.test.tsx b/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.test.tsx index 98d64746cafde..147b9bc56044d 100644 --- a/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.test.tsx +++ b/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.test.tsx @@ -40,8 +40,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -51,8 +49,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: <>Root layout, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -66,8 +62,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -81,8 +75,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -112,8 +104,7 @@ describe('fillLazyItemsTillLeafWithHead', () => { existingCache, treePatch, cacheNodeSeedData, - head, - null + head ) const expectedCache: CacheNode = { @@ -121,8 +112,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -136,8 +125,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -160,7 +147,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: null, prefetchRsc: null, prefetchHead: null, - prefetchLayerAssets: null, loading: null, parallelRoutes: new Map(), head: ( @@ -168,7 +154,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { About page! ), - layerAssets: null, }, ], ]), @@ -177,8 +162,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, }, ], @@ -189,8 +172,6 @@ describe('fillLazyItemsTillLeafWithHead', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), diff --git a/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts b/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts index 382eddbbd701a..83af69cbcbd85 100644 --- a/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts +++ b/packages/next/src/client/components/router-reducer/fill-lazy-items-till-leaf-with-head.ts @@ -15,7 +15,6 @@ export function fillLazyItemsTillLeafWithHead( routerState: FlightRouterState, cacheNodeSeedData: CacheNodeSeedData | null, head: React.ReactNode, - layerAssets: React.ReactNode, prefetchEntry?: PrefetchCacheEntry ): void { const isLastSegment = Object.keys(routerState[1]).length === 0 @@ -61,15 +60,13 @@ export function fillLazyItemsTillLeafWithHead( newCacheNode = { lazyData: null, rsc: seedNode, - // The prefetch prefixed fields are PPR-only. When PPR is enabled, we shouldn't hit + // This is a PPR-only field. When PPR is enabled, we shouldn't hit // this path during a navigation, but until PPR is fully implemented // yet it's possible the existing node does have a non-null // `prefetchRsc`. As an incremental step, we'll just de-opt to the // old behavior — no PPR value. prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading, parallelRoutes: new Map(existingCacheNode?.parallelRoutes), @@ -85,8 +82,6 @@ export function fillLazyItemsTillLeafWithHead( // PPR value, if it exists. prefetchRsc: existingCacheNode.prefetchRsc, head: existingCacheNode.head, - layerAssets: existingCache.layerAssets, - prefetchLayerAssets: existingCache.prefetchLayerAssets, prefetchHead: existingCacheNode.prefetchHead, parallelRoutes: new Map(existingCacheNode.parallelRoutes), loading: existingCacheNode.loading, @@ -99,8 +94,6 @@ export function fillLazyItemsTillLeafWithHead( rsc: null, prefetchRsc: null, head: null, - prefetchLayerAssets: null, - layerAssets: null, prefetchHead: null, parallelRoutes: new Map(existingCacheNode?.parallelRoutes), loading: null, @@ -116,7 +109,6 @@ export function fillLazyItemsTillLeafWithHead( parallelRouteState, parallelSeedData ? parallelSeedData : null, head, - layerAssets, prefetchEntry ) @@ -135,8 +127,6 @@ export function fillLazyItemsTillLeafWithHead( rsc: seedNode, prefetchRsc: null, head: null, - prefetchLayerAssets: null, - layerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading, @@ -149,8 +139,6 @@ export function fillLazyItemsTillLeafWithHead( rsc: null, prefetchRsc: null, head: null, - prefetchLayerAssets: null, - layerAssets: null, prefetchHead: null, parallelRoutes: new Map(), loading: null, @@ -170,7 +158,6 @@ export function fillLazyItemsTillLeafWithHead( parallelRouteState, parallelSeedData, head, - layerAssets, prefetchEntry ) } diff --git a/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.test.tsx b/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.test.tsx index 73b5d0ac17b51..733cd38d86358 100644 --- a/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.test.tsx +++ b/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.test.tsx @@ -32,8 +32,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -43,8 +41,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { rsc: <>Root layout, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -58,8 +54,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -73,8 +67,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -116,8 +108,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { const expectedCache: CacheNode = { lazyData: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -129,8 +119,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { { lazyData: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -146,8 +134,6 @@ describe('invalidateCacheBelowFlightSegmentPath', () => { rsc: Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, }, ], diff --git a/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.ts b/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.ts index e89c81605e320..ae87f8abc62b8 100644 --- a/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.ts +++ b/packages/next/src/client/components/router-reducer/invalidate-cache-below-flight-segmentpath.ts @@ -51,7 +51,6 @@ export function invalidateCacheBelowFlightSegmentPath( rsc: childCacheNode.rsc, prefetchRsc: childCacheNode.prefetchRsc, head: childCacheNode.head, - layerAssets: childCacheNode.layerAssets, prefetchHead: childCacheNode.prefetchHead, parallelRoutes: new Map(childCacheNode.parallelRoutes), } as CacheNode diff --git a/packages/next/src/client/components/router-reducer/invalidate-cache-by-router-state.test.tsx b/packages/next/src/client/components/router-reducer/invalidate-cache-by-router-state.test.tsx index 2dc7f1eb77858..3675b56890cb5 100644 --- a/packages/next/src/client/components/router-reducer/invalidate-cache-by-router-state.test.tsx +++ b/packages/next/src/client/components/router-reducer/invalidate-cache-by-router-state.test.tsx @@ -10,8 +10,6 @@ describe('invalidateCacheByRouterState', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -21,8 +19,6 @@ describe('invalidateCacheByRouterState', () => { rsc: <>Root layout, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -36,8 +32,6 @@ describe('invalidateCacheByRouterState', () => { rsc: <>Linking, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -51,8 +45,6 @@ describe('invalidateCacheByRouterState', () => { rsc: <>Page, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map(), @@ -95,8 +87,6 @@ describe('invalidateCacheByRouterState', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([['children', new Map()]]), diff --git a/packages/next/src/client/components/router-reducer/ppr-navigations.ts b/packages/next/src/client/components/router-reducer/ppr-navigations.ts index 5a087b88ce84f..b4abf0415bb71 100644 --- a/packages/next/src/client/components/router-reducer/ppr-navigations.ts +++ b/packages/next/src/client/components/router-reducer/ppr-navigations.ts @@ -67,8 +67,7 @@ export function updateCacheNodeOnNavigation( oldRouterState: FlightRouterState, newRouterState: FlightRouterState, prefetchData: CacheNodeSeedData, - prefetchHead: React.ReactNode, - prefetchLayerAssets: React.ReactNode + prefetchHead: React.ReactNode ): Task | null { // Diff the old and new trees to reuse the shared layouts. const oldRouterStateChildren = oldRouterState[1] @@ -126,8 +125,7 @@ export function updateCacheNodeOnNavigation( taskChild = spawnPendingTask( newRouterStateChild, prefetchDataChild !== undefined ? prefetchDataChild : null, - prefetchHead, - prefetchLayerAssets + prefetchHead ) } else if (newSegmentChild === DEFAULT_SEGMENT_KEY) { // This is another kind of leaf segment — a default route. @@ -147,8 +145,7 @@ export function updateCacheNodeOnNavigation( taskChild = spawnPendingTask( newRouterStateChild, prefetchDataChild !== undefined ? prefetchDataChild : null, - prefetchHead, - prefetchLayerAssets + prefetchHead ) } } else if ( @@ -167,8 +164,7 @@ export function updateCacheNodeOnNavigation( oldRouterStateChild, newRouterStateChild, prefetchDataChild, - prefetchHead, - prefetchLayerAssets + prefetchHead ) } else { // The server didn't send any prefetch data for this segment. This @@ -185,8 +181,7 @@ export function updateCacheNodeOnNavigation( taskChild = spawnPendingTask( newRouterStateChild, prefetchDataChild !== undefined ? prefetchDataChild : null, - prefetchHead, - prefetchLayerAssets + prefetchHead ) } } else { @@ -194,8 +189,7 @@ export function updateCacheNodeOnNavigation( taskChild = spawnPendingTask( newRouterStateChild, prefetchDataChild !== undefined ? prefetchDataChild : null, - prefetchHead, - prefetchLayerAssets + prefetchHead ) } @@ -239,8 +233,6 @@ export function updateCacheNodeOnNavigation( prefetchRsc: oldCacheNode.prefetchRsc, head: oldCacheNode.head, prefetchHead: oldCacheNode.prefetchHead, - layerAssets: oldCacheNode.layerAssets, - prefetchLayerAssets: oldCacheNode.prefetchLayerAssets, loading: oldCacheNode.loading, // Everything is cloned except for the children, which we computed above. @@ -281,15 +273,13 @@ function patchRouterStateWithNewChildren( function spawnPendingTask( routerState: FlightRouterState, prefetchData: CacheNodeSeedData | null, - prefetchHead: React.ReactNode, - prefetchLayerAssets: React.ReactNode + prefetchHead: React.ReactNode ): Task { // Create a task that will later be fulfilled by data from the server. const pendingCacheNode = createPendingCacheNode( routerState, prefetchData, - prefetchHead, - prefetchLayerAssets + prefetchHead ) return { route: routerState, @@ -312,7 +302,7 @@ function spawnTaskForMissingData(routerState: FlightRouterState): Task { // Create a task for a new subtree that wasn't prefetched by the server. // This shouldn't really ever happen but it's here just in case the Seed Data // Tree and the Router State Tree disagree unexpectedly. - const pendingCacheNode = createPendingCacheNode(routerState, null, null, null) + const pendingCacheNode = createPendingCacheNode(routerState, null, null) return { route: routerState, node: pendingCacheNode, @@ -343,11 +333,10 @@ export function listenForDynamicRequest( (response: FetchServerResponseResult) => { const flightData = response[0] for (const flightDataPath of flightData) { - const segmentPath = flightDataPath.slice(0, -4) - const serverRouterState = flightDataPath[flightDataPath.length - 4] - const dynamicData = flightDataPath[flightDataPath.length - 3] - const dynamicHead = flightDataPath[flightDataPath.length - 2] - const dynamicLayerAssets = flightDataPath[flightDataPath.length - 1] + const segmentPath = flightDataPath.slice(0, -3) + const serverRouterState = flightDataPath[flightDataPath.length - 3] + const dynamicData = flightDataPath[flightDataPath.length - 2] + const dynamicHead = flightDataPath[flightDataPath.length - 1] if (typeof segmentPath === 'string') { // Happens when navigating to page in `pages` from `app`. We shouldn't @@ -361,8 +350,7 @@ export function listenForDynamicRequest( segmentPath, serverRouterState, dynamicData, - dynamicHead, - dynamicLayerAssets + dynamicHead ) } @@ -383,8 +371,7 @@ function writeDynamicDataIntoPendingTask( segmentPath: FlightSegmentPath, serverRouterState: FlightRouterState, dynamicData: CacheNodeSeedData, - dynamicHead: React.ReactNode, - dynamicLayerAssets: React.ReactNode + dynamicHead: React.ReactNode ) { // The data sent by the server represents only a subtree of the app. We need // to find the part of the task tree that matches the server response, and @@ -423,8 +410,7 @@ function writeDynamicDataIntoPendingTask( task, serverRouterState, dynamicData, - dynamicHead, - dynamicLayerAssets + dynamicHead ) } @@ -432,8 +418,7 @@ function finishTaskUsingDynamicDataPayload( task: Task, serverRouterState: FlightRouterState, dynamicData: CacheNodeSeedData, - dynamicHead: React.ReactNode, - dynamicLayerAssets: React.ReactNode + dynamicHead: React.ReactNode ) { // dynamicData may represent a larger subtree than the task. Before we can // finish the task, we need to line them up. @@ -449,8 +434,7 @@ function finishTaskUsingDynamicDataPayload( task.route, serverRouterState, dynamicData, - dynamicHead, - dynamicLayerAssets + dynamicHead ) // Null this out to indicate that the task is complete. task.node = null @@ -481,8 +465,7 @@ function finishTaskUsingDynamicDataPayload( taskChild, serverRouterStateChild, dynamicDataChild, - dynamicHead, - dynamicLayerAssets + dynamicHead ) } } @@ -496,8 +479,7 @@ function finishTaskUsingDynamicDataPayload( function createPendingCacheNode( routerState: FlightRouterState, prefetchData: CacheNodeSeedData | null, - prefetchHead: React.ReactNode, - prefetchLayerAssets: React.ReactNode + prefetchHead: React.ReactNode ): ReadyCacheNode { const routerStateChildren = routerState[1] const prefetchDataChildren = prefetchData !== null ? prefetchData[1] : null @@ -517,8 +499,7 @@ function createPendingCacheNode( const newCacheNodeChild = createPendingCacheNode( routerStateChild, prefetchDataChild === undefined ? null : prefetchDataChild, - prefetchHead, - prefetchLayerAssets + prefetchHead ) const newSegmentMapChild: ChildSegmentMap = new Map() @@ -538,14 +519,12 @@ function createPendingCacheNode( prefetchRsc: maybePrefetchRsc !== undefined ? maybePrefetchRsc : null, prefetchHead: isLeafSegment ? prefetchHead : null, - prefetchLayerAssets, loading: maybePrefetchLoading !== undefined ? maybePrefetchLoading : null, // Create a deferred promise. This will be fulfilled once the dynamic // response is received from the server. rsc: createDeferredRsc() as React.ReactNode, head: isLeafSegment ? (createDeferredRsc() as React.ReactNode) : null, - layerAssets: createDeferredRsc() as React.ReactNode, } } @@ -554,8 +533,7 @@ function finishPendingCacheNode( taskState: FlightRouterState, serverState: FlightRouterState, dynamicData: CacheNodeSeedData, - dynamicHead: React.ReactNode, - dynamicLayerAssets: React.ReactNode + dynamicHead: React.ReactNode ): void { // Writes a dynamic response into an existing Cache Node tree. This does _not_ // create a new tree, it updates the existing tree in-place. So it must follow @@ -604,8 +582,7 @@ function finishPendingCacheNode( taskStateChild, serverStateChild, dataChild, - dynamicHead, - dynamicLayerAssets + dynamicHead ) } else { // The server never returned data for this segment. Trigger a lazy @@ -645,12 +622,6 @@ function finishPendingCacheNode( // been populated by a different navigation. We must not overwrite it. } - // Use the dynamic data from the server to fulfill the deferred layerAssets. - const layerAssets = cacheNode.layerAssets - if (isDeferredRsc(layerAssets)) { - layerAssets.resolve(dynamicLayerAssets) - } - // Check if this is a leaf segment. If so, it will have a `head` property with // a pending promise that needs to be resolved with the dynamic head from // the server. @@ -726,13 +697,6 @@ function abortPendingCacheNode( } } - // If layerAssets is pending, resolve it with an error. Since the RSC is part - // part of the same response, the error will already be handled above. - const layerAssets = cacheNode.layerAssets - if (isDeferredRsc(layerAssets)) { - layerAssets.resolve(null) - } - // Check if this is a leaf segment. If so, it will have a `head` property with // a pending promise that needs to be resolved. If an error was provided, we // will not resolve it with an error, since this is rendered at the root of @@ -795,11 +759,7 @@ export function updateCacheNodeOnPopstateRestoration( lazyData: null, rsc, head: oldCacheNode.head, - layerAssets: oldCacheNode.layerAssets, - prefetchLayerAssets: shouldUsePrefetch - ? oldCacheNode.prefetchLayerAssets - : null, prefetchHead: shouldUsePrefetch ? oldCacheNode.prefetchHead : null, prefetchRsc: shouldUsePrefetch ? oldCacheNode.prefetchRsc : null, loading: shouldUsePrefetch ? oldCacheNode.loading : null, diff --git a/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts index 271204e637c4c..b83414a2bb9ef 100644 --- a/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts +++ b/packages/next/src/client/components/router-reducer/reducers/fast-refresh-reducer.ts @@ -61,7 +61,7 @@ function fastRefreshReducerImpl( for (const flightDataPath of flightData) { // FlightDataPath with more than two items means unexpected Flight data was returned - if (flightDataPath.length !== 4) { + if (flightDataPath.length !== 3) { // TODO-APP: handle this case better console.log('REFRESH FAILED') return state diff --git a/packages/next/src/client/components/router-reducer/reducers/find-head-in-cache.test.tsx b/packages/next/src/client/components/router-reducer/reducers/find-head-in-cache.test.tsx index bf7d21ec1ea61..51d9f5763f78e 100644 --- a/packages/next/src/client/components/router-reducer/reducers/find-head-in-cache.test.tsx +++ b/packages/next/src/client/components/router-reducer/reducers/find-head-in-cache.test.tsx @@ -30,8 +30,6 @@ describe('findHeadInCache', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -45,8 +43,6 @@ describe('findHeadInCache', () => { rsc: null, prefetchRsc: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -58,8 +54,6 @@ describe('findHeadInCache', () => { { lazyData: null, head: null, - layerAssets: null, - prefetchLayerAssets: null, prefetchHead: null, loading: null, parallelRoutes: new Map([ @@ -80,8 +74,6 @@ describe('findHeadInCache', () => { About page! ), - layerAssets: null, - prefetchLayerAssets: null, }, ], ]), diff --git a/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts index 4ca7257d2e821..04f9a6b86c57f 100644 --- a/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts +++ b/packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts @@ -172,10 +172,10 @@ function navigateReducer_noPPR( for (const flightDataPath of flightData) { const flightSegmentPath = flightDataPath.slice( 0, - -5 + -4 ) as unknown as FlightSegmentPath // The one before last item is the router state tree patch - const treePatch = flightDataPath.slice(-4)[0] as FlightRouterState + const treePatch = flightDataPath.slice(-3)[0] as FlightRouterState // TODO-APP: remove '' const flightSegmentPathWithLeadingEmpty = ['', ...flightSegmentPath] @@ -364,10 +364,10 @@ function navigateReducer_PPR( for (const flightDataPath of flightData) { const flightSegmentPath = flightDataPath.slice( 0, - -5 + -4 ) as unknown as FlightSegmentPath // The one before last item is the router state tree patch - const treePatch = flightDataPath.slice(-4)[0] as FlightRouterState + const treePatch = flightDataPath.slice(-3)[0] as FlightRouterState // TODO-APP: remove '' const flightSegmentPathWithLeadingEmpty = ['', ...flightSegmentPath] @@ -406,20 +406,18 @@ function navigateReducer_PPR( // TODO: We should get rid of the else branch and do all navigations // via updateCacheNodeOnNavigation. The current structure is just // an incremental step. - flightDataPath.length === 4 + flightDataPath.length === 3 ) { const prefetchedTree: FlightRouterState = flightDataPath[0] const seedData = flightDataPath[1] const head = flightDataPath[2] - const layerAssets = flightDataPath[3] const task = updateCacheNodeOnNavigation( currentCache, currentTree, prefetchedTree, seedData, - head, - layerAssets + head ) if (task !== null && task.node !== null) { // We've created a new Cache Node tree that contains a prefetched diff --git a/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts index b7542244f090e..9e173dae22413 100644 --- a/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts +++ b/packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts @@ -61,7 +61,7 @@ export function refreshReducer( for (const flightDataPath of flightData) { // FlightDataPath with more than two items means unexpected Flight data was returned - if (flightDataPath.length !== 4) { + if (flightDataPath.length !== 3) { // TODO-APP: handle this case better console.log('REFRESH FAILED') return state @@ -99,7 +99,7 @@ export function refreshReducer( } // The one before last item is the router state tree patch - const [cacheNodeSeedData, head, layerAssets] = flightDataPath.slice(-3) + const [cacheNodeSeedData, head] = flightDataPath.slice(-2) // Handles case where prefetch only returns the router tree patch without rendered components. if (cacheNodeSeedData !== null) { @@ -114,8 +114,7 @@ export function refreshReducer( undefined, treePatch, cacheNodeSeedData, - head, - layerAssets + head ) mutable.prefetchCache = new Map() } diff --git a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts index e23c353cec94a..78b03c3546b81 100644 --- a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts +++ b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts @@ -226,7 +226,7 @@ export function serverActionReducer( for (const flightDataPath of flightData) { // FlightDataPath with more than two items means unexpected Flight data was returned - if (flightDataPath.length !== 4) { + if (flightDataPath.length !== 3) { // TODO-APP: handle this case better console.log('SERVER ACTION APPLY FAILED') return state @@ -258,7 +258,7 @@ export function serverActionReducer( } // The one before last item is the router state tree patch - const [cacheNodeSeedData, head, layerAssets] = flightDataPath.slice(-3) + const [cacheNodeSeedData, head] = flightDataPath.slice(-2) const rsc = cacheNodeSeedData !== null ? cacheNodeSeedData[2] : null // Handles case where prefetch only returns the router tree patch without rendered components. @@ -273,8 +273,7 @@ export function serverActionReducer( undefined, treePatch, cacheNodeSeedData, - head, - layerAssets + head ) await refreshInactiveParallelSegments({ diff --git a/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts index c6434bbca547d..5fe183d7eaea7 100644 --- a/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts +++ b/packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts @@ -39,10 +39,10 @@ export function serverPatchReducer( let currentCache = state.cache for (const flightDataPath of flightData) { - // Slices off the last segment (which is at -5) as it doesn't exist in the tree yet - const flightSegmentPath = flightDataPath.slice(0, -5) + // Slices off the last segment (which is at -4) as it doesn't exist in the tree yet + const flightSegmentPath = flightDataPath.slice(0, -4) - const [treePatch] = flightDataPath.slice(-4, -3) + const [treePatch] = flightDataPath.slice(-3, -2) const newTree = applyRouterStatePatchToTree( // TODO-APP: remove '' ['', ...flightSegmentPath], diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx index e8a3b8285ff2d..938a8d8a5e6b9 100644 --- a/packages/next/src/server/app-render/app-render.tsx +++ b/packages/next/src/server/app-render/app-render.tsx @@ -417,7 +417,7 @@ async function ReactServerApp({ tree, ctx, asNotFound }: ReactServerAppProps) { createDynamicallyTrackedSearchParams, }) - const { seedData, styles } = await createComponentTree({ + const seedData = await createComponentTree({ ctx, createSegmentPath: (child) => child, loaderTree: tree, @@ -456,7 +456,6 @@ async function ReactServerApp({ tree, ctx, asNotFound }: ReactServerAppProps) { } - initialLayerAssets={styles} globalErrorComponent={GlobalError} // This is used to provide debug information (when in development mode) // about which slots were not filled by page components while creating the component tree. @@ -534,7 +533,6 @@ async function ReactServerError({ initialCanonicalUrl={url.pathname + url.search} initialTree={initialTree} initialHead={head} - initialLayerAssets={null} globalErrorComponent={GlobalError} initialSeedData={initialSeedData} missingSlots={new Set()} diff --git a/packages/next/src/server/app-render/create-component-tree.tsx b/packages/next/src/server/app-render/create-component-tree.tsx index 19d5513b4215f..384a3bea68c9b 100644 --- a/packages/next/src/server/app-render/create-component-tree.tsx +++ b/packages/next/src/server/app-render/create-component-tree.tsx @@ -1,5 +1,5 @@ import type { FlightSegmentPath, CacheNodeSeedData } from './types' -import React, { type ReactNode } from 'react' +import React from 'react' import { isClientReference } from '../../lib/client-reference' import { getLayoutOrPageModule } from '../lib/app-dir-module' import type { LoaderTree } from '../lib/app-dir-module' @@ -16,11 +16,6 @@ import { NextNodeServerSpan } from '../lib/trace/constants' import { StaticGenBailoutError } from '../../client/components/static-generation-bailout' import type { LoadingModuleData } from '../../shared/lib/app-router-context.shared-runtime' -type ComponentTree = { - seedData: CacheNodeSeedData - styles: ReactNode -} - type Params = { [key: string]: string | string[] } @@ -41,7 +36,7 @@ export function createComponentTree(props: { metadataOutlet?: React.ReactNode ctx: AppRenderContext missingSlots?: Set -}): Promise { +}): Promise { return getTracer().trace( NextNodeServerSpan.createComponentTree, { @@ -83,7 +78,7 @@ async function createComponentTreeInternal({ metadataOutlet?: React.ReactNode ctx: AppRenderContext missingSlots?: Set -}): Promise { +}): Promise { const { renderOpts: { nextConfigOutput, experimental }, staticGenerationStore, @@ -374,7 +369,6 @@ async function createComponentTreeInternal({ // if we're prefetching and that there's a Loading component, we bail out // otherwise we keep rendering for the prefetch. // We also want to bail out if there's no Loading component in the tree. - let currentStyles = undefined let childCacheNodeSeedData: CacheNodeSeedData | null = null if ( @@ -426,27 +420,25 @@ async function createComponentTreeInternal({ } } - const { seedData, styles: childComponentStyles } = - await createComponentTreeInternal({ - createSegmentPath: (child) => { - return createSegmentPath([...currentSegmentPath, ...child]) - }, - loaderTree: parallelRoute, - parentParams: currentParams, - rootLayoutIncluded: rootLayoutIncludedAtThisLevelOrAbove, - injectedCSS: injectedCSSWithCurrentLayout, - injectedJS: injectedJSWithCurrentLayout, - injectedFontPreloadTags: injectedFontPreloadTagsWithCurrentLayout, - asNotFound, - // The metadataOutlet is responsible for throwing any errors that were caught during metadata resolution. - // We only want to render an outlet once per segment, as otherwise the error will be triggered - // multiple times causing an uncaught error. - metadataOutlet: isChildrenRouteKey ? metadataOutlet : undefined, - ctx, - missingSlots, - }) - - currentStyles = childComponentStyles + const seedData = await createComponentTreeInternal({ + createSegmentPath: (child) => { + return createSegmentPath([...currentSegmentPath, ...child]) + }, + loaderTree: parallelRoute, + parentParams: currentParams, + rootLayoutIncluded: rootLayoutIncludedAtThisLevelOrAbove, + injectedCSS: injectedCSSWithCurrentLayout, + injectedJS: injectedJSWithCurrentLayout, + injectedFontPreloadTags: injectedFontPreloadTagsWithCurrentLayout, + asNotFound, + // The metadataOutlet is responsible for throwing any errors that were caught during metadata resolution. + // We only want to render an outlet once per segment, as otherwise the error will be triggered + // multiple times causing an uncaught error. + metadataOutlet: isChildrenRouteKey ? metadataOutlet : undefined, + ctx, + missingSlots, + }) + childCacheNodeSeedData = seedData } @@ -469,7 +461,6 @@ async function createComponentTreeInternal({ templateScripts={templateScripts} notFound={notFoundComponent} notFoundStyles={notFoundStyles} - styles={currentStyles} />, childCacheNodeSeedData, ] @@ -494,20 +485,20 @@ async function createComponentTreeInternal({ // When the segment does not have a layout or page we still have to add the layout router to ensure the path holds the loading component if (!Component) { - return { - seedData: [ - actualSegment, - parallelRouteCacheNodeSeedData, - // TODO: I don't think the extra fragment is necessary. React treats top - // level fragments as transparent, i.e. the runtime behavior should be - // identical even without it. But maybe there's some findDOMNode-related - // reason that I'm not aware of, so I'm leaving it as-is out of extreme - // caution, for now. - <>{parallelRouteProps.children}, - loadingData, - ], - styles: layerAssets, - } + return [ + actualSegment, + parallelRouteCacheNodeSeedData, + // TODO: I don't think the extra fragment is necessary. React treats top + // level fragments as transparent, i.e. the runtime behavior should be + // identical even without it. But maybe there's some findDOMNode-related + // reason that I'm not aware of, so I'm leaving it as-is out of extreme + // caution, for now. + <> + {layerAssets} + {parallelRouteProps.children} + , + loadingData, + ] } // If force-dynamic is used and the current render supports postponing, we @@ -525,19 +516,19 @@ async function createComponentTreeInternal({ staticGenerationStore.forceDynamic && staticGenerationStore.prerenderState ) { - return { - seedData: [ - actualSegment, - parallelRouteCacheNodeSeedData, + return [ + actualSegment, + parallelRouteCacheNodeSeedData, + <> , - loadingData, - ], - styles: layerAssets, - } + /> + {layerAssets} + , + loadingData, + ] } const isClientComponent = isClientReference(layoutOrPageMod) @@ -592,6 +583,7 @@ async function createComponentTreeInternal({ <> {metadataOutlet} + {layerAssets} ) } else { @@ -602,21 +594,26 @@ async function createComponentTreeInternal({ <> {metadataOutlet} + {layerAssets} ) } } else { // For layouts we just render the component - segmentElement = + segmentElement = ( + <> + {layerAssets} + + + ) } - return { - seedData: [ - actualSegment, - parallelRouteCacheNodeSeedData, - <> - {segmentElement} - {/* This null is currently critical. The wrapped Component can render null and if there was not fragment + return [ + actualSegment, + parallelRouteCacheNodeSeedData, + <> + {segmentElement} + {/* This null is currently critical. The wrapped Component can render null and if there was not fragment surrounding it this would look like a pending tree data state on the client which will cause an error and break the app. Long-term we need to move away from using null as a partial tree identifier since it is a valid return type for the components we wrap. Once we make this change we can safely remove the @@ -624,10 +621,8 @@ async function createComponentTreeInternal({ If the Component above renders null the actual tree data will look like `[null, null]`. If we remove the extra null it will look like `null` (the array is elided) and this is what confuses the client router. TODO-APP update router to use a Symbol for partial tree detection */} - {null} - , - loadingData, - ], - styles: layerAssets, - } + {null} + , + loadingData, + ] } diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts index d9fded143cd13..7df91ba025f1a 100644 --- a/packages/next/src/server/app-render/types.ts +++ b/packages/next/src/server/app-render/types.ts @@ -104,7 +104,6 @@ export type FlightDataPath = /* treePatch */ FlightRouterState, /* cacheNodeSeedData */ CacheNodeSeedData, // Can be null during prefetch if there's no loading component /* head */ React.ReactNode | null, - /* layerAssets (imported styles/scripts) */ React.ReactNode | null, ] /** diff --git a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx index 3c0778ef02be0..41fd089ee2869 100644 --- a/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx +++ b/packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx @@ -4,7 +4,6 @@ import type { FlightSegmentPath, Segment, } from './types' -import type React from 'react' import { canSegmentBeOverridden, matchSegment, @@ -16,9 +15,7 @@ import { addSearchParamsIfPageSegment, createFlightRouterStateFromLoaderTree, } from './create-flight-router-state-from-loader-tree' -import { parseLoaderTree } from './parse-loader-tree' import type { CreateSegmentPath, AppRenderContext } from './app-render' -import { getLayerAssets } from './get-layer-assets' import { hasLoadingComponentInTree } from './has-loading-component-in-tree' import { createComponentTree } from './create-component-tree' import { DEFAULT_SEGMENT_KEY } from '../../shared/lib/segment' @@ -137,10 +134,10 @@ export async function walkTreeWithFlightRouterState({ if (shouldSkipComponentTree) { // Send only the router state - return [[overriddenSegment, routerState, null, null, null]] + return [[overriddenSegment, routerState, null, null]] } else { // Create component tree using the slice of the loaderTree - const { seedData } = await createComponentTree( + const seedData = await createComponentTree( // This ensures flightRouterPath is valid and filters down the tree { ctx, @@ -158,19 +155,7 @@ export async function walkTreeWithFlightRouterState({ } ) - // Create head - const { layoutOrPagePath } = parseLoaderTree(loaderTreeToFilter) - const layerAssets = getLayerAssets({ - ctx, - layoutOrPagePath, - injectedCSS: new Set(injectedCSS), - injectedJS: new Set(injectedJS), - injectedFontPreloadTags: new Set(injectedFontPreloadTags), - }) - - return [ - [overriddenSegment, routerState, seedData, rscPayloadHead, layerAssets], - ] + return [[overriddenSegment, routerState, seedData, rscPayloadHead]] } } diff --git a/packages/next/src/shared/lib/app-router-context.shared-runtime.ts b/packages/next/src/shared/lib/app-router-context.shared-runtime.ts index c5c0150462ee9..43384652f4fce 100644 --- a/packages/next/src/shared/lib/app-router-context.shared-runtime.ts +++ b/packages/next/src/shared/lib/app-router-context.shared-runtime.ts @@ -52,8 +52,6 @@ export type LazyCacheNode = { prefetchHead: React.ReactNode head: React.ReactNode - prefetchLayerAssets: React.ReactNode - layerAssets: React.ReactNode loading: LoadingModuleData @@ -96,8 +94,6 @@ export type ReadyCacheNode = { lazyData: null prefetchHead: React.ReactNode head: React.ReactNode - prefetchLayerAssets: React.ReactNode - layerAssets: React.ReactNode loading: LoadingModuleData diff --git a/test/development/acceptance-app/hydration-error.test.ts b/test/development/acceptance-app/hydration-error.test.ts index 1c866ccee5925..824b1f54ae0f2 100644 --- a/test/development/acceptance-app/hydration-error.test.ts +++ b/test/development/acceptance-app/hydration-error.test.ts @@ -59,6 +59,7 @@ describe('Error overlay for hydration errors', () => { if (isTurbopack) { expect(pseudoHtml).toMatchInlineSnapshot(` "... + ... + client - server" `) @@ -123,6 +124,7 @@ describe('Error overlay for hydration errors', () => { if (isTurbopack) { expect(pseudoHtml).toMatchInlineSnapshot(` "... + ... +
" `) } else { @@ -174,6 +176,7 @@ describe('Error overlay for hydration errors', () => { expect(pseudoHtml).toEqual(outdent` ... ... + ... + second -