feat: add React Server Components support to @fastify/react

.changeset/rsc-support.md

@@ -0,0 +1,8 @@
+---
+"@fastify/react": minor
+"@fastify/vite": patch
+---
+
+Add React Server Components (RSC) support to `@fastify/react` via `@vitejs/plugin-rsc`. Routes opt in with `export const rsc = true`; the plugin registers a 3-environment build (client/rsc/ssr), companion `_.rsc` routes for client navigation, server actions, and streaming SSR with embedded flight data. TypeScript variants of all new virtual modules ship alongside the JS variants.
+
+Also refactors `@fastify/vite`'s development mode to read `viteConfig.environments` directly instead of re-invoking the plugin's `config` hook to discover environments, supporting any number of environments (not just the hardcoded client/ssr pair).

e2e/react-rsc/client/actions/data.js

@@ -0,0 +1,5 @@
+'use server'
+
+export async function getServerData() {
+  return { message: 'Hello from server action!', timestamp: new Date().toISOString() }
+}

e2e/react-rsc/client/actions/increment.js

@@ -0,0 +1,12 @@
+'use server'
+
+export async function increment(prevState, formData) {
+  // When called via useActionState: increment(prevState, formData)
+  // prevState is the previous { count } value, formData is the form fields.
+  // When called via progressive enhancement (no-JS form POST): increment(formData)
+  // formData contains the form fields, prevState is undefined.
+  const prev = prevState?.count ?? 0
+  const fd = formData ?? prevState
+  const current = parseInt(fd?.get?.('count') ?? prev, 10)
+  return { count: current + 1 }
+}

e2e/react-rsc/client/components/counter-form.jsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useActionState } from 'react'
+
+export default function CounterForm({ incrementAction }) {
+  const [result, formAction, isPending] = useActionState(incrementAction, { count: 0 })
+
+  return (
+    <form action={formAction}>
+      <p>
+        Server count: <output>{result.count}</output>
+      </p>
+      <button type="submit" disabled={isPending}>
+        {isPending ? 'Incrementing...' : 'Increment'}
+      </button>
+    </form>
+  )
+}

e2e/react-rsc/client/components/counter.jsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>Client count: {count}</p>
+      <button onClick={() => setCount((c) => c + 1)}>+</button>
+      <button onClick={() => setCount((c) => c - 1)}>-</button>
+    </div>
+  )
+}

e2e/react-rsc/client/components/server-data.jsx

@@ -0,0 +1,24 @@
+'use client'
+import { useState } from 'react'
+import { getServerData } from '../actions/data.js'
+
+export function ServerDataButton() {
+  const [data, setData] = useState(null)
+
+  const handleClick = async () => {
+    const result = await getServerData()
+    setData(result)
+  }
+
+  return (
+    <div>
+      <button onClick={handleClick}>Fetch Server Data</button>
+      {data && (
+        <output>
+          <p>{data.message}</p>
+          <p>Timestamp: {data.timestamp}</p>
+        </output>
+      )}
+    </div>
+  )
+}

e2e/react-rsc/client/components/state-display.jsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useRouteContext } from '@fastify/react/client'
+
+export default function StateDisplay() {
+  const { snapshot } = useRouteContext()
+  return (
+    <div className="valtio-state">
+      <p data-testid="valtio-count">Count: {snapshot.count}</p>
+      <p data-testid="valtio-message">Message: {snapshot.message}</p>
+    </div>
+  )
+}

e2e/react-rsc/client/context.js

@@ -0,0 +1,22 @@
+/**
+ * Server context module for the RSC e2e fixture.
+ *
+ * The `state()` function seeds the initial Valtio state object that flows
+ * through req.route.state → rsc-handler → rsc-entry's ValtioHydrator → client.
+ * It returns a plain object — the Valtio proxy() wrapping happens on the
+ * client side in the ValtioHydrator component (and in core.jsx for non-RSC routes).
+ */
+
+export function state() {
+  return {
+    count: 42,
+    message: 'Hello from Valtio!',
+  }
+}
+
+/**
+ * Default context initializer (required by the runtime).
+ */
+export default async function init() {
+  // No additional setup needed for this fixture
+}

e2e/react-rsc/client/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>RSC e2e</title>
+  </head>
+  <body>
+    <div id="root"><!-- element --></div>
+    <script type="module" src="$app/mount.js"></script>
+    <!-- hydration -->
+  </body>
+</html>

e2e/react-rsc/client/layouts/auth.jsx

@@ -0,0 +1,13 @@
+export default function AuthLayout({ children }) {
+  // In a real app, the Fastify preHandler would authenticate
+  // and the auth state would flow through the render context.
+  // This layout wraps authenticated routes.
+  return (
+    <div className="auth-layout">
+      <nav>
+        <p>Authenticated area</p>
+      </nav>
+      <main>{children}</main>
+    </div>
+  )
+}

e2e/react-rsc/client/layouts/default.jsx

@@ -0,0 +1,3 @@
+export default function DefaultLayout({ children }) {
+  return <main>{children}</main>
+}

e2e/react-rsc/client/pages/actions.jsx

@@ -0,0 +1,17 @@
+export const rsc = true
+
+import CounterForm from '../components/counter-form.jsx'
+
+export default async function ActionsPage() {
+  const { increment } = await import('../actions/increment.js')
+  return (
+    <article>
+      <h1>RSC Server Actions</h1>
+      <CounterForm incrementAction={increment} />
+    </article>
+  )
+}
+
+export function getMeta() {
+  return { title: 'RSC Server Actions' }
+}

