Add rendered search to router state (#84983)

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 part is implemented in #84883.

Author: acdlite

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,
               }),

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,
   })
 }
 

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,
         })
       })
     }

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

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,

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) ??

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']
@@ -63,16 +67,23 @@ export interface FetchServerResponseOptions {
   readonly isHmrRefresh?: boolean
 }
 
-export type FetchServerResponseResult = {
-  flightData: NormalizedFlightData[] | string
-  canonicalUrl: URL | undefined
+type SpaFetchServerResponseResult = {
+  flightData: NormalizedFlightData[]
+  canonicalUrl: URL
+  renderedSearch: NormalizedSearch
   couldBeIntercepted: boolean
   prerendered: boolean
   postponed: boolean
   staleTime: number
   debugInfo: Array<any> | null
 }
 
+type MpaFetchServerResponseResult = string
+
+export type FetchServerResponseResult =
+  | MpaFetchServerResponseResult
+  | SpaFetchServerResponseResult
+
 export type RequestHeaders = {
   [RSC_HEADER]?: '1'
   [NEXT_ROUTER_STATE_TREE_HEADER]?: string
@@ -88,17 +99,7 @@ export type RequestHeaders = {
 }
 
 function doMpaNavigation(url: string): FetchServerResponseResult {
-  return {
-    flightData: urlToUrlWithoutFlightMarker(
-      new URL(url, location.origin)
-    ).toString(),
-    canonicalUrl: undefined,
-    couldBeIntercepted: false,
-    prerendered: false,
-    postponed: false,
-    staleTime: -1,
-    debugInfo: null,
-  }
+  return urlToUrlWithoutFlightMarker(new URL(url, location.origin)).toString()
 }
 
 let abortController = new AbortController()
@@ -197,7 +198,7 @@ export async function fetchServerResponse(
     )
 
     const responseUrl = urlToUrlWithoutFlightMarker(new URL(res.url))
-    const canonicalUrl = res.redirected ? responseUrl : undefined
+    const canonicalUrl = res.redirected ? responseUrl : url
 
     const contentType = res.headers.get('content-type') || ''
     const interception = !!res.headers.get('vary')?.includes(NEXT_URL)
@@ -266,9 +267,15 @@ export async function fetchServerResponse(
       return doMpaNavigation(res.url)
     }
 
+    const normalizedFlightData = normalizeFlightData(flightResponse.f)
+    if (typeof normalizedFlightData === 'string') {
+      return doMpaNavigation(normalizedFlightData)
+    }
+
     return {
-      flightData: normalizeFlightData(flightResponse.f),
+      flightData: normalizedFlightData,
       canonicalUrl: canonicalUrl,
+      renderedSearch: getRenderedSearch(res),
       couldBeIntercepted: interception,
       prerendered: flightResponse.S,
       postponed,
@@ -286,15 +293,7 @@ export async function fetchServerResponse(
     // If fetch fails handle it like a mpa navigation
     // TODO-APP: Add a test for the case where a CORS request fails, e.g. external url redirect coming from the response.
     // See https://github.com/vercel/next.js/issues/43605#issuecomment-1451617521 for a reproduction.
-    return {
-      flightData: url.toString(),
-      canonicalUrl: undefined,
-      couldBeIntercepted: false,
-      prerendered: false,
-      postponed: false,
-      staleTime: -1,
-      debugInfo: null,
-    }
+    return url.toString()
   }
 }
 

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

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

@@ -790,13 +790,14 @@ export function listenForDynamicRequest(
   responsePromise: Promise<FetchServerResponseResult>
 ) {
   responsePromise.then(
-    ({ flightData, debugInfo }: FetchServerResponseResult) => {
-      if (typeof flightData === 'string') {
+    (result: FetchServerResponseResult) => {
+      if (typeof result === 'string') {
         // Happens when navigating to page in `pages` from `app`. We shouldn't
         // get here because should have already handled this during
         // the prefetch.
         return
       }
+      const { flightData, debugInfo } = result
       for (const normalizedFlightData of flightData) {
         const {
           segmentPath,

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

@@ -1,4 +1,7 @@
-import { fetchServerResponse } from '../fetch-server-response'
+import {
+  fetchServerResponse,
+  type FetchServerResponseResult,
+} from '../fetch-server-response'
 import { createHrefFromUrl } from '../create-href-from-url'
 import { applyRouterStatePatchToTree } from '../apply-router-state-patch-to-tree'
 import { isNavigatingToNewRootLayout } from '../is-navigating-to-new-root-layout'
@@ -42,17 +45,19 @@ function hmrRefreshReducerImpl(
   })
 
   return cache.lazyData.then(
-    ({ flightData, canonicalUrl: canonicalUrlOverride }) => {
+    (result: FetchServerResponseResult) => {
       // Handle case when navigating to page in `pages` from `app`
-      if (typeof flightData === 'string') {
+      if (typeof result === 'string') {
         return handleExternalUrl(
           state,
           mutable,
-          flightData,
+          result,
           state.pushRef.pendingPush
         )
       }
 
+      const { flightData, canonicalUrl, renderedSearch } = result
+
       // Remove cache.lazyData as it has been resolved at this point.
       cache.lazyData = null
 
@@ -88,13 +93,6 @@ function hmrRefreshReducerImpl(
           )
         }
 
-        const canonicalUrlOverrideHref = canonicalUrlOverride
-          ? createHrefFromUrl(canonicalUrlOverride)
-          : undefined
-
-        if (canonicalUrlOverride) {
-          mutable.canonicalUrl = canonicalUrlOverrideHref
-        }
         const applied = applyFlightData(
           navigatedAt,
           currentCache,
@@ -108,7 +106,8 @@ function hmrRefreshReducerImpl(
         }
 
         mutable.patchedTree = newTree
-        mutable.canonicalUrl = href
+        mutable.renderedSearch = renderedSearch
+        mutable.canonicalUrl = createHrefFromUrl(canonicalUrl)
 
         currentTree = newTree
       }