Delete abandoned segment parsing code (#82458)

Originally, as part of the clientParamParsing feature, I expected that I
would omit param values from the FlightRouterState when sending data
from the server, and add it on the client.

However, I've since realized this is unnecessary because
FlightRouterState is only used during runtime server responses. Not in
static responses, like per-segment prefetches.

Since the goal of clientParamParsing is to omit param values from static
responses, we don't need to change anything about FlightRouterState.

We may still want to update how params are processed on the server to
more closely match the implementation on the client, but that still
doesn't require any changes to FlightRouterState.

So, this deletes all the code related to adding client-parsed params to
FlightRouterState on the client. None of this was being used anywhere;
it was added by previous PRs in anticipation that it would eventually be
used. But now we don't need it.

Author: acdlite

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

@@ -38,25 +38,7 @@ export function createInitialRouterState({
   // as a URL that should be crawled.
   const initialCanonicalUrl = initialCanonicalUrlParts.join('/')
 
-  // TODO: Eventually we want to always read the rendered params from the URL
-  // and/or the x-rewritten-path header, so that we can omit them from the
-  // response body. This lets reuse cached responses if params aren't referenced
-  // anywhere in the actual page data, e.g. if they're only accessed by client
-  // components. However, during the initial render, there's no way to access
-  // the headers. For a partially dynamic page, this is OK, because there's
-  // going to be a dynamic server render regardless, so we can send the URL
-  // in the resume body. For a completely static page, though, there's no
-  // dynamic server render, so that won't work.
-  //
-  // Instead, we'll perform a HEAD request and read the rewritten URL from
-  // that response.
-  const renderedPathname = new URL(initialCanonicalUrl, 'http://localhost')
-    .pathname
-
-  const normalizedFlightData = getFlightDataPartsFromPath(
-    initialFlightData[0],
-    renderedPathname
-  )
+  const normalizedFlightData = getFlightDataPartsFromPath(initialFlightData[0])
   const {
     tree: initialTree,
     seedData: initialSeedData,

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

@@ -31,10 +31,7 @@ import {
 } from '../../flight-data-helpers'
 import { getAppBuildId } from '../../app-build-id'
 import { setCacheBustingSearchParam } from './set-cache-busting-search-param'
-import {
-  getRenderedPathname,
-  urlToUrlWithoutFlightMarker,
-} from '../../route-params'
+import { urlToUrlWithoutFlightMarker } from '../../route-params'
 
 const createFromReadableStream =
   createFromReadableStreamBrowser as (typeof import('react-server-dom-webpack/client.browser'))['createFromReadableStream']
@@ -224,21 +221,8 @@ export async function fetchServerResponse(
       return doMpaNavigation(res.url)
     }
 
-    let renderedPathname
-    if (process.env.__NEXT_CLIENT_SEGMENT_CACHE) {
-      // Read the URL from the response object.
-      renderedPathname = getRenderedPathname(res)
-    } else {
-      // Before Segment Cache is enabled, we should not rely on the new
-      // rewrite headers (x-rewritten-path, x-rewritten-query) because that
-      // is a breaking change. Read the URL from the response body.
-      const renderedUrlParts = response.c
-      renderedPathname = new URL(renderedUrlParts.join('/'), 'http://localhost')
-        .pathname
-    }
-
     return {
-      flightData: normalizeFlightData(response.f, renderedPathname),
+      flightData: normalizeFlightData(response.f),
       canonicalUrl: canonicalUrl,
       couldBeIntercepted: interception,
       prerendered: response.S,

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

@@ -56,7 +56,6 @@ import {
   omitUnusedArgs,
 } from '../../../../shared/lib/server-reference-info'
 import { revalidateEntireCache } from '../../segment-cache'
-import { getRenderedPathname } from '../../../route-params'
 
 const createFromFetch =
   createFromFetchBrowser as (typeof import('react-server-dom-webpack/client.browser'))['createFromFetch']
@@ -183,24 +182,9 @@ async function fetchServerAction(
       { callServer, findSourceMapURL, temporaryReferences }
     )
 
-    let renderedPathname
-    if (process.env.__NEXT_CLIENT_SEGMENT_CACHE) {
-      // Read the URL from the response object.
-      renderedPathname = getRenderedPathname(res)
-    } else {
-      // Before Segment Cache is enabled, we should not rely on the new
-      // rewrite headers (x-rewritten-path, x-rewritten-query) because that
-      // is a breaking change. Read the URL from the response body.
-      const canonicalUrlParts = response.c
-      renderedPathname = new URL(
-        canonicalUrlParts.join('/'),
-        'http://localhost'
-      ).pathname
-    }
-
     // An internal redirect can send an RSC response, but does not have a useful `actionResult`.
     actionResult = redirectLocation ? undefined : response.a
-    actionFlightData = normalizeFlightData(response.f, renderedPathname)
+    actionFlightData = normalizeFlightData(response.f)
   } else {
     // An external redirect doesn't contain RSC data.
     actionResult = undefined

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

@@ -46,6 +46,7 @@ import type {
 import {
   doesStaticSegmentAppearInURL,
   getCacheKeyForDynamicParam,
+  getParamValueFromCacheKey,
   getRenderedPathname,
   getRenderedSearch,
   parseDynamicParamFromURLPart,
@@ -975,12 +976,7 @@ function convertTreePrefetchToRouteTree(
           value: childParamValue,
           type: childParamType,
         }
-        childSegment = [
-          childParamName,
-          childParamKey,
-          childParamType,
-          childParamValue,
-        ]
+        childSegment = [childParamName, childParamKey, childParamType]
         childDoesAppearInURL = true
       } else {
         childSegment = childParamName
@@ -1082,7 +1078,9 @@ function convertFlightRouterStateToRouteTree(
   let segment: FlightRouterStateSegment
   let param: RouteParam | null = null
   if (Array.isArray(originalSegment)) {
-    const paramValue = originalSegment[3]
+    const paramCacheKey = originalSegment[1]
+    const paramType = originalSegment[2]
+    const paramValue = getParamValueFromCacheKey(paramCacheKey, paramType)
     param = {
       name: originalSegment[0],
       value: paramValue === undefined ? null : paramValue,
@@ -1647,12 +1645,8 @@ function writeDynamicTreeResponseIntoCache(
   // Get the URL that was used to render the target page. This may be different
   // from the URL in the request URL, if the page was rewritten.
   const renderedSearch = getRenderedSearch(response)
-  const renderedPathname = getRenderedPathname(response)
 
-  const normalizedFlightDataResult = normalizeFlightData(
-    serverData.f,
-    renderedPathname
-  )
+  const normalizedFlightDataResult = normalizeFlightData(serverData.f)
   if (
     // A string result means navigating to this route will result in an
     // MPA navigation.
@@ -1759,11 +1753,7 @@ function writeDynamicRenderResponseIntoCache(
     return null
   }
 
-  // Get the URL that was used to render the target page. This may be different
-  // from the URL in the request URL, if the page was rewritten.
-  const renderedPathname = getRenderedPathname(response)
-
-  const flightDatas = normalizeFlightData(serverData.f, renderedPathname)
+  const flightDatas = normalizeFlightData(serverData.f)
   if (typeof flightDatas === 'string') {
     // This means navigating to this route will result in an MPA navigation.
     // TODO: We should cache this, too, so that the MPA navigation is immediate.

packages/next/src/client/flight-data-helpers.ts

@@ -1,6 +1,5 @@
 import type {
   CacheNodeSeedData,
-  DynamicParamTypesShort,
   FlightData,
   FlightDataPath,
   FlightRouterState,
@@ -9,10 +8,6 @@ import type {
 } from '../server/app-render/types'
 import type { HeadData } from '../shared/lib/app-router-context.shared-runtime'
 import { PAGE_SEGMENT_KEY } from '../shared/lib/segment'
-import {
-  doesStaticSegmentAppearInURL,
-  parseDynamicParamFromURLPart,
-} from './route-params'
 
 export type NormalizedFlightData = {
   /**
@@ -36,8 +31,7 @@ export type NormalizedFlightData = {
 // we're currently exporting it so we can use it directly. This should be fixed as part of the unification of
 // the different ways we express `FlightSegmentPath`.
 export function getFlightDataPartsFromPath(
-  flightDataPath: FlightDataPath,
-  renderedPathname: string
+  flightDataPath: FlightDataPath
 ): NormalizedFlightData {
   // Pick the last 4 items from the `FlightDataPath` to get the [tree, seedData, viewport, isHeadPartial].
   const flightDataPathLength = 4
@@ -47,8 +41,6 @@ export function getFlightDataPartsFromPath(
   // The `FlightSegmentPath` is everything except the last three items. For a root render, it won't be present.
   const segmentPath = flightDataPath.slice(0, -flightDataPathLength)
 
-  fillTreeWithParamValues(renderedPathname, segmentPath, tree)
-
   return {
     // TODO: Unify these two segment path helpers. We are inconsistently pushing an empty segment ("")
     // to the start of the segment path in some places which makes it hard to use solely the segment path.
@@ -75,8 +67,7 @@ export function getNextFlightSegmentPath(
 }
 
 export function normalizeFlightData(
-  flightData: FlightData,
-  renderedPathname: string
+  flightData: FlightData
 ): NormalizedFlightData[] | string {
   // FlightData can be a string when the server didn't respond with a proper flight response,
   // or when a redirect happens, to signal to the client that it needs to perform an MPA navigation.
@@ -85,7 +76,7 @@ export function normalizeFlightData(
   }
 
   return flightData.map((flightDataPath) =>
-    getFlightDataPartsFromPath(flightDataPath, renderedPathname)
+    getFlightDataPartsFromPath(flightDataPath)
   )
 }
 
@@ -180,93 +171,3 @@ function shouldPreserveRefreshMarker(
 ): boolean {
   return Boolean(refreshMarker && refreshMarker !== 'refresh')
 }
-
-function fillTreeWithParamValues(
-  renderedPathname: string,
-  segmentPath: FlightSegmentPath,
-  flightRouterState: FlightRouterState
-): void {
-  // Traverse the FlightRouterState and fill in the param values using the
-  // rendered pathname.
-
-  // Remove trailing and leading slashes, then split the pathname into parts.
-  // These will be assigned as params as we traverse the tree.
-  const pathnameParts = renderedPathname.split('/').filter((p) => p !== '')
-
-  let pathnamePartsIndex = 0
-
-  // segmentPath represents the parent path of subtree. It's a repeating pattern
-  // of parallel route key and segment:
-  //
-  //   [string, Segment, string, Segment, string, Segment, ...]
-  //
-  // Iterate through the path and skip over the corresponding pathname parts.
-  for (let i = 0; i < segmentPath.length; i += 2) {
-    const segment: Segment = segmentPath[i + 1]
-    if (Array.isArray(segment) || doesStaticSegmentAppearInURL(segment)) {
-      // This segment appears in the URL, so we need to skip over this part
-      // of the pathname
-      pathnamePartsIndex++
-    }
-  }
-
-  fillTreeWithParamValuesImpl(
-    renderedPathname,
-    flightRouterState,
-    pathnameParts,
-    pathnamePartsIndex
-  )
-}
-
-function fillTreeWithParamValuesImpl(
-  renderedPathname: string,
-  flightRouterState: FlightRouterState,
-  pathnameParts: Array<string>,
-  pathnamePartsIndex: number
-): void {
-  const segment = flightRouterState[0]
-
-  let doesAppearInURL: boolean
-  if (Array.isArray(segment)) {
-    doesAppearInURL = true
-
-    // This segment is parameterized. Get the param from the pathname.
-    const paramType = segment[2] as DynamicParamTypesShort
-    const paramValue = parseDynamicParamFromURLPart(
-      paramType,
-      pathnameParts,
-      pathnamePartsIndex
-    )
-
-    // Insert the param value into the segment.
-    // TODO: Eventually this is the value that will be passed to client
-    // components that render this param.
-    segment[3] = paramValue
-
-    // Assign a cache key to the segment, based on the param value. In the
-    // pre-Segment Cache implementation, the server computes this and sends it
-    // in the body of the response. In the Segment Cache implementation, the
-    // server sends an empty string and we fill it in here.
-    // TODO: This will land in a follow up PR.
-    // const segmentCacheKey = getCacheKeyForDynamicParam(paramValue)
-    // segment[1] = segmentCacheKey
-  } else {
-    doesAppearInURL = doesStaticSegmentAppearInURL(segment)
-  }
-
-  // Only increment the index if the segment appears in the URL. If it's a
-  // "virtual" segment, like a route group, it remains the same.
-  const childPathnamePartsIndex = doesAppearInURL
-    ? pathnamePartsIndex + 1
-    : pathnamePartsIndex
-
-  const parallelRoutes = flightRouterState[1]
-  for (const parallelRouteKey in parallelRoutes) {
-    fillTreeWithParamValuesImpl(
-      renderedPathname,
-      parallelRoutes[parallelRouteKey],
-      pathnameParts,
-      childPathnamePartsIndex
-    )
-  }
-}

packages/next/src/client/route-params.ts

@@ -159,3 +159,22 @@ export function urlToUrlWithoutFlightMarker(url: URL): URL {
   }
   return urlWithoutFlightParameters
 }
+
+export function getParamValueFromCacheKey(
+  paramCacheKey: string,
+  paramType: DynamicParamTypesShort
+) {
+  // Turn the cache key string sent by the server (as part of FlightRouterState)
+  // into a value that can be passed to `useParams` and client components.
+  const isCatchAll = paramType === 'c' || paramType === 'oc'
+  if (isCatchAll) {
+    // Catch-all param keys are a concatenation of the path segments.
+    // See equivalent logic in `getSelectedParams`.
+    // TODO: We should just pass the array directly, rather than concatenate
+    // it to a string and then split it back to an array. It needs to be an
+    // array in some places, like when passing a key React, but we can convert
+    // it at runtime in those places.
+    return paramCacheKey.split('/')
+  }
+  return paramCacheKey
+}

packages/next/src/server/app-render/app-render.tsx

@@ -505,14 +505,12 @@ async function generateDynamicRSCPayload(
       a: options.actionResult,
       f: flightData,
       b: ctx.sharedContext.buildId,
-      c: prepareInitialCanonicalUrl(url),
     }
   }
 
   // Otherwise, it's a regular RSC response.
   return {
     b: ctx.sharedContext.buildId,
-    c: prepareInitialCanonicalUrl(url),
     f: flightData,
     S: workStore.isStaticGeneration,
   }