prevent duplicate RSC fetch when action redirects

vercel · Jun 7, 2024 · 4ee59fd · 4ee59fd
1 parent b2a651f
commit 4ee59fd
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 10 deletions.
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
@@ -125,6 +125,7 @@ export function refreshReducer(
           updatedTree: newTree,
           updatedCache: cache,
           includeNextUrl,
+          canonicalUrl: mutable.canonicalUrl || state.canonicalUrl,
         })
 
         mutable.cache = cache

diff --git a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
@@ -210,6 +210,11 @@ export function serverActionReducer(
       // Remove cache.data as it has been resolved at this point.
       mutable.inFlightServerAction = null
 
+      if (redirectLocation) {
+        const newHref = createHrefFromUrl(redirectLocation, false)
+        mutable.canonicalUrl = newHref
+      }
+
       for (const flightDataPath of flightData) {
         // FlightDataPath with more than two items means unexpected Flight data was returned
         if (flightDataPath.length !== 4) {
@@ -268,23 +273,17 @@ export function serverActionReducer(
             updatedTree: newTree,
             updatedCache: cache,
             includeNextUrl: Boolean(nextUrl),
+            canonicalUrl: mutable.canonicalUrl || state.canonicalUrl,
           })
 
           mutable.cache = cache
           mutable.prefetchCache = new Map()
         }
 
         mutable.patchedTree = newTree
-        mutable.canonicalUrl = href
-
         currentTree = newTree
       }
 
-      if (redirectLocation) {
-        const newHref = createHrefFromUrl(redirectLocation, false)
-        mutable.canonicalUrl = newHref
-      }
-
       resolve(actionResult)
 
       return handleMutable(state, mutable)

diff --git a/packages/next/src/client/components/router-reducer/refetch-inactive-parallel-segments.ts b/packages/next/src/client/components/router-reducer/refetch-inactive-parallel-segments.ts
@@ -10,6 +10,7 @@ interface RefreshInactiveParallelSegments {
   updatedTree: FlightRouterState
   updatedCache: CacheNode
   includeNextUrl: boolean
+  canonicalUrl: string
 }
 
 /**
@@ -41,6 +42,7 @@ async function refreshInactiveParallelSegmentsImpl({
   includeNextUrl,
   fetchedSegments,
   rootTree = updatedTree,
+  canonicalUrl,
 }: RefreshInactiveParallelSegments & {
   fetchedSegments: Set<string>
   rootTree: FlightRouterState
@@ -50,7 +52,7 @@ async function refreshInactiveParallelSegmentsImpl({
 
   if (
     refetchPath &&
-    refetchPath !== location.pathname + location.search &&
+    refetchPath !== canonicalUrl &&
     refetchMarker === 'refresh' &&
     // it's possible for the tree to contain multiple segments that contain data at the same URL
     // we keep track of them so we can dedupe the requests
@@ -94,6 +96,7 @@ async function refreshInactiveParallelSegmentsImpl({
       includeNextUrl,
       fetchedSegments,
       rootTree,
+      canonicalUrl,
     })
 
     fetchPromises.push(parallelFetchPromise)

diff --git a/test/e2e/app-dir/parallel-routes-revalidation/app/page.tsx b/test/e2e/app-dir/parallel-routes-revalidation/app/page.tsx
@@ -8,7 +8,7 @@ export default async function Home() {
   ).then((res) => res.text())
 
   return (
-    <div>
+    <div id="root-page">
       <Link href="/revalidate-modal">Open Revalidate Modal</Link>
       <Link href="/refresh-modal">Open Refresh Modal</Link>
       <Link href="/redirect-modal">Open Redirect Modal</Link>

diff --git a/test/e2e/app-dir/parallel-routes-revalidation/app/redirect/page.tsx b/test/e2e/app-dir/parallel-routes-revalidation/app/redirect/page.tsx
@@ -8,7 +8,9 @@ export default function Page() {
         redirect('/')
       }}
     >
-      <button type="submit">Redirect</button>
+      <button type="submit" id="redirect-page">
+        Redirect
+      </button>
     </form>
   )
 }
diff --git a/test/e2e/app-dir/parallel-routes-revalidation/parallel-routes-revalidation.test.ts b/test/e2e/app-dir/parallel-routes-revalidation/parallel-routes-revalidation.test.ts
@@ -413,5 +413,26 @@ describe('parallel-routes-revalidation', () => {
         )
       })
     })
+
+    it('should not trigger a refresh for the page that is being redirected to', async () => {
+      const rscRequests = []
+      const browser = await next.browser('/redirect', {
+        beforePageLoad(page) {
+          page.on('request', async (req) => {
+            const headers = await req.allHeaders()
+            if (headers['rsc']) {
+              const pathname = new URL(req.url()).pathname
+              rscRequests.push(pathname)
+            }
+          })
+        },
+      })
+
+      await browser.elementByCss('button').click()
+      await browser.waitForElementByCss('#root-page')
+      await browser.waitForIdleNetwork()
+
+      expect(rscRequests.length).toBe(0)
+    })
   })
 })