add layerAssets property to FlightDataPath (#66354)

This adds a new `layerAssets` property (containing styles and script tags) to `FlightDataPath`. Previously these were lumped in with the `head` node, but we intentionally only ever render a single `head`, to avoid duplicating metadata. This would mean `<AppRouter />` would only ever render imported stylesheets for a single page in a racey way. However, since Float handles hoisting and deduping these style tags, we're safe to render them for each segment. This PR introduces no change in behavior, aside from sending `layerAssets` down from the server and storing it in the client router cache. These nodes aren't rendered -- this is done in #66300.
vercel · Aug 30, 2024 · 5e0fd7d · 5e0fd7d
1 parent cde640c
commit 5e0fd7d
Show file tree

Hide file tree

Showing 25 changed files with 241 additions and 58 deletions.
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -134,6 +134,7 @@ type AppRouterProps = Omit<
 > & {
   buildId: string
   initialHead: ReactNode
+  initialLayerAssets: ReactNode
   assetPrefix: string
   missingSlots: Set<string>
 }
@@ -183,6 +184,8 @@ export function createEmptyCacheNode(): CacheNode {
     rsc: null,
     prefetchRsc: null,
     head: null,
+    layerAssets: null,
+    prefetchLayerAssets: null,
     prefetchHead: null,
     parallelRoutes: new Map(),
     lazyDataResolved: false,
@@ -307,6 +310,7 @@ function Router({
         initialParallelRoutes,
         location: !isServer ? window.location : null,
         initialHead,
+        initialLayerAssets: null,
         couldBeIntercepted,
       }),
     [
@@ -645,6 +649,7 @@ function Router({
   let content = (
     <RedirectBoundary>
       {head}
+      {/* {cache.layerAssets} */}
       {cache.rsc}
       <AppRouterAnnouncer tree={tree} />
     </RedirectBoundary>

diff --git a/packages/next/src/client/components/layout-router.tsx b/packages/next/src/client/components/layout-router.tsx
@@ -355,6 +355,8 @@ function InnerLayoutRouter({
       rsc: null,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       parallelRoutes: new Map(),
       lazyDataResolved: false,
@@ -457,6 +459,7 @@ function InnerLayoutRouter({
         loading: childNode.loading,
       }}
     >
+      {/* {childNode.layerAssets} */}
       {resolvedRsc}
     </LayoutRouterContext.Provider>
   )

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
@@ -11,14 +11,15 @@ export function applyFlightData(
   prefetchEntry?: PrefetchCacheEntry
 ): boolean {
   // The one before last item is the router state tree patch
-  const [treePatch, cacheNodeSeedData, head] = flightDataPath.slice(-3)
+  const [treePatch, cacheNodeSeedData, head, layerAssets] =
+    flightDataPath.slice(-4)
 
   // Handles case where prefetch only returns the router tree patch without rendered components.
   if (cacheNodeSeedData === null) {
     return false
   }
 
-  if (flightDataPath.length === 3) {
+  if (flightDataPath.length === 4) {
     const rsc = cacheNodeSeedData[2]
     const loading = cacheNodeSeedData[3]
     cache.loading = loading
@@ -35,6 +36,7 @@ export function applyFlightData(
       treePatch,
       cacheNodeSeedData,
       head,
+      layerAssets,
       prefetchEntry
     )
   } else {

diff --git a/...next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx b/...next/src/client/components/router-reducer/clear-cache-node-data-for-segment-path.test.tsx
@@ -17,6 +17,8 @@ describe('clearCacheNodeDataForSegmentPath', () => {
       rsc: null,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       parallelRoutes: new Map(),
       lazyDataResolved: false,
@@ -27,6 +29,8 @@ describe('clearCacheNodeDataForSegmentPath', () => {
       rsc: <>Root layout</>,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       lazyDataResolved: false,
       loading: null,
@@ -42,6 +46,8 @@ describe('clearCacheNodeDataForSegmentPath', () => {
                 prefetchRsc: null,
                 lazyDataResolved: false,
                 head: null,
+                layerAssets: null,
+                prefetchLayerAssets: null,
                 prefetchHead: null,
                 loading: null,
                 parallelRoutes: new Map([
@@ -55,6 +61,8 @@ describe('clearCacheNodeDataForSegmentPath', () => {
                           rsc: <>Page</>,
                           prefetchRsc: null,
                           head: null,
+                          layerAssets: null,
+                          prefetchLayerAssets: null,
                           prefetchHead: null,
                           parallelRoutes: new Map(),
                           lazyDataResolved: false,
@@ -76,25 +84,29 @@ describe('clearCacheNodeDataForSegmentPath', () => {
     expect(cache).toMatchInlineSnapshot(`
       {
         "head": null,
+        "layerAssets": null,
         "lazyData": null,
         "lazyDataResolved": false,
         "loading": null,
         "parallelRoutes": Map {
           "children" => Map {
             "linking" => {
               "head": null,
+              "layerAssets": null,
               "lazyData": null,
               "lazyDataResolved": false,
               "loading": null,
               "parallelRoutes": Map {
                 "children" => Map {
                   "" => {
                     "head": null,
+                    "layerAssets": null,
                     "lazyData": null,
                     "lazyDataResolved": false,
                     "loading": null,
                     "parallelRoutes": Map {},
                     "prefetchHead": null,
+                    "prefetchLayerAssets": null,
                     "prefetchRsc": null,
                     "rsc": <React.Fragment>
                       Page
@@ -103,24 +115,28 @@ describe('clearCacheNodeDataForSegmentPath', () => {
                 },
               },
               "prefetchHead": null,
+              "prefetchLayerAssets": null,
               "prefetchRsc": null,
               "rsc": <React.Fragment>
                 Linking
               </React.Fragment>,
             },
             "dashboard" => {
               "head": null,
+              "layerAssets": null,
               "lazyData": null,
               "lazyDataResolved": false,
               "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
@@ -40,6 +40,8 @@ export function clearCacheNodeDataForSegmentPath(
         rsc: null,
         prefetchRsc: null,
         head: null,
+        layerAssets: null,
+        prefetchLayerAssets: null,
         prefetchHead: null,
         parallelRoutes: new Map(),
         lazyDataResolved: false,
@@ -57,6 +59,8 @@ export function clearCacheNodeDataForSegmentPath(
         rsc: null,
         prefetchRsc: null,
         head: null,
+        layerAssets: null,
+        prefetchLayerAssets: null,
         prefetchHead: null,
         parallelRoutes: new Map(),
         lazyDataResolved: false,
@@ -72,6 +76,8 @@ 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),
       lazyDataResolved: childCacheNode.lazyDataResolved,

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
@@ -41,6 +41,7 @@ describe('createInitialRouterState', () => {
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,
       initialHead: <title>Test</title>,
+      initialLayerAssets: null,
       couldBeIntercepted: false,
     })
 
@@ -52,13 +53,16 @@ describe('createInitialRouterState', () => {
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,
       initialHead: <title>Test</title>,
+      initialLayerAssets: null,
     })
 
     const expectedCache: CacheNode = {
       lazyData: null,
       rsc: children,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       lazyDataResolved: false,
       loading: null,
@@ -82,6 +86,8 @@ describe('createInitialRouterState', () => {
                           parallelRoutes: new Map(),
                           loading: null,
                           head: <title>Test</title>,
+                          layerAssets: null,
+                          prefetchLayerAssets: null,
                           prefetchHead: null,
                           lazyDataResolved: false,
                         },
@@ -93,6 +99,8 @@ describe('createInitialRouterState', () => {
                 rsc: null,
                 prefetchRsc: null,
                 head: null,
+                layerAssets: null,
+                prefetchLayerAssets: null,
                 prefetchHead: null,
                 lazyDataResolved: false,
                 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
@@ -21,6 +21,7 @@ export interface InitialRouterStateParameters {
   initialParallelRoutes: CacheNode['parallelRoutes']
   location: Location | null
   initialHead: ReactNode
+  initialLayerAssets: ReactNode
   couldBeIntercepted?: boolean
 }
 
@@ -32,6 +33,7 @@ export function createInitialRouterState({
   initialParallelRoutes,
   location,
   initialHead,
+  initialLayerAssets,
   couldBeIntercepted,
 }: InitialRouterStateParameters) {
   const isServer = !location
@@ -42,6 +44,8 @@ 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,
@@ -68,7 +72,8 @@ export function createInitialRouterState({
       undefined,
       initialTree,
       initialSeedData,
-      initialHead
+      initialHead,
+      initialLayerAssets
     )
   }
 
@@ -106,7 +111,9 @@ export function createInitialRouterState({
       location.origin
     )
 
-    const initialFlightData: FlightData = [['', initialTree, null, null]]
+    const initialFlightData: FlightData = [
+      ['', initialTree, null, null, initialLayerAssets],
+    ]
     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
@@ -31,6 +31,8 @@ describe('fillCacheWithNewSubtreeData', () => {
       rsc: null,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       loading: null,
       parallelRoutes: new Map(),
@@ -41,6 +43,8 @@ describe('fillCacheWithNewSubtreeData', () => {
       rsc: <>Root layout</>,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       lazyDataResolved: false,
       loading: null,
@@ -55,6 +59,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                 rsc: <>Linking</>,
                 prefetchRsc: null,
                 head: null,
+                layerAssets: null,
+                prefetchLayerAssets: null,
                 prefetchHead: null,
                 lazyDataResolved: false,
                 loading: null,
@@ -69,6 +75,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                           rsc: <>Page</>,
                           prefetchRsc: null,
                           head: null,
+                          layerAssets: null,
+                          prefetchLayerAssets: null,
                           prefetchHead: null,
                           lazyDataResolved: false,
                           loading: null,
@@ -101,6 +109,8 @@ describe('fillCacheWithNewSubtreeData', () => {
       rsc: null,
       prefetchRsc: null,
       head: null,
+      layerAssets: null,
+      prefetchLayerAssets: null,
       prefetchHead: null,
       lazyDataResolved: false,
       loading: null,
@@ -115,6 +125,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                 rsc: <>Linking</>,
                 prefetchRsc: null,
                 head: null,
+                layerAssets: null,
+                prefetchLayerAssets: null,
                 prefetchHead: null,
                 lazyDataResolved: false,
                 loading: null,
@@ -130,6 +142,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                           rsc: <>Page</>,
                           prefetchRsc: null,
                           head: null,
+                          layerAssets: null,
+                          prefetchLayerAssets: null,
                           prefetchHead: null,
                           lazyDataResolved: false,
                           loading: null,
@@ -142,6 +156,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                           lazyData: null,
                           lazyDataResolved: false,
                           head: null,
+                          layerAssets: null,
+                          prefetchLayerAssets: null,
                           prefetchHead: null,
                           loading: null,
                           parallelRoutes: new Map([
@@ -162,6 +178,8 @@ describe('fillCacheWithNewSubtreeData', () => {
                                         <title>Head Injected!</title>
                                       </>
                                     ),
+                                    layerAssets: null,
+                                    prefetchLayerAssets: null,
                                   },
                                 ],
                               ]),