From 77701537fa15713140d9fea7a12aa9154b7748f9 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 27 Aug 2026 12:31:50 +0900
Subject: [PATCH] feat(react): use SSR transform of React Compiler for server
 envs

---
 packages/plugin-react/src/index.ts                |  9 +++++----
 packages/plugin-react/tests/reactCompiler.test.ts | 13 ++++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/plugin-react/src/index.ts b/packages/plugin-react/src/index.ts
index b86d7c37b..f0d96447f 100644
--- a/packages/plugin-react/src/index.ts
+++ b/packages/plugin-react/src/index.ts
@@ -343,10 +343,9 @@ function createReactCompilerPlugin(
       async handler(code, id) {
         const isClient = this.environment?.config.consumer !== 'server'
         const shouldCompile =
-          isClient &&
-          (options.compilationMode === 'annotation'
+          options.compilationMode === 'annotation'
             ? /['"]use memo['"]/.test(code)
-            : defaultCodeFilter.test(code))
+            : defaultCodeFilter.test(code)
         // The config hook is not called when the plugin is used with Rolldown directly.
         const { transform } =
           compiler ?? (await loadCompiler((message) => this.error(message)))
@@ -358,7 +357,9 @@ function createReactCompilerPlugin(
             importSource: reactOptions.jsxImportSource,
             refresh: isClient && isFastRefreshEnabled(),
           },
-          reactCompiler: shouldCompile ? options : false,
+          reactCompiler: shouldCompile
+            ? { ...options, outputMode: isClient ? 'client' : 'ssr' }
+            : false,
           sourcemap,
         })
         const diagnostics = result.errors.map(
diff --git a/packages/plugin-react/tests/reactCompiler.test.ts b/packages/plugin-react/tests/reactCompiler.test.ts
index fd7abbd2b..a4bcd3fee 100644
--- a/packages/plugin-react/tests/reactCompiler.test.ts
+++ b/packages/plugin-react/tests/reactCompiler.test.ts
@@ -88,11 +88,13 @@ describe('compiler option', () => {
     })
   })
 
-  test('uses the native JSX transform for server environments', async () => {
+  test('uses the SSR transform for server environments', async () => {
     const output = await transformWithBuildConfig({}, false, 'server')
 
     expect(output.code).toContain('react/jsx-runtime')
     expect(output.code).not.toContain('react/compiler-runtime')
+    expect(output.code).toContain('const count = 0')
+    expect(output.code).not.toContain('useState(0)')
   })
 
   test('uses the Vite build sourcemap setting', async () => {
@@ -144,9 +146,14 @@ async function transformWithBuildConfig(
   }
   return plugin.transform.handler.call(
     context as any,
-    `export function App({ name }) { return <div>{name}</div> }`,
+    /* jsx */ `import { useState } from 'react';
+
+export function App({ name }) {
+  const [count] = useState(0);
+  return <div>{name}{count}</div>
+}`,
     '/entry.tsx',
-  )
+  ) as { code: string; map: any }
 }
 
 async function getViteReactConfig(