fix refresh behavior for discarded actions

Author: ztanner

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

@@ -437,10 +437,10 @@ function InnerLayoutRouter({
       // It's important that we mark this as resolved, in case this branch is replayed, we don't want to continously re-apply
       // the patch to the tree.
       childNode.lazyDataResolved = true
-    }
 
-    // Suspend infinitely as `changeByServerResponse` will cause a different part of the tree to be rendered.
-    use(unresolvedThenable) as never
+      // Suspend infinitely as `changeByServerResponse` will cause a different part of the tree to be rendered.
+      use(unresolvedThenable) as never
+    }
   }
 
   // If we get to this point, then we know we have something we can render.

packages/next/src/shared/lib/router/action-queue.ts

@@ -48,6 +48,18 @@ function runRemainingActions(
         action: actionQueue.pending,
         setState,
       })
+    } else {
+      // No more actions are pending, check if a refresh is needed
+      if (actionQueue.needsRefresh) {
+        actionQueue.needsRefresh = false
+        actionQueue.dispatch(
+          {
+            type: ACTION_REFRESH,
+            origin: window.location.origin,
+          },
+          setState
+        )
+      }
     }
   }
 }
@@ -75,17 +87,7 @@ async function runAction({
   function handleResult(nextState: AppRouterState) {
     // if we discarded this action, the state should also be discarded
     if (action.discarded) {
-      // if a refresh is needed, we only want to trigger it once the action queue is empty
-      if (actionQueue.needsRefresh && actionQueue.pending === null) {
-        actionQueue.needsRefresh = false
-        actionQueue.dispatch(
-          {
-            type: ACTION_REFRESH,
-            origin: window.location.origin,
-          },
-          setState
-        )
-      }
+      console.log('discarded an action')
       return
     }
 

test/e2e/app-dir/actions/app-action.test.ts

@@ -371,6 +371,31 @@ createNextDescribe(
       }, 'success')
     })
 
+    it('should trigger a refresh for a server action that also dispatches a navigation event', async () => {
+      let browser = await next.browser('/revalidate')
+      let initialJustPutit = await browser.elementById('justputit').text()
+
+      // this triggers a revalidate + redirect in a client component
+      await browser.elementById('redirect-revalidate-client').click()
+      await retry(async () => {
+        const newJustPutIt = await browser.elementById('justputit').text()
+        expect(newJustPutIt).not.toBe(initialJustPutit)
+
+        expect(await browser.url()).toBe(`${next.url}/revalidate?foo=bar`)
+      })
+
+      // this triggers a revalidate + redirect in a server component
+      browser = await next.browser('/revalidate')
+      initialJustPutit = await browser.elementById('justputit').text()
+      await browser.elementById('redirect-revalidate').click()
+      await retry(async () => {
+        const newJustPutIt = await browser.elementById('justputit').text()
+        expect(newJustPutIt).not.toBe(initialJustPutit)
+
+        expect(await browser.url()).toBe(`${next.url}/revalidate?foo=bar`)
+      })
+    })
+
     it('should support next/dynamic with ssr: false', async () => {
       const browser = await next.browser('/dynamic-csr')
 

test/e2e/app-dir/actions/app/revalidate/client.js

@@ -0,0 +1,18 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+export default function RedirectClientComponent({ action }) {
+  const router = useRouter()
+  return (
+    <button
+      id="redirect-revalidate-client"
+      onClick={async () => {
+        await action()
+        router.push('/revalidate?foo=bar')
+      }}
+    >
+      redirect + revalidate (client component)
+    </button>
+  )
+}

test/e2e/app-dir/actions/app/revalidate/page.js

@@ -7,6 +7,7 @@ import { redirect } from 'next/navigation'
 import Link from 'next/link'
 
 import { cookies } from 'next/headers'
+import RedirectClientComponent from './client'
 
 export default async function Page() {
   const data = await fetch(
@@ -133,6 +134,24 @@ export default async function Page() {
           redirect
         </button>
       </form>
+      <form>
+        <button
+          id="redirect-revalidate"
+          formAction={async () => {
+            'use server'
+            revalidateTag('justputit')
+            redirect('/revalidate?foo=bar')
+          }}
+        >
+          redirect + revalidate
+        </button>
+      </form>
+      <RedirectClientComponent
+        action={async () => {
+          'use server'
+          revalidateTag('justputit')
+        }}
+      />
     </>
   )
 }