Track search string as part of "refresh state"

When a parallel route does not match the current URL, in its place we
render the render the last active route that matched that slot. When
we next refresh the page, we track some additional state to inform the
router how to refresh the old, "inactive" routes that aren't reachable
from the outermost, "active" route.

Before this PR, the only state we tracked was the URL of the page that
last matched the inactive segment. After this PR, I am also tracking
the search query string of the old route. This can't be inferred from
the URL alone because the URL may have been rewritten by the server.

We don't need the search query to perform a network request — that
is handled by the URL alone — but we do need it in order to construct
a cache key for the page segments. Today we read the cache key from
the FlightRouterState, which has all the params embdeed inside of it,
but eventually I want to remove all uses of FlightRouterState that
aren't about sending/receiving data from the server or storing the
tree as state in the browser's history entry. So this is an incremental
step towards that goal.

Author: acdlite

packages/next/src/client/components/router-reducer/ppr-navigations.ts

@@ -2,6 +2,7 @@ import type {
   CacheNodeSeedData,
   FlightRouterState,
   FlightSegmentPath,
+  RefreshState,
 } from '../../../shared/lib/app-router-types'
 import type {
   ChildSegmentMap,
@@ -51,7 +52,7 @@ export type NavigationTask = {
   // The URL that should be used to fetch the dynamic data. This is only set
   // when the segment cannot be refetched from the current route, because it's
   // part of a "default" parallel slot that was reused during a navigation.
-  refreshUrl: string | null
+  refreshState: RefreshState | null
   children: Map<string, NavigationTask> | null
 }
 
@@ -175,6 +176,7 @@ export function createInitialCacheNodeForHydration(
 export function startPPRNavigation(
   navigatedAt: number,
   oldUrl: URL,
+  oldRenderedSearch: string,
   oldCacheNode: CacheNode | null,
   oldRouterState: FlightRouterState,
   newRouterState: FlightRouterState,
@@ -189,7 +191,11 @@ export function startPPRNavigation(
 ): NavigationTask | null {
   const didFindRootLayout = false
   const parentNeedsDynamicRequest = false
-  const parentRefreshUrl = null
+  const parentRefreshState = null
+  const oldRootRefreshState: RefreshState = [
+    createHrefFromUrl(oldUrl),
+    oldRenderedSearch,
+  ]
   return updateCacheNodeOnNavigation(
     navigatedAt,
     oldUrl,
@@ -207,7 +213,8 @@ export function startPPRNavigation(
     null,
     null,
     parentNeedsDynamicRequest,
-    parentRefreshUrl,
+    oldRootRefreshState,
+    parentRefreshState,
     accumulation
   )
 }
@@ -229,7 +236,8 @@ function updateCacheNodeOnNavigation(
   parentSegmentPath: FlightSegmentPath | null,
   parentParallelRouteKey: string | null,
   parentNeedsDynamicRequest: boolean,
-  parentRefreshUrl: string | null,
+  oldRootRefreshState: RefreshState,
+  parentRefreshState: RefreshState | null,
   accumulation: NavigationRequestAccumulation
 ): NavigationTask | null {
   // Check if this segment matches the one in the previous route.
@@ -441,20 +449,20 @@ function updateCacheNodeOnNavigation(
   // current route; it may have been reused from an older route. If so,
   // we need to fetch its data from the old route's URL rather than current
   // route's URL. Keep track of this as we traverse the tree.
-  const href = newRouterState[2]
-  const refreshUrl =
-    typeof href === 'string' && newRouterState[3] === 'refresh'
+  const maybeRefreshState = newRouterState[2]
+  const refreshState =
+    maybeRefreshState !== undefined && maybeRefreshState !== null
       ? // This segment is not present in the current route. Track its
         // refresh URL as we continue traversing the tree.
-        href
+        maybeRefreshState
       : // Inherit the refresh URL from the parent.
-        parentRefreshUrl
+        parentRefreshState
 
   // If this segment itself needs to fetch new data from the server, then by
   // definition it is being refreshed. Track its refresh URL so we know which
   // URL to request the data from.
-  if (needsDynamicRequest && refreshUrl !== null) {
-    accumulateRefreshUrl(accumulation, refreshUrl)
+  if (needsDynamicRequest && refreshState !== null) {
+    accumulateRefreshUrl(accumulation, refreshState)
   }
 
   // As we diff the trees, we may sometimes modify (copy-on-write, not mutate)
@@ -519,7 +527,7 @@ function updateCacheNodeOnNavigation(
       // a soft navigation; instead, the client reuses whatever segment was
       // already active in that slot on the previous route.
       newRouterStateChild = reuseActiveSegmentInDefaultSlot(
-        oldUrl,
+        oldRootRefreshState,
         oldRouterStateChild
       )
       newSegmentChild = newRouterStateChild[0]
@@ -556,7 +564,8 @@ function updateCacheNodeOnNavigation(
       segmentPath,
       parallelRouteKey,
       parentNeedsDynamicRequest || needsDynamicRequest,
-      refreshUrl,
+      oldRootRefreshState,
+      refreshState,
       accumulation
     )
 
@@ -613,7 +622,7 @@ function updateCacheNodeOnNavigation(
       childNeedsDynamicRequest,
       parentNeedsDynamicRequest
     ),
-    refreshUrl,
+    refreshState,
     children: taskChildren,
   }
 }
@@ -918,7 +927,7 @@ function createCacheNodeOnNavigation(
     ),
     // This route is not part of the current tree, so there's no reason to
     // track the refresh URL.
-    refreshUrl: null,
+    refreshState: null,
     children: taskChildren,
   }
 }
@@ -981,7 +990,7 @@ function createDynamicRequestTree(
 
 function accumulateRefreshUrl(
   accumulation: NavigationRequestAccumulation,
-  refreshUrl: string
+  refreshState: RefreshState
 ) {
   // This is a refresh navigation, and we're inside a "default" slot that's
   // not part of the current route; it was reused from an older route. In
@@ -993,6 +1002,7 @@ function accumulateRefreshUrl(
   // we don't do it immediately here is so we can deduplicate multiple
   // instances of the same URL into a single request. See
   // listenForDynamicRequest for more details.
+  const refreshUrl = refreshState[0]
   const separateRefreshUrls = accumulation.separateRefreshUrls
   if (separateRefreshUrls === null) {
     accumulation.separateRefreshUrls = new Set([refreshUrl])
@@ -1002,34 +1012,30 @@ function accumulateRefreshUrl(
 }
 
 function reuseActiveSegmentInDefaultSlot(
-  oldUrl: URL,
+  oldRootRefreshState: RefreshState,
   oldRouterState: FlightRouterState
 ): FlightRouterState {
   // This is a "default" segment. These are never sent by the server during a
   // soft navigation; instead, the client reuses whatever segment was already
   // active in that slot on the previous route. This means if we later need to
   // refresh the segment, it will have to be refetched from the previous route's
   // URL. We store it in the Flight Router State.
-  //
-  // TODO: We also mark the segment with a "refresh" marker but I think we can
-  // get rid of that eventually by making sure we only add URLs to page segments
-  // that are reused. Then the presence of the URL alone is enough.
   let reusedRouterState
 
-  const oldRefreshMarker = oldRouterState[3]
-  if (oldRefreshMarker === 'refresh') {
+  const oldRefreshState = oldRouterState[2]
+  if (oldRefreshState !== undefined && oldRefreshState !== null) {
     // This segment was already reused from an even older route. Keep its
-    // existing URL and refresh marker.
+    // existing URL and refresh state.
     reusedRouterState = oldRouterState
   } else {
-    // This segment was not previously reused, and it's not on the new route.
-    // So it must have been delivered in the old route.
+    // Since this route didn't already have a refresh state, it must have been
+    // reachable from the root of the old route. So we use the refresh state
+    // that represents the old route.
     reusedRouterState = patchRouterStateWithNewChildren(
       oldRouterState,
       oldRouterState[1]
     )
-    reusedRouterState[2] = createHrefFromUrl(oldUrl)
-    reusedRouterState[3] = 'refresh'
+    reusedRouterState[2] = oldRootRefreshState
   }
 
   return reusedRouterState
@@ -1626,7 +1632,7 @@ function abortRemainingPendingTasks(
     //
     // When this happens, we treat this the same as a refresh(). The entire
     // tree will be re-rendered from the root.
-    if (task.refreshUrl === null) {
+    if (task.refreshState === null) {
       // Trigger a "soft" refresh. Essentially the same as calling `refresh()`
       // in a Server Action.
       exitStatus = NavigationTaskExitStatus.SoftRetry

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -162,9 +162,11 @@ export function navigateReducer(
   // implementation. Eventually we'll rewrite the router reducer to a
   // state machine.
   const currentUrl = new URL(state.canonicalUrl, location.origin)
+  const currentRenderedSearch = state.renderedSearch
   const result = navigateUsingSegmentCache(
     url,
     currentUrl,
+    currentRenderedSearch,
     state.cache,
     state.tree,
     state.nextUrl,

packages/next/src/client/components/router-reducer/reducers/refresh-reducer.ts

@@ -36,6 +36,7 @@ export function refreshDynamicData(
   // existing dynamic data (including in shared layouts) is re-fetched.
   const currentCanonicalUrl = state.canonicalUrl
   const currentUrl = new URL(currentCanonicalUrl, location.origin)
+  const currentRenderedSearch = state.renderedSearch
   const currentFlightRouterState = state.tree
   const shouldScroll = true
 
@@ -53,6 +54,7 @@ export function refreshDynamicData(
     currentCanonicalUrl,
     navigationSeed,
     currentUrl,
+    currentRenderedSearch,
     state.cache,
     currentFlightRouterState,
     freshnessPolicy,

packages/next/src/client/components/router-reducer/reducers/restore-reducer.ts

@@ -50,6 +50,7 @@ export function restoreReducer(
   const task = startPPRNavigation(
     now,
     currentUrl,
+    state.renderedSearch,
     state.cache,
     state.tree,
     treeToRestore,

packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

@@ -382,6 +382,7 @@ export function serverActionReducer(
       // If there was no redirect, then the target URL is the same as the
       // current URL.
       const currentUrl = new URL(state.canonicalUrl, location.origin)
+      const currentRenderedSearch = state.renderedSearch
       const redirectUrl =
         redirectLocation !== undefined ? redirectLocation : currentUrl
       const currentFlightRouterState = state.tree
@@ -425,6 +426,7 @@ export function serverActionReducer(
             redirectCanonicalUrl,
             navigationSeed,
             currentUrl,
+            currentRenderedSearch,
             state.cache,
             currentFlightRouterState,
             freshnessPolicy,
@@ -446,6 +448,7 @@ export function serverActionReducer(
       const result = navigateUsingSegmentCache(
         redirectUrl,
         currentUrl,
+        currentRenderedSearch,
         state.cache,
         currentFlightRouterState,
         nextUrl,

packages/next/src/client/components/router-reducer/reducers/server-patch-reducer.ts

@@ -30,6 +30,7 @@ export function serverPatchReducer(
     return handleExternalUrl(state, mutable, retryUrl.href, false)
   }
   const currentUrl = new URL(state.canonicalUrl, location.origin)
+  const currentRenderedSearch = state.renderedSearch
   if (action.previousTree !== state.tree) {
     // There was another, more recent navigation since the once that
     // mismatched. We can abort the retry, but we still need to refresh the
@@ -50,6 +51,7 @@ export function serverPatchReducer(
     retryCanonicalUrl,
     retrySeed,
     currentUrl,
+    currentRenderedSearch,
     state.cache,
     state.tree,
     FreshnessPolicy.RefreshAll,

packages/next/src/client/components/router-reducer/router-reducer-types.ts

@@ -222,7 +222,17 @@ export type AppRouterState = {
    * - This is the url you see in the browser.
    */
   canonicalUrl: string
+
+  /**
+   * The search query observed by the server during rendering. This may be
+   * different from the canonical URL's search query if the server performed
+   * a rewrite. Even though a client component won't observe this (unless it
+   * were passed from a Server component), the client router needs to know this
+   * so it can properly cache segment data; it'ss part of a page segment's
+   * cache key.
+   */
   renderedSearch: string
+
   /**
    * The underlying "url" representing the UI state, which is used for intercepting routes.
    */

packages/next/src/client/components/segment-cache/navigation.ts

@@ -70,6 +70,7 @@ export type NavigationResult =
 export function navigate(
   url: URL,
   currentUrl: URL,
+  currentRenderedSearch: string,
   currentCacheNode: CacheNode | null,
   currentFlightRouterState: FlightRouterState,
   nextUrl: string | null,
@@ -122,6 +123,7 @@ export function navigate(
       now,
       url,
       currentUrl,
+      currentRenderedSearch,
       nextUrl,
       isSamePageNavigation,
       currentCacheNode,
@@ -166,6 +168,7 @@ export function navigate(
         now,
         url,
         currentUrl,
+        currentRenderedSearch,
         nextUrl,
         isSamePageNavigation,
         currentCacheNode,
@@ -193,6 +196,7 @@ export function navigate(
       now,
       url,
       currentUrl,
+      currentRenderedSearch,
       nextUrl,
       currentCacheNode,
       currentFlightRouterState,
@@ -209,6 +213,7 @@ export function navigateToSeededRoute(
   canonicalUrl: string,
   navigationSeed: NavigationSeed,
   currentUrl: URL,
+  currentRenderedSearch: string,
   currentCacheNode: CacheNode | null,
   currentFlightRouterState: FlightRouterState,
   freshnessPolicy: FreshnessPolicy,
@@ -225,6 +230,7 @@ export function navigateToSeededRoute(
   const task = startPPRNavigation(
     now,
     currentUrl,
+    currentRenderedSearch,
     currentCacheNode,
     currentFlightRouterState,
     navigationSeed.tree,
@@ -259,6 +265,7 @@ function navigateUsingPrefetchedRouteTree(
   now: number,
   url: URL,
   currentUrl: URL,
+  currentRenderedSearch: string,
   nextUrl: string | null,
   isSamePageNavigation: boolean,
   currentCacheNode: CacheNode | null,
@@ -287,6 +294,7 @@ function navigateUsingPrefetchedRouteTree(
   const task = startPPRNavigation(
     now,
     currentUrl,
+    currentRenderedSearch,
     currentCacheNode,
     currentFlightRouterState,
     prefetchFlightRouterState,
@@ -483,6 +491,7 @@ async function navigateDynamicallyWithNoPrefetch(
   now: number,
   url: URL,
   currentUrl: URL,
+  currentRenderedSearch: string,
   nextUrl: string | null,
   currentCacheNode: CacheNode | null,
   currentFlightRouterState: FlightRouterState,
@@ -558,6 +567,7 @@ async function navigateDynamicallyWithNoPrefetch(
     createHrefFromUrl(canonicalUrl),
     navigationSeed,
     currentUrl,
+    currentRenderedSearch,
     currentCacheNode,
     currentFlightRouterState,
     freshnessPolicy,