Add renderedSearch to AppRouterState

acdlite · acdlite · commit f3a19b643b66 · 2025-10-17T11:17:24.000-07:00
The "rendered search" represents the search params that are observed
on the server, i.e. the ones passed as the `searchParams` prop to
page segments. They may differ from the search params in the browser's
URL bar, if the server performed a rewrite. This case corresponds to the
x-nextjs-rewritten-query header.

If a page segment is marked with `"use client"`, we can use this value
to compute the search params on the client instead of having to fetch
them from the server. This will be implemented in the next step.
diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
@@ -284,6 +284,7 @@ export function hydrate(
                 navigatedAt: initialTimestamp,
                 initialFlightData: initialRSCPayload.f,
                 initialCanonicalUrlParts: initialRSCPayload.c,
+                initialRenderedSearch: initialRSCPayload.q,
                 initialParallelRoutes: new Map(),
                 location: window.location,
               }),
diff --git a/packages/next/src/client/components/app-router-instance.ts b/packages/next/src/client/components/app-router-instance.ts
@@ -9,6 +9,7 @@ import {
   type NavigateAction,
   ACTION_HMR_REFRESH,
   PrefetchKind,
+  type AppHistoryState,
 } from './router-reducer/router-reducer-types'
 import { reducer } from './router-reducer/router-reducer'
 import { startTransition } from 'react'
@@ -27,7 +28,6 @@ import type {
   PrefetchOptions,
 } from '../../shared/lib/app-router-context.shared-runtime'
 import { setLinkForCurrentNavigation, type LinkInstance } from './links'
-import type { FlightRouterState } from '../../shared/lib/app-router-types'
 import type { ClientInstrumentationHooks } from '../app-index'
 import type { GlobalErrorComponent } from './builtin/global-error'
 
