ix(next): prevent cached fallback shell from intercepting server actions on dynamic routes

lucasra1 · lucasra1 · commit 7fdad7469a15 · 2026-03-19T22:35:20.000+01:00
When cacheComponents is enabled, the build creates fallbackRouteParams for
  dynamic routes. This caused the fallback shell serving path in app-page.ts
  to trigger for server action POST requests, returning the prerendered HTML
  instead of executing the action. The condition at line 1076 now checks
  !isPossibleServerAction to skip the fallback shell for action requests.
diff --git a/packages/next/src/build/templates/app-page.ts b/packages/next/src/build/templates/app-page.ts
@@ -1073,6 +1073,7 @@ export async function handler(
         // contains param references, and therefore we can't use the fallback.
         if (
           isRoutePPREnabled &&
+          !isPossibleServerAction &&
           (nextConfig.cacheComponents ? !isDynamicRSCRequest : !isRSCRequest)
         ) {
           const cacheKey =
diff --git a/test/e2e/app-dir/cache-components/app/server-action-dynamic/[[...slug]]/action.ts b/test/e2e/app-dir/cache-components/app/server-action-dynamic/[[...slug]]/action.ts
@@ -0,0 +1,5 @@
+'use server'
+
+export async function dynamicAction(value: string) {
+  return value
+}
diff --git a/test/e2e/app-dir/cache-components/app/server-action-dynamic/[[...slug]]/page.tsx b/test/e2e/app-dir/cache-components/app/server-action-dynamic/[[...slug]]/page.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { useState, useTransition } from 'react'
+import { dynamicAction } from './action'
+
+export default function Page() {
+  const [result, setResult] = useState('initial')
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <div>
+      <h1>Server Action on Optional Catch-All Route</h1>
+      <button
+        id="action-button"
+        onClick={() => {
+          startTransition(async () => {
+            const res = await dynamicAction('action-result')
+            setResult(res)
+          })
+        }}
+      >
+        {isPending ? 'Pending...' : 'Call Action'}
+      </button>
+      <p id="action-result">{result}</p>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts b/test/e2e/app-dir/cache-components/cache-components.server-action.test.ts
@@ -44,4 +44,37 @@ describe('cache-components', () => {
       expect($('#page').text()).toBe('at buildtime')
     }
   })
+
+  it('should not serve cached HTML for server action POST on optional catch-all routes', async () => {
+    // Regression: with cacheComponents enabled, POST requests for server
+    // actions on dynamic routes (e.g. [[...slug]]) were incorrectly served
+    // the cached fallback shell HTML instead of executing the action.
+    // This verifies the response to a server action POST is NOT text/html.
+    const res = await next.fetch('/server-action-dynamic', {
+      method: 'POST',
+      headers: {
+        'next-action': 'test-action-id',
+        'content-type': 'text/plain;charset=UTF-8',
+      },
+      body: '',
+    })
+
+    const contentType = res.headers.get('content-type') || ''
+    expect(contentType).not.toContain('text/html')
+  })
+
+  it('should not serve cached HTML for server action POST on optional catch-all routes with params', async () => {
+    // Same regression but when the catch-all has actual path segments.
+    const res = await next.fetch('/server-action-dynamic/foo/bar', {
+      method: 'POST',
+      headers: {
+        'next-action': 'test-action-id',
+        'content-type': 'text/plain;charset=UTF-8',
+      },
+      body: '',
+    })
+
+    const contentType = res.headers.get('content-type') || ''
+    expect(contentType).not.toContain('text/html')
+  })
 })
