backport: send initialCanonicalUrl in array format to prevent crawler confusion

packages/next/src/client/components/app-router.tsx

@@ -291,7 +291,7 @@ function Router({
   buildId,
   initialHead,
   initialTree,
-  initialCanonicalUrl,
+  urlParts,
   initialSeedData,
   couldBeIntercepted,
   assetPrefix,
@@ -302,7 +302,7 @@ function Router({
       createInitialRouterState({
         buildId,
         initialSeedData,
-        initialCanonicalUrl,
+        urlParts,
         initialTree,
         initialParallelRoutes,
         location: !isServer ? window.location : null,
@@ -312,7 +312,7 @@ function Router({
     [
       buildId,
       initialSeedData,
-      initialCanonicalUrl,
+      urlParts,
       initialTree,
       initialHead,
       couldBeIntercepted,

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

@@ -36,7 +36,7 @@ describe('createInitialRouterState', () => {
     const state = createInitialRouterState({
       buildId,
       initialTree,
-      initialCanonicalUrl,
+      urlParts: initialCanonicalUrl.split('/'),
       initialSeedData: ['', {}, children, null],
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,
@@ -47,7 +47,7 @@ describe('createInitialRouterState', () => {
     const state2 = createInitialRouterState({
       buildId,
       initialTree,
-      initialCanonicalUrl,
+      urlParts: initialCanonicalUrl.split('/'),
       initialSeedData: ['', {}, children, null],
       initialParallelRoutes,
       location: new URL('/linking', 'https://localhost') as any,

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

@@ -16,7 +16,7 @@ import { addRefreshMarkerToActiveParallelSegments } from './refetch-inactive-par
 export interface InitialRouterStateParameters {
   buildId: string
   initialTree: FlightRouterState
-  initialCanonicalUrl: string
+  urlParts: string[]
   initialSeedData: CacheNodeSeedData
   initialParallelRoutes: CacheNode['parallelRoutes']
   location: Location | null
@@ -28,12 +28,16 @@ export function createInitialRouterState({
   buildId,
   initialTree,
   initialSeedData,
-  initialCanonicalUrl,
+  urlParts,
   initialParallelRoutes,
   location,
   initialHead,
   couldBeIntercepted,
 }: InitialRouterStateParameters) {
+  // 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.
+  const initialCanonicalUrl = urlParts.join('/')
   const isServer = !location
   const rsc = initialSeedData[2]
 

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

@@ -400,6 +400,17 @@ type ReactServerAppProps = {
   ctx: AppRenderContext
   asNotFound: boolean
 }
+
+/**
+ * Crawlers will inadvertently think the canonicalUrl in the RSC payload should be crawled
+ * when our intention is to just seed the router state with the current URL.
+ * This function splits up the pathname so that we can later join it on
+ * when we're ready to consume the path.
+ */
+function prepareInitialCanonicalUrl(pathname: string) {
+  return pathname.split('/')
+}
+
 // This is the root component that runs in the RSC context
 async function ReactServerApp({ tree, ctx, asNotFound }: ReactServerAppProps) {
   // Create full component tree from root to leaf.
@@ -461,7 +472,7 @@ async function ReactServerApp({ tree, ctx, asNotFound }: ReactServerAppProps) {
     <AppRouter
       buildId={ctx.renderOpts.buildId}
       assetPrefix={ctx.assetPrefix}
-      initialCanonicalUrl={urlPathname}
+      urlParts={prepareInitialCanonicalUrl(urlPathname)}
       // This is the router state tree.
       initialTree={initialTree}
       // This is the tree of React nodes that are seeded into the cache
@@ -549,7 +560,7 @@ async function ReactServerError({
     <AppRouter
       buildId={ctx.renderOpts.buildId}
       assetPrefix={ctx.assetPrefix}
-      initialCanonicalUrl={urlPathname}
+      urlParts={prepareInitialCanonicalUrl(urlPathname)}
       initialTree={initialTree}
       initialHead={head}
       globalErrorComponent={GlobalError}