e2e/react-rsc/client/pages/auth-page.jsx

@@ -0,0 +1,15 @@
+export const rsc = true
+export const layout = 'auth'
+
+export default async function AuthenticatedPage() {
+  return (
+    <section>
+      <h2>Authenticated Route</h2>
+      <p>This route uses the auth layout wrapper.</p>
+    </section>
+  )
+}
+
+export function getMeta() {
+  return { title: 'Authenticated' }
+}

e2e/react-rsc/client/pages/data-action.jsx

@@ -0,0 +1,17 @@
+export const rsc = true
+
+import { ServerDataButton } from '../components/server-data.jsx'
+
+export default async function DataActionsPage() {
+  return (
+    <section>
+      <h2>Data Server Action</h2>
+      <p>Click the button to fetch data from a server action:</p>
+      <ServerDataButton />
+    </section>
+  )
+}
+
+export function getMeta() {
+  return { title: 'Data Action' }
+}

e2e/react-rsc/client/pages/error.jsx

@@ -0,0 +1,5 @@
+export const rsc = true
+
+export default async function ErrorPage() {
+  throw new Error('RSC Server Error - intentional for testing')
+}

e2e/react-rsc/client/pages/index.jsx

@@ -0,0 +1,45 @@
+export function getMeta() {
+  return {
+    title: 'RSC e2e - Home',
+  }
+}
+
+export default function Index() {
+  return (
+    <div>
+      <h1>RSC e2e - Home</h1>
+      <p>This is a non-RSC page (mixed mode test)</p>
+      <nav>
+        <ul>
+          <li>
+            <a href="/rsc-page">RSC Page</a>
+          </li>
+          <li>
+            <a href="/rsc-client">RSC Client</a>
+          </li>
+          <li>
+            <a href="/actions">RSC Actions</a>
+          </li>
+          <li>
+            <a href="/error">RSC Error</a>
+          </li>
+          <li>
+            <a href="/auth-page">Auth Page</a>
+          </li>
+          <li>
+            <a href="/data-action">Data Action</a>
+          </li>
+          <li>
+            <a href="/using-data">Using Data</a>
+          </li>
+          <li>
+            <a href="/using-store">Using Store</a>
+          </li>
+          <li>
+            <a href="/streaming">Streaming</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}

e2e/react-rsc/client/pages/rsc-client.jsx

@@ -0,0 +1,19 @@
+import Counter from '../components/counter.jsx'
+
+export const rsc = true
+
+export default async function RscClientPage() {
+  return (
+    <article>
+      <h1>RSC Client Component Demo</h1>
+      <p>Below is a &apos;use client&apos; interactive component rendered inside an RSC page:</p>
+      <Counter />
+    </article>
+  )
+}
+
+export function getMeta() {
+  return {
+    title: 'RSC Client Demo',
+  }
+}

e2e/react-rsc/client/pages/rsc-page.jsx

@@ -0,0 +1,18 @@
+export const rsc = true
+
+export default async function RscPage() {
+  return (
+    <article>
+      <h1>RSC Page</h1>
+      <p>Server-rendered timestamp: {new Date().toISOString()}</p>
+      <p>This content is rendered on the server.</p>
+    </article>
+  )
+}
+
+export function getMeta() {
+  return {
+    title: 'RSC Page',
+    description: 'A server-rendered RSC page',
+  }
+}

e2e/react-rsc/client/pages/streaming.jsx

@@ -0,0 +1,24 @@
+import { Suspense } from 'react'
+
+export const rsc = true
+
+async function SlowComponent() {
+  await new Promise((resolve) => setTimeout(resolve, 500))
+  return <p>This loaded after 500ms (streamed)</p>
+}
+
+export default async function StreamingPage() {
+  return (
+    <section>
+      <h2>Streaming SSR</h2>
+      <p>This content renders immediately.</p>
+      <Suspense fallback={<p>Loading slow content...</p>}>
+        <SlowComponent />
+      </Suspense>
+    </section>
+  )
+}
+
+export function getMeta() {
+  return { title: 'Streaming' }
+}

e2e/react-rsc/client/pages/using-data.jsx

@@ -0,0 +1,22 @@
+export const rsc = true
+
+export default async function UsingData() {
+  // Simulate server-side data fetching
+  const data = await new Promise((resolve) =>
+    setTimeout(() => resolve({ items: ['Item A', 'Item B', 'Item C'] }), 10),
+  )
+  return (
+    <>
+      <h2>Data Fetching in RSC</h2>
+      <ul>
+        {data.items.map((item, i) => (
+          <li key={i}>{item}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+export function getMeta() {
+  return { title: 'Using Data' }
+}

e2e/react-rsc/client/pages/using-store.jsx

@@ -0,0 +1,20 @@
+import StateDisplay from '../components/state-display.jsx'
+
+export const rsc = true
+
+export default async function UsingStore() {
+  return (
+    <section>
+      <h2>Valtio State Management</h2>
+      <p>
+        State is seeded from server context.js, threaded through the RSC Flight protocol via
+        ValtioHydrator, and displayed client-side.
+      </p>
+      <StateDisplay />
+    </section>
+  )
+}
+
+export function getMeta() {
+  return { title: 'Using Store' }
+}