Pass RouteTree into navigation function

RouteTree is the client version of FlightRouterState. It's the same
representation of the route tree, but it structured for optimized
lookups of the client cache. The plan is the make this the primary/only
type used for dealing with routes on the client; FlightRouterState will
be used a transport format only.

Using the same type accessing the cache during both prefetches and
navigations makes it less likely for the behavior between the two
paths to drift, too. Now that we've deleted the old, pre-Segment
Cache navigation implementation, we should generally try to unify the
data structures wherever possible.

Author: acdlite

packages/next/src/client/components/router-reducer/create-initial-router-state.ts

@@ -6,6 +6,8 @@ import { extractPathFromFlightRouterState } from './compute-changed-path'
 import type { AppRouterState } from './router-reducer-types'
 import { getFlightDataPartsFromPath } from '../../flight-data-helpers'
 import { createInitialCacheNodeForHydration } from './ppr-navigations'
+import { convertRootFlightRouterStateToRouteTree } from '../segment-cache/cache'
+import type { NormalizedSearch } from '../segment-cache/cache-key'
 
 export interface InitialRouterStateParameters {
   navigatedAt: number
@@ -44,14 +46,41 @@ export function createInitialRouterState({
         createHrefFromUrl(location)
       : initialCanonicalUrl
 
+  // Conver the initial FlightRouterState into the RouteTree type.
+  // NOTE: The metadataVaryPath isn't used for anything currently because the
+  // head is embedded into the CacheNode tree, but eventually we'll lift it out
+  // and store it on the top-level state object.
+  const acc = { metadataVaryPath: null }
+  const initialRouteTree = convertRootFlightRouterStateToRouteTree(
+    initialTree,
+    initialRenderedSearch as NormalizedSearch,
+    acc
+  )
+  const initialTask = createInitialCacheNodeForHydration(
+    navigatedAt,
+    initialRouteTree,
+    initialSeedData,
+    initialHead
+  )
+
+  // NOTE: We intentionally don't check if any data needs to be fetched from the
+  // server. We assume the initial hydration payload is sufficient to render
+  // the page.
+  //
+  // The completeness of the initial data is an important property that we rely
+  // on as a last-ditch mechanism for recovering the app; we must always be able
+  // to reload a fresh HTML document to get to a consistent state.
+  //
+  // In the future, there may be cases where the server intentionally sends
+  // partial data and expects the client to fill in the rest, in which case this
+  // logic may change. (There already is a similar case where the server sends
+  // _no_ hydration data in the HTML document at all, and the client fetches it
+  // separately, but that's different because we still end up hydrating with a
+  // complete tree.)
+
   const initialState = {
-    tree: initialTree,
-    cache: createInitialCacheNodeForHydration(
-      navigatedAt,
-      initialTree,
-      initialSeedData,
-      initialHead
-    ),
+    tree: initialTask.route,
+    cache: initialTask.node,
     pushRef: {
       pendingPush: false,
       mpaNavigation: false,

packages/next/src/client/components/router-reducer/fetch-server-response.ts

@@ -35,10 +35,7 @@ import {
 } from '../../flight-data-helpers'
 import { getAppBuildId } from '../../app-build-id'
 import { setCacheBustingSearchParam } from './set-cache-busting-search-param'
-import {
-  getRenderedSearch,
-  urlToUrlWithoutFlightMarker,
-} from '../../route-params'
+import { urlToUrlWithoutFlightMarker } from '../../route-params'
 import type { NormalizedSearch } from '../segment-cache/cache-key'
 import { getDeploymentId } from '../../../shared/lib/deployment-id'
 
@@ -256,7 +253,14 @@ export async function fetchServerResponse(
     return {
       flightData: normalizedFlightData,
       canonicalUrl: canonicalUrl,
-      renderedSearch: getRenderedSearch(res),
+      // TODO: We should be able to read this from the rewrite header, not the
+      // Flight response. Theoretically they should always agree, but there are
+      // currently some cases where it's incorrect for interception routes. We
+      // can always trust the value in the response body. However, per-segment
+      // prefetch responses don't embed the value in the body; they rely on the
+      // header alone. So we need to investigate why the header is sometimes
+      // wrong for interception routes.
+      renderedSearch: flightResponse.q as NormalizedSearch,
       couldBeIntercepted: interception,
       prerendered: flightResponse.S,
       postponed,

packages/next/src/client/components/router-reducer/is-navigating-to-new-root-layout.test.ts

@@ -1,12 +1,13 @@
 import type { FlightRouterState } from '../../../shared/lib/app-router-types'
+import type { RouteTree } from '../segment-cache/cache'
 
 export function isNavigatingToNewRootLayout(
   currentTree: FlightRouterState,
-  nextTree: FlightRouterState
+  nextTree: RouteTree
 ): boolean {
   // Compare segments
   const currentTreeSegment = currentTree[0]
-  const nextTreeSegment = nextTree[0]
+  const nextTreeSegment = nextTree.segment
 
   // If any segment is different before we find the root layout, the root layout has changed.
   // E.g. /same/(group1)/layout.js -> /same/(group2)/layout.js
@@ -27,17 +28,26 @@ export function isNavigatingToNewRootLayout(
   // Current tree root layout found
   if (currentTree[4]) {
     // If the next tree doesn't have the root layout flag, it must have changed.
-    return !nextTree[4]
+    return !nextTree.isRootLayout
   }
   // Current tree didn't have its root layout here, must have changed.
-  if (nextTree[4]) {
+  if (nextTree.isRootLayout) {
     return true
   }
-  // We can't assume it's `parallelRoutes.children` here in case the root layout is `app/@something/layout.js`
-  // But it's not possible to be more than one parallelRoutes before the root layout is found
-  // TODO-APP: change to traverse all parallel routes
-  const currentTreeChild = Object.values(currentTree[1])[0]
-  const nextTreeChild = Object.values(nextTree[1])[0]
-  if (!currentTreeChild || !nextTreeChild) return true
-  return isNavigatingToNewRootLayout(currentTreeChild, nextTreeChild)
+
+  const slots = nextTree.slots
+  const currentTreeChildren = currentTree[1]
+  if (slots !== null) {
+    for (const slot in slots) {
+      const nextTreeChild = slots[slot]
+      const currentTreeChild = currentTreeChildren[slot]
+      if (
+        currentTreeChild === undefined ||
+        isNavigatingToNewRootLayout(currentTreeChild, nextTreeChild)
+      ) {
+        return true
+      }
+    }
+  }
+  return true
 }