Strip _rsc query for navigation between app and page (#51195)

Fix a missing case from #50970 When navigating from app to page, the `_rsc` query should still be stripped
vercel · Jun 12, 2023 · 8a11835 · 8a11835
1 parent a6a9d65
commit 8a11835
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
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
@@ -85,9 +85,9 @@ export async function fetchServerResponse(
       credentials: 'same-origin',
       headers,
     })
-    const canonicalUrl = res.redirected
-      ? urlToUrlWithoutFlightMarker(res.url)
-      : undefined
+
+    const responseUrl = urlToUrlWithoutFlightMarker(res.url)
+    const canonicalUrl = res.redirected ? responseUrl : undefined
 
     const contentType = res.headers.get('content-type') || ''
     let isFlightResponse = contentType === RSC_CONTENT_TYPE_HEADER
@@ -103,7 +103,7 @@ export async function fetchServerResponse(
     // If fetch returns something different than flight response handle it like a mpa navigation
     // If the fetch was not 200, we also handle it like a mpa navigation
     if (!isFlightResponse || !res.ok) {
-      return [res.url, undefined]
+      return [responseUrl.toString(), undefined]
     }
 
     // Handle the `fetch` readable stream that can be unwrapped by `React.use`.

diff --git a/packages/next/src/shared/lib/router/utils/prepare-destination.ts b/packages/next/src/shared/lib/router/utils/prepare-destination.ts
@@ -12,6 +12,7 @@ import {
   INTERCEPTION_ROUTE_MARKERS,
   isInterceptionRouteAppPath,
 } from '../../../../server/future/helpers/interception-routes'
+import { NEXT_RSC_UNION_QUERY } from '../../../../client/components/app-router-headers'
 
 /**
  * Ensure only a-zA-Z are used for param names for proper interpolating
@@ -163,6 +164,7 @@ export function prepareDestination(args: {
   delete query.__nextDefaultLocale
   delete query.__nextDataReq
   delete query.__nextInferredLocaleFromDefault
+  delete query[NEXT_RSC_UNION_QUERY]
 
   let escapedDestination = args.destination
 

diff --git a/test/e2e/app-dir/navigation/app/assertion/page/page.js b/test/e2e/app-dir/navigation/app/assertion/page/page.js
@@ -1,9 +1,18 @@
 import { strict as assert } from 'node:assert'
+import Link from 'next/link'
 // @ts-ignore
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
 
 export default function Page({ searchParams }) {
   assert(searchParams[NEXT_RSC_UNION_QUERY] === undefined)
 
-  return <p>no rsc query page</p>
+  return (
+    <>
+      <p>no rsc query page</p>
+      return{' '}
+      <Link id="link-to-pages" href="/some">
+        To /some
+      </Link>
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/navigation/navigation.test.ts b/test/e2e/app-dir/navigation/navigation.test.ts
@@ -419,6 +419,38 @@ createNextDescribe(
       })
     })
 
+    describe('navigation between pages and app', () => {
+      it('should not contain _rsc query while navigating from app to pages', async () => {
+        // Initiate with app
+        const browser = await next.browser('/assertion/page')
+        await browser
+          .elementByCss('#link-to-pages')
+          .click()
+          .waitForElementByCss('#link-to-app')
+        expect(await browser.url()).toBe(next.url + '/some')
+        await browser
+          .elementByCss('#link-to-app')
+          .click()
+          .waitForElementByCss('#link-to-pages')
+        expect(await browser.url()).toBe(next.url + '/assertion/page')
+      })
+
+      it('should not contain _rsc query while navigating from pages to app', async () => {
+        // Initiate with pages
+        const browser = await next.browser('/some')
+        await browser
+          .elementByCss('#link-to-app')
+          .click()
+          .waitForElementByCss('#link-to-pages')
+        expect(await browser.url()).toBe(next.url + '/assertion/page')
+        await browser
+          .elementByCss('#link-to-pages')
+          .click()
+          .waitForElementByCss('#link-to-app')
+        expect(await browser.url()).toBe(next.url + '/some')
+      })
+    })
+
     describe('nested navigation', () => {
       it('should navigate to nested pages', async () => {
         const browser = await next.browser('/nested-navigation')

diff --git a/test/e2e/app-dir/navigation/pages/some.js b/test/e2e/app-dir/navigation/pages/some.js
@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function page() {
+  return (
+    <Link id="link-to-app" href="/assertion/page">
+      To /assertion/page
+    </Link>
+  )
+}