@@ -305,7 +305,7 @@ export function dispatchNavigateAction(
 
 export function dispatchTraverseAction(
   href: string,
-  tree: FlightRouterState | undefined
+  historyState: AppHistoryState | undefined
 ) {
   const onRouterTransitionStart = getProfilingHookForOnNavigationStart()
   if (onRouterTransitionStart !== null) {
@@ -314,7 +314,7 @@ export function dispatchTraverseAction(
   dispatchAppRouterAction({
     type: ACTION_RESTORE,
     url: new URL(href),
-    tree,
+    historyState,
   })
 }
 
diff --git a/packages/next/src/client/components/app-router.tsx b/packages/next/src/client/components/app-router.tsx
@@ -10,12 +10,12 @@ import {
   LayoutRouterContext,
   GlobalLayoutRouterContext,
 } from '../../shared/lib/app-router-context.shared-runtime'
-import type {
-  CacheNode,
-  FlightRouterState,
-} from '../../shared/lib/app-router-types'
+import type { CacheNode } from '../../shared/lib/app-router-types'
 import { ACTION_RESTORE } from './router-reducer/router-reducer-types'
-import type { AppRouterState } from './router-reducer/router-reducer-types'
+import type {
+  AppHistoryState,
+  AppRouterState,
+} from './router-reducer/router-reducer-types'
 import { createHrefFromUrl } from './router-reducer/create-href-from-url'
 import {
   SearchParamsContext,
@@ -61,14 +61,20 @@ function HistoryUpdater({
       window.next.__pendingUrl = undefined
     }
 
-    const { tree, pushRef, canonicalUrl } = appRouterState
+    const { tree, pushRef, canonicalUrl, renderedSearch } = appRouterState
+
+    const appHistoryState: AppHistoryState = {
+      tree,
+      renderedSearch,
+    }
+
     const historyState = {
       ...(pushRef.preserveCustomHistoryState ? window.history.state : {}),
       // Identifier is shortened intentionally.
       // __NA is used to identify if the history entry can be handled by the app-router.
       // __N is used to identify if the history entry can be handled by the old router.
       __NA: true,
-      __PRIVATE_NEXTJS_INTERNALS_TREE: tree,
+      __PRIVATE_NEXTJS_INTERNALS_TREE: appHistoryState,
     }
     if (
       pushRef.pendingPush &&
@@ -217,7 +223,7 @@ function Router({
       dispatchAppRouterAction({
         type: ACTION_RESTORE,
         url: new URL(window.location.href),
-        tree: window.history.state.__PRIVATE_NEXTJS_INTERNALS_TREE,
+        historyState: window.history.state.__PRIVATE_NEXTJS_INTERNALS_TREE,
       })
     }
 
@@ -300,14 +306,14 @@ function Router({
       url: string | URL | null | undefined
     ) => {
       const href = window.location.href
-      const tree: FlightRouterState | undefined =
+      const appHistoryState: AppHistoryState | undefined =
         window.history.state?.__PRIVATE_NEXTJS_INTERNALS_TREE
 
       startTransition(() => {
         dispatchAppRouterAction({
           type: ACTION_RESTORE,
           url: new URL(url ?? href, href),
-          tree,
+          historyState: appHistoryState,
         })
       })
     }
diff --git a/packages/next/src/client/components/router-reducer/aliased-prefetch-navigations.ts b/packages/next/src/client/components/router-reducer/aliased-prefetch-navigations.ts
@@ -31,6 +31,7 @@ export function handleAliasedPrefetchEntry(
   state: ReadonlyReducerState,
   flightData: string | NormalizedFlightData[],
   url: URL,
+  renderedSearch: string,
   mutable: Mutable
 ) {
   let currentTree = state.tree
@@ -140,6 +141,7 @@ export function handleAliasedPrefetchEntry(
   }
 
   mutable.patchedTree = currentTree
+  mutable.renderedSearch = renderedSearch
   mutable.cache = currentCache
   mutable.canonicalUrl = href
   mutable.hashFragment = url.hash
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
@@ -38,6 +38,7 @@ describe('createInitialRouterState', () => {
       navigatedAt,
       initialFlightData: [[initialTree, ['', children, {}, null]]],
       initialCanonicalUrlParts: initialCanonicalUrl.split('/'),
+      initialRenderedSearch: '',
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,
     })
@@ -46,6 +47,7 @@ describe('createInitialRouterState', () => {
       navigatedAt,
       initialFlightData: [[initialTree, ['', children, {}, null]]],
       initialCanonicalUrlParts: initialCanonicalUrl.split('/'),
+      initialRenderedSearch: '',
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,
     })
@@ -102,6 +104,7 @@ describe('createInitialRouterState', () => {
     const expected: ReturnType<typeof createInitialRouterState> = {
       tree: initialTree,
       canonicalUrl: initialCanonicalUrl,
+      renderedSearch: '',
       pushRef: {
         pendingPush: false,
         mpaNavigation: false,
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
@@ -6,12 +6,15 @@ import type {
 import { createHrefFromUrl } from './create-href-from-url'
 import { fillLazyItemsTillLeafWithHead } from './fill-lazy-items-till-leaf-with-head'
 import { extractPathFromFlightRouterState } from './compute-changed-path'
+
+import type { AppRouterState } from './router-reducer-types'
 import { addRefreshMarkerToActiveParallelSegments } from './refetch-inactive-parallel-segments'
 import { getFlightDataPartsFromPath } from '../../flight-data-helpers'
 
 export interface InitialRouterStateParameters {
   navigatedAt: number
   initialCanonicalUrlParts: string[]
+  initialRenderedSearch: string
   initialParallelRoutes: CacheNode['parallelRoutes']
   initialFlightData: FlightDataPath[]
   location: Location | null
@@ -21,9 +24,10 @@ export function createInitialRouterState({
   navigatedAt,
   initialFlightData,
   initialCanonicalUrlParts,
+  initialRenderedSearch,
   initialParallelRoutes,
   location,
-}: InitialRouterStateParameters) {
+}: InitialRouterStateParameters): AppRouterState {
   // When initialized on the server, the canonical URL is provided as an array of parts.
   // This is to ensure that when the RSC payload streamed to the client, crawlers don't interpret it
   // as a URL that should be crawled.
@@ -91,6 +95,7 @@ export function createInitialRouterState({
       segmentPaths: [],
     },
     canonicalUrl,
+    renderedSearch: initialRenderedSearch,
     nextUrl:
       // the || operator is intentional, the pathname can be an empty string
       (extractPathFromFlightRouterState(initialTree) || location?.pathname) ??
diff --git a/packages/next/src/client/components/router-reducer/fetch-server-response.ts b/packages/next/src/client/components/router-reducer/fetch-server-response.ts
@@ -36,7 +36,11 @@ import {
 } from '../../flight-data-helpers'
 import { getAppBuildId } from '../../app-build-id'
 import { setCacheBustingSearchParam } from './set-cache-busting-search-param'
-import { urlToUrlWithoutFlightMarker } from '../../route-params'
+import {
+  getRenderedSearch,
+  urlToUrlWithoutFlightMarker,
+} from '../../route-params'
+import type { NormalizedSearch } from '../segment-cache'
 
 const createFromReadableStream =
   createFromReadableStreamBrowser as (typeof import('react-server-dom-webpack/client.browser'))['createFromReadableStream']
@@ -66,6 +70,7 @@ export interface FetchServerResponseOptions {
 type SpaFetchServerResponseResult = {
   flightData: NormalizedFlightData[]
   canonicalUrl: URL
+  renderedSearch: NormalizedSearch
   couldBeIntercepted: boolean
   prerendered: boolean
   postponed: boolean
@@ -270,6 +275,7 @@ export async function fetchServerResponse(
     return {
       flightData: normalizedFlightData,
       canonicalUrl: canonicalUrl,
+      renderedSearch: getRenderedSearch(res),
       couldBeIntercepted: interception,
       prerendered: flightResponse.S,
       postponed,
diff --git a/packages/next/src/client/components/router-reducer/handle-mutable.ts b/packages/next/src/client/components/router-reducer/handle-mutable.ts
@@ -35,11 +35,8 @@ export function handleMutable(
 
   return {
     // Set href.
-    canonicalUrl: isNotUndefined(mutable.canonicalUrl)
-      ? mutable.canonicalUrl === state.canonicalUrl
-        ? state.canonicalUrl
-        : mutable.canonicalUrl
-      : state.canonicalUrl,
+    canonicalUrl: mutable.canonicalUrl ?? state.canonicalUrl,
+    renderedSearch: mutable.renderedSearch ?? state.renderedSearch,
     pushRef: {
       pendingPush: isNotUndefined(mutable.pendingPush)
         ? mutable.pendingPush
diff --git a/packages/next/src/client/components/router-reducer/reducers/hmr-refresh-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/hmr-refresh-reducer.ts
@@ -56,7 +56,7 @@ function hmrRefreshReducerImpl(
         )
       }
 
-      const { flightData, canonicalUrl } = result
+      const { flightData, canonicalUrl, renderedSearch } = result
 
       // Remove cache.lazyData as it has been resolved at this point.
       cache.lazyData = null
@@ -106,6 +106,7 @@ function hmrRefreshReducerImpl(
         }
 
         mutable.patchedTree = newTree
+        mutable.renderedSearch = renderedSearch
         mutable.canonicalUrl = createHrefFromUrl(canonicalUrl)
 
         currentTree = newTree
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
@@ -108,6 +108,7 @@ function handleNavigationResult(
       // Received a new result.
       mutable.cache = result.data.cacheNode
       mutable.patchedTree = result.data.flightRouterState
+      mutable.renderedSearch = result.data.renderedSearch
       mutable.canonicalUrl = result.data.canonicalUrl
       mutable.scrollableSegments = result.data.scrollableSegments
       mutable.shouldScroll = result.data.shouldScroll
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
@@ -64,7 +64,7 @@ export function refreshReducer(
         )
       }
 
-      const { flightData, canonicalUrl } = result
+      const { flightData, canonicalUrl, renderedSearch } = result
 
       // Remove cache.lazyData as it has been resolved at this point.
       cache.lazyData = null
@@ -136,6 +136,7 @@ export function refreshReducer(
 
         mutable.cache = cache
         mutable.patchedTree = newTree
+        mutable.renderedSearch = renderedSearch
 
         currentTree = newTree
       }
diff --git a/packages/next/src/client/components/router-reducer/reducers/restore-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/restore-reducer.ts
@@ -6,20 +6,29 @@ import type {
 } from '../router-reducer-types'
 import { extractPathFromFlightRouterState } from '../compute-changed-path'
 import { updateCacheNodeOnPopstateRestoration } from '../ppr-navigations'
+import type { FlightRouterState } from '../../../../shared/lib/app-router-types'
 
 export function restoreReducer(
   state: ReadonlyReducerState,
   action: RestoreAction
 ): ReducerState {
-  const { url, tree } = action
+  const { url, historyState } = action
   const href = createHrefFromUrl(url)
   // This action is used to restore the router state from the history state.
   // However, it's possible that the history state no longer contains the `FlightRouterState`.
   // We will copy over the internal state on pushState/replaceState events, but if a history entry
   // occurred before hydration, or if the user navigated to a hash using a regular anchor link,
   // the history state will not contain the `FlightRouterState`.
   // In this case, we'll continue to use the existing tree so the router doesn't get into an invalid state.
-  const treeToRestore = tree || state.tree
+  let treeToRestore: FlightRouterState | undefined
+  let renderedSearch: string | undefined
+  if (historyState) {
+    treeToRestore = historyState.tree
+    renderedSearch = historyState.renderedSearch
+  } else {
+    treeToRestore = state.tree
+    renderedSearch = state.renderedSearch
+  }
 
   const oldCache = state.cache
   const newCache = process.env.__NEXT_PPR
@@ -33,6 +42,7 @@ export function restoreReducer(
   return {
     // Set canonical url
     canonicalUrl: href,
+    renderedSearch,
     pushRef: {
       pendingPush: false,
       mpaNavigation: false,
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
@@ -33,7 +33,7 @@ export function serverPatchReducer(
     )
   }
 
-  const { flightData, canonicalUrl } = serverResponse
+  const { flightData, canonicalUrl, renderedSearch } = serverResponse
 
   let currentTree = state.tree
   let currentCache = state.cache
@@ -74,6 +74,7 @@ export function serverPatchReducer(
     applyFlightData(navigatedAt, currentCache, cache, normalizedFlightData)
 
     mutable.patchedTree = newTree
+    mutable.renderedSearch = renderedSearch
     mutable.cache = cache
 
     currentCache = cache
diff --git a/packages/next/src/client/components/router-reducer/router-reducer-types.ts b/packages/next/src/client/components/router-reducer/router-reducer-types.ts
@@ -25,6 +25,7 @@ export type RouterChangeByServerResponse = ({
 export interface Mutable {
   mpaNavigation?: boolean
   patchedTree?: FlightRouterState
+  renderedSearch?: string
   canonicalUrl?: string
   scrollableSegments?: FlightSegmentPath[]
   pendingPush?: boolean
@@ -122,7 +123,12 @@ export interface NavigateAction {
 export interface RestoreAction {
   type: typeof ACTION_RESTORE
   url: URL
-  tree: FlightRouterState | undefined
+  historyState: AppHistoryState | undefined
+}
+
+export type AppHistoryState = {
+  tree: FlightRouterState
+  renderedSearch: string
 }
 
 /**
@@ -219,6 +225,7 @@ export type AppRouterState = {
    * - This is the url you see in the browser.
    */
   canonicalUrl: string
+  renderedSearch: string
   /**
    * The underlying "url" representing the UI state, which is used for intercepting routes.
    */
diff --git a/packages/next/src/client/components/segment-cache-impl/navigation.ts b/packages/next/src/client/components/segment-cache-impl/navigation.ts
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
diff --git a/packages/next/src/shared/lib/app-router-types.ts b/packages/next/src/shared/lib/app-router-types.ts
