Do not invoke server actions twice when dynamicIO is enabled

In dev mode, when dynamic IO is enabled, we seed a prefetch cache scope for non-prefetch requests (via #70408). We must omit server action requests from this cache seeding though, because it would lead to the action handler being called twice. This is not intended in general for any action, and specificially fails in the second invocation while decoding the request form data with `Error: Unexpected end of JSON input` in `initializeModelChunk`, because the request body was already consumed in the first invocation.
vercel · Oct 4, 2024 · 570aaf4 · 570aaf4
1 parent d5fd4c1
commit 570aaf4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 1 deletion.
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
@@ -3038,7 +3038,8 @@ export default abstract class Server<
           if (
             !cache &&
             !isPrefetchRSCRequest &&
-            routeModule?.definition.kind === RouteKind.APP_PAGE
+            routeModule?.definition.kind === RouteKind.APP_PAGE &&
+            !isServerAction
           ) {
             req.headers[RSC_HEADER] = '1'
             req.headers[NEXT_ROUTER_PREFETCH_HEADER] = '1'

diff --git a/test/e2e/app-dir/dynamic-io-server-action/app/action.ts b/test/e2e/app-dir/dynamic-io-server-action/app/action.ts
@@ -0,0 +1,5 @@
+'use server'
+
+export async function action(value: string) {
+  return value
+}
diff --git a/test/e2e/app-dir/dynamic-io-server-action/app/layout.tsx b/test/e2e/app-dir/dynamic-io-server-action/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic-io-server-action/app/page.tsx b/test/e2e/app-dir/dynamic-io-server-action/app/page.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useActionState } from 'react'
+import { action } from './action'
+
+export default function Page() {
+  const [result, formAction] = useActionState(() => action('result'), 'initial')
+
+  return (
+    <form action={formAction}>
+      <h1>Server Action with Dynamic IO</h1>
+      <button>Submit</button>
+      <p>{result}</p>
+    </form>
+  )
+}
diff --git a/test/e2e/app-dir/dynamic-io-server-action/dynamic-io-server-action.test.ts b/test/e2e/app-dir/dynamic-io-server-action/dynamic-io-server-action.test.ts
@@ -0,0 +1,18 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+
+describe('dynamic-io-server-action', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should not fail decoding server action arguments', async () => {
+    const browser = await next.browser('/')
+    expect(await browser.elementByCss('p').text()).toBe('initial')
+    await browser.elementByCss('button').click()
+
+    await retry(async () => {
+      expect(await browser.elementByCss('p').text()).toBe('result')
+    })
+  })
+})
diff --git a/test/e2e/app-dir/dynamic-io-server-action/next.config.js b/test/e2e/app-dir/dynamic-io-server-action/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    dynamicIO: true,
+  },
+}
+
+module.exports = nextConfig