diff --git a/packages/react-server/examples/basic/e2e/basic.test.ts b/packages/react-server/examples/basic/e2e/basic.test.ts
index 62b90aec3..ac80d67e8 100644
--- a/packages/react-server/examples/basic/e2e/basic.test.ts
+++ b/packages/react-server/examples/basic/e2e/basic.test.ts
@@ -654,29 +654,68 @@ test("redirect server action @js", async ({ page }) => {
   await page.waitForURL("/test/redirect?ok=server-action");
 });
 
-test("action return value @js", async ({ page }) => {
+test("useActionState @js", async ({ page }) => {
   checkNoError(page);
   await page.goto("/test/action");
   await waitForHydration(page);
-  await testActionReturnValue(page, { js: true });
+  await testUseActionState(page, { js: true });
 });
 
-test("action return value @nojs", async ({ browser }) => {
+test("useActionState @nojs", async ({ browser }) => {
   const page = await browser.newPage({ javaScriptEnabled: false });
   checkNoError(page);
   await page.goto("/test/action");
-  await testActionReturnValue(page, { js: false });
+  await testUseActionState(page, { js: false });
 });
 
-async function testActionReturnValue(page: Page, { js }: { js: boolean }) {
+async function testUseActionState(page: Page, options: { js: boolean }) {
   await page.getByPlaceholder("Answer?").fill("3");
   await page.getByPlaceholder("Answer?").press("Enter");
-  await page.getByText("Wrong!").click();
-  await expect(page.getByPlaceholder("Answer?")).toHaveValue(js ? "3" : "");
+  if (options.js) {
+    await expect(page.getByTestId("action-state")).toHaveText("...");
+  }
+  await page.getByText("Wrong! (tried once)").click();
+  await expect(page.getByPlaceholder("Answer?")).toHaveValue(
+    options.js ? "3" : "",
+  );
 
   await page.getByPlaceholder("Answer?").fill("2");
   await page.getByPlaceholder("Answer?").press("Enter");
-  await page.getByText("Correct!").click();
+  await page.getByText("Correct! (tried 2 times)").click();
+}
+
+test("non-form aciton", async ({ page }) => {
+  checkNoError(page);
+  await page.goto("/test/action");
+  await waitForHydration(page);
+  await page.getByPlaceholder("Number...").fill("1");
+  await page.getByPlaceholder("Number...").press("Enter");
+  await expect(page.getByTestId("non-form-action-state")).toHaveText("...");
+  await expect(page.getByTestId("non-form-action-state")).toHaveText("1");
+  await page.getByPlaceholder("Number...").fill("-1");
+  await page.getByPlaceholder("Number...").press("Enter");
+  await expect(page.getByTestId("non-form-action-state")).toHaveText("0");
+});
+
+test("action bind @js", async ({ page }) => {
+  checkNoError(page);
+  await page.goto("/test/action");
+  await waitForHydration(page);
+  await testActionBind(page);
+});
+
+test("action bind @nojs", async ({ browser }) => {
+  const page = await browser.newPage({ javaScriptEnabled: false });
+  checkNoError(page);
+  await page.goto("/test/action");
+  await testActionBind(page);
+});
+
+async function testActionBind(page: Page) {
+  await page.getByRole("button", { name: "Action Bind Test (server)" }).click();
+  await expect(page.getByTestId("action-bind")).toContainText("server-bind");
+  await page.getByRole("button", { name: "Action Bind Test (client)" }).click();
+  await expect(page.getByTestId("action-bind")).toContainText("client-bind");
 }
 
 test("action context @js", async ({ page }) => {
diff --git a/packages/react-server/examples/basic/playwright.config.ts b/packages/react-server/examples/basic/playwright.config.ts
index 7ac0a47e3..f99382546 100644
--- a/packages/react-server/examples/basic/playwright.config.ts
+++ b/packages/react-server/examples/basic/playwright.config.ts
@@ -4,7 +4,7 @@ const port = Number(process.env.E2E_PORT || 6174);
 const isPreview = Boolean(process.env.E2E_PREVIEW);
 const command = isPreview
   ? `pnpm preview --port ${port} --strict-port`
-  : `pnpm dev --port ${port} --strict-port`;
+  : `CI=1 pnpm dev --port ${port} --strict-port`;
 
 export default defineConfig({
   testDir: "e2e",
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_action.tsx b/packages/react-server/examples/basic/src/routes/test/action/_action.tsx
index 4c59fbca9..10f6da62f 100644
--- a/packages/react-server/examples/basic/src/routes/test/action/_action.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/action/_action.tsx
@@ -30,8 +30,35 @@ export async function slowAction(formData: FormData) {
   await sleep(Number(formData.get("sleep")));
 }
 
-export async function actionCheckAnswer(formData: FormData) {
+type CheckAnswerState = {
+  message: string;
+  count: number;
+};
+
+export async function actionCheckAnswer(
+  prev: CheckAnswerState | null,
+  formData: FormData,
+) {
+  await sleep(500);
   const answer = Number(formData.get("answer"));
   const message = answer === 2 ? "Correct!" : "Wrong!";
-  return { message };
+  return { message, count: (prev?.count ?? 0) + 1 };
+}
+
+let actionBindResult = "(none)";
+
+export function getActionBindResult() {
+  return actionBindResult;
+}
+
+export async function actionBindTest(bound: string) {
+  actionBindResult = bound;
+}
+
+let nonFormActionCounter = 0;
+
+export async function nonFormAction(_prev: unknown, delta: number) {
+  await sleep(500);
+  nonFormActionCounter += delta;
+  return nonFormActionCounter;
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/action/_client.tsx b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
index e7df3d33f..a993712f8 100644
--- a/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/action/_client.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import { useActionData } from "@hiogawa/react-server/client";
+import { useActionState } from "@hiogawa/react-server/client";
 import React from "react";
 import ReactDom from "react-dom";
 import {
+  actionBindTest,
   actionCheckAnswer,
   addMessage,
   changeCounter,
   type getMessages,
+  nonFormAction,
   slowAction,
 } from "./_action";
 
@@ -100,23 +102,75 @@ export function Chat(props: { messages: ReturnType<typeof getMessages> }) {
 }
 
 export function ActionDataTest() {
-  const data = useActionData(actionCheckAnswer);
+  const [data, formAction, isPending] = useActionState(actionCheckAnswer, null);
+
   return (
-    <form action={actionCheckAnswer} className="flex flex-col gap-2">
-      <h4 className="font-bold">Action Data</h4>
+    <form action={formAction} className="flex flex-col gap-2">
+      <h4 className="font-bold">useActionState</h4>
       <div className="flex gap-2">
         <div>1 + 1 = </div>
         <input
           className="antd-input px-2 max-w-30"
           name="answer"
           placeholder="Answer?"
+          required
         />
-        <div>{data?.message}</div>
+        <div data-testid="action-state">
+          {isPending ? (
+            "..."
+          ) : data ? (
+            <>
+              {data.message} (tried{" "}
+              {data.count === 1 ? "once" : data.count + " times"})
+            </>
+          ) : null}
+        </div>
       </div>
     </form>
   );
 }
 
+export function NonFormActionTest() {
+  const [data, formAction, isPending] = useActionState(nonFormAction, null);
+  return (
+    <form
+      className="flex flex-col gap-2"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const delta = Number(formData.get("delta"));
+        formAction(delta);
+      }}
+    >
+      <h4 className="font-bold">Non-form-action action</h4>
+      <div className="flex gap-2">
+        <input
+          className="antd-input px-2 max-w-30"
+          name="delta"
+          placeholder="Number..."
+          required
+        />
+        <button className="antd-btn antd-btn-default px-2">Add</button>
+        <div data-testid="non-form-action-state">
+          {isPending ? "..." : data}
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export function ClientActionBindTest() {
+  const formAction = actionBindTest.bind(null, "client-bind");
+  return (
+    <form action={formAction} className="flex flex-col items-start gap-2">
+      <input type="hidden" name="hello" value="world" />
+      <button className="antd-input p-1 text-sm">
+        Action Bind Test (client)
+      </button>
+    </form>
+  );
+}
+
 // https://react.dev/reference/react-dom/hooks/useFormStatus
 export function FormStateTest() {
   return (
@@ -132,7 +186,7 @@ function FormStateTestInner() {
 
   return (
     <>
-      <h4 className="font-bold">Form Status</h4>
+      <h4 className="font-bold">useFormStatus</h4>
       <div className="flex gap-2">
         <button
           className="antd-btn antd-btn-default px-2"
diff --git a/packages/react-server/examples/basic/src/routes/test/action/page.tsx b/packages/react-server/examples/basic/src/routes/test/action/page.tsx
index 5736be91c..d43d762de 100644
--- a/packages/react-server/examples/basic/src/routes/test/action/page.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/action/page.tsx
@@ -1,10 +1,18 @@
-import { changeCounter, getCounter, getMessages } from "./_action";
+import {
+  actionBindTest,
+  changeCounter,
+  getActionBindResult,
+  getCounter,
+  getMessages,
+} from "./_action";
 import {
   ActionDataTest,
   Chat,
+  ClientActionBindTest,
   Counter,
   Counter2,
   FormStateTest,
+  NonFormActionTest,
 } from "./_client";
 
 export default async function Page() {
@@ -17,6 +25,13 @@ export default async function Page() {
       </div>
       <Chat messages={getMessages()} />
       <ActionDataTest />
+      <NonFormActionTest />
+      <div className="flex flex-col gap-2">
+        <h4 className="font-bold">Action Bind</h4>
+        <ServerActionBindTest />
+        <ClientActionBindTest />
+        <div data-testid="action-bind">{getActionBindResult()}</div>
+      </div>
       <FormStateTest />
     </div>
   );
@@ -45,3 +60,15 @@ function Counter3() {
     </form>
   );
 }
+
+function ServerActionBindTest() {
+  const formAction = actionBindTest.bind(null, "server-bind");
+  return (
+    <form action={formAction} className="flex flex-col items-start gap-2">
+      <input type="hidden" name="hello" value="world" />
+      <button className="antd-input p-1 text-sm">
+        Action Bind Test (server)
+      </button>
+    </form>
+  );
+}
diff --git a/packages/react-server/examples/basic/src/routes/test/revalidate/_action.tsx b/packages/react-server/examples/basic/src/routes/test/revalidate/_action.tsx
index cfaab54b9..47d9a1288 100644
--- a/packages/react-server/examples/basic/src/routes/test/revalidate/_action.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/revalidate/_action.tsx
@@ -1,7 +1,7 @@
 "use server";
 
-import type { ActionContext } from "@hiogawa/react-server/server";
+import { useActionContext } from "@hiogawa/react-server/server";
 
-export async function actionTestRevalidate(this: ActionContext) {
-  this.revalidate = true;
+export async function actionTestRevalidate() {
+  useActionContext().revalidate = true;
 }
diff --git a/packages/react-server/examples/basic/src/routes/test/session/_action.tsx b/packages/react-server/examples/basic/src/routes/test/session/_action.tsx
index be796efec..7a31ffaa0 100644
--- a/packages/react-server/examples/basic/src/routes/test/session/_action.tsx
+++ b/packages/react-server/examples/basic/src/routes/test/session/_action.tsx
@@ -1,6 +1,6 @@
 "use server";
 
-import { type ActionContext, redirect } from "@hiogawa/react-server/server";
+import { redirect, useActionContext } from "@hiogawa/react-server/server";
 import { tinyassert } from "@hiogawa/utils";
 import { getSession, setSession } from "./utils";
 
@@ -30,11 +30,8 @@ export function getCounter() {
   return counter;
 }
 
-export async function incrementCounter(
-  this: ActionContext,
-  formData: FormData,
-) {
-  const session = getSession(this.request.headers);
+export async function incrementCounter(formData: FormData) {
+  const session = getSession(useActionContext().request.headers);
   if (!session?.name) {
     throw redirect("/test/session/signin");
   }
diff --git a/packages/react-server/examples/basic/tsconfig.json b/packages/react-server/examples/basic/tsconfig.json
index 7d581715e..e58bfa260 100644
--- a/packages/react-server/examples/basic/tsconfig.json
+++ b/packages/react-server/examples/basic/tsconfig.json
@@ -16,7 +16,7 @@
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ESNext",
-    "lib": ["ESNext", "DOM"],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "types": ["vite/client", "react/experimental", "react-dom/experimental"],
     "jsx": "react-jsx"
   }
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index d18b8880e..0f6b68c17 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/react-server",
-  "version": "0.1.17",
+  "version": "0.1.18-pre.0",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/hi-ogawa/vite-plugins/tree/main/packages/react-server",
diff --git a/packages/react-server/src/client.tsx b/packages/react-server/src/client.tsx
index b39ef57b3..606147fe6 100644
--- a/packages/react-server/src/client.tsx
+++ b/packages/react-server/src/client.tsx
@@ -2,5 +2,5 @@
 
 export { Link, LinkForm } from "./lib/client/link";
 export { useRouter } from "./lib/client/router";
-export { useActionData } from "./features/server-action/client";
 export { routerRevalidate } from "./features/router/client";
+export { useActionState } from "./features/server-action/client";
diff --git a/packages/react-server/src/entry/browser.tsx b/packages/react-server/src/entry/browser.tsx
index cf7034832..d2e950969 100644
--- a/packages/react-server/src/entry/browser.tsx
+++ b/packages/react-server/src/entry/browser.tsx
@@ -1,4 +1,4 @@
-import { createDebug, memoize, tinyassert } from "@hiogawa/utils";
+import { createDebug, memoize } from "@hiogawa/utils";
 import React from "react";
 import reactDomClient from "react-dom/client";
 import {
@@ -8,7 +8,7 @@ import {
   routerRevalidate,
 } from "../features/router/client";
 import type { ServerRouterData } from "../features/router/utils";
-import { injectActionId } from "../features/server-action/utils";
+import { wrapStreamActionRequest } from "../features/server-action/utils";
 import { wrapStreamRequestUrl } from "../features/server-component/utils";
 import { initializeWebpackBrowser } from "../features/use-client/browser";
 import { RootErrorBoundary } from "../lib/client/error-boundary";
@@ -42,43 +42,35 @@ export async function start() {
   //
   const callServer: CallServerCallback = async (id, args) => {
     debug("callServer", { id, args });
-    if (0) {
-      // TODO: proper encoding?
-      await reactServerDomClient.encodeReply(args);
-    } else {
-      // $ACTION_ID is injected during SSR
-      // but it can stripped away on client re-render (e.g. HMR?)
-      // so we do it here again to inject on client.
-      tinyassert(args[0] instanceof FormData);
-      injectActionId(args[0], id);
-    }
     const request = new Request(
       wrapStreamRequestUrl(history.location.href, {
         lastPathname: history.location.pathname,
       }),
       {
         method: "POST",
-        body: args[0],
+        body: await reactServerDomClient.encodeReply(args),
+        headers: wrapStreamActionRequest(id),
       },
     );
-    __startActionTransition(() => {
-      __setLayout(
-        reactServerDomClient.createFromFetch<ServerRouterData>(fetch(request), {
-          callServer,
-        }),
-      );
-    });
+    const result = reactServerDomClient.createFromFetch<ServerRouterData>(
+      fetch(request),
+      { callServer },
+    );
+    __startActionTransition(() => __setLayout(result));
+    return (await result).action?.data;
   };
 
   // expose as global to be used for createServerReference
   __global.callServer = callServer;
 
   // prepare initial layout data from inline <script>
-  const initialLayoutPromise =
-    reactServerDomClient.createFromReadableStream<ServerRouterData>(
+  // TODO: needs to await for hydration formState. does it affect startup perf?
+  const initialLayout =
+    await reactServerDomClient.createFromReadableStream<ServerRouterData>(
       readStreamScript<string>().pipeThrough(new TextEncoderStream()),
       { callServer },
     );
+  const initialLayoutPromise = Promise.resolve(initialLayout);
 
   //
   // browser root
@@ -100,7 +92,7 @@ export async function start() {
               ...current.layout,
               ...next.layout,
             },
-          };
+          } satisfies ServerRouterData;
         }),
       );
     };
@@ -181,7 +173,10 @@ export async function start() {
   if (document.documentElement.dataset["noHydrate"]) {
     reactDomClient.createRoot(document).render(reactRootEl);
   } else {
-    reactDomClient.hydrateRoot(document, reactRootEl);
+    reactDomClient.hydrateRoot(document, reactRootEl, {
+      // @ts-expect-error no type yet
+      formState: initialLayout.action?.data,
+    });
   }
 
   // custom event for RSC reload
diff --git a/packages/react-server/src/entry/react-server.tsx b/packages/react-server/src/entry/react-server.tsx
index 05c1c55c2..fa694efd5 100644
--- a/packages/react-server/src/entry/react-server.tsx
+++ b/packages/react-server/src/entry/react-server.tsx
@@ -10,11 +10,16 @@ import {
   type LayoutRequest,
   type ServerRouterData,
 } from "../features/router/utils";
+import { runActionContext } from "../features/server-action/context";
 import {
   ActionContext,
   type ActionResult,
+  createActionBundlerConfig,
+  importServerAction,
+  initializeWebpackReactServer,
+  serverReferenceImportPromiseCache,
 } from "../features/server-action/react-server";
-import { ejectActionId } from "../features/server-action/utils";
+import { unwrapStreamActionRequest } from "../features/server-action/utils";
 import { unwrapStreamRequest } from "../features/server-component/utils";
 import { createBundlerConfig } from "../features/use-client/react-server";
 import {
@@ -46,6 +51,12 @@ export type ReactServerHandlerResult =
   | ReactServerHandlerStreamResult;
 
 export const handler: ReactServerHandler = async (ctx) => {
+  initializeWebpackReactServer();
+
+  if (import.meta.env.DEV) {
+    serverReferenceImportPromiseCache.clear();
+  }
+
   // action
   let actionResult: ActionResult | undefined;
   if (ctx.request.method === "POST") {
@@ -94,7 +105,7 @@ async function render({
     {
       layout: nodeMap,
       action: actionResult
-        ? objectPick(actionResult, ["id", "data", "error"])
+        ? objectPick(actionResult, ["data", "error"])
         : undefined,
     },
     bundlerConfig,
@@ -147,30 +158,38 @@ function createRouter() {
 // server action
 //
 
+// https://github.com/facebook/react/blob/da69b6af9697b8042834644b14d0e715d4ace18a/fixtures/flight/server/region.js#L105
 async function actionHandler({ request }: { request: Request }) {
-  const formData = await request.formData();
-  if (0) {
-    // TODO: proper decoding?
-    await reactServerDomServer.decodeReply(formData);
-  }
-  const id = ejectActionId(formData);
-
-  let action: Function;
-  const [file, name] = id.split("#") as [string, string];
-  if (import.meta.env.DEV) {
-    const mod: any = await import(/* @vite-ignore */ file);
-    action = mod[name];
+  const context = new ActionContext(request);
+  const streamAction = unwrapStreamActionRequest(request);
+  let boundAction: Function;
+  if (streamAction) {
+    const contentType = request.headers.get("content-type");
+    const body = contentType?.startsWith("multipart/form-data")
+      ? await request.formData()
+      : await request.text();
+    const args = await reactServerDomServer.decodeReply(body);
+    const action = await importServerAction(streamAction.id);
+    boundAction = () => action.apply(null, args);
   } else {
-    // include all "use server" files via virtual module on build
-    const virtual = await import("virtual:rsc-use-server" as string);
-    const mod = await virtual.default[file]();
-    action = mod[name];
+    const formData = await request.formData();
+    const decodedAction = await reactServerDomServer.decodeAction(
+      formData,
+      createActionBundlerConfig(),
+    );
+    boundAction = async () => {
+      const result = await decodedAction();
+      const formState = await reactServerDomServer.decodeFormState(
+        result,
+        formData,
+      );
+      return formState;
+    };
   }
 
-  const context = new ActionContext(request);
-  const result: ActionResult = { id, context };
+  const result: ActionResult = { context };
   try {
-    result.data = await action.apply(context, [formData]);
+    result.data = await runActionContext(context, () => boundAction());
   } catch (e) {
     result.error = getErrorContext(e) ?? DEFAULT_ERROR_CONTEXT;
   } finally {
diff --git a/packages/react-server/src/entry/server.tsx b/packages/react-server/src/entry/server.tsx
index d5a6fd7d5..c26cac264 100644
--- a/packages/react-server/src/entry/server.tsx
+++ b/packages/react-server/src/entry/server.tsx
@@ -125,6 +125,8 @@ export async function renderHtml(
   let status = 200;
   try {
     ssrStream = await reactDomServer.renderToReadableStream(reactRootEl, {
+      // @ts-expect-error no type yet
+      formState: result.actionResult?.data,
       bootstrapModules: url.search.includes("__nojs")
         ? []
         : assets.bootstrapModules,
diff --git a/packages/react-server/src/features/router/utils.tsx b/packages/react-server/src/features/router/utils.tsx
index 46841a3e8..577eca055 100644
--- a/packages/react-server/src/features/router/utils.tsx
+++ b/packages/react-server/src/features/router/utils.tsx
@@ -9,7 +9,7 @@ export type LayoutRequest = Record<
 >;
 
 export type ServerRouterData = {
-  action?: Pick<ActionResult, "id" | "error" | "data">;
+  action?: Pick<ActionResult, "error" | "data">;
   layout: Record<string, React.ReactNode>;
 };
 
diff --git a/packages/react-server/src/features/server-action/browser.tsx b/packages/react-server/src/features/server-action/browser.tsx
index 83794f5a9..12b72182a 100644
--- a/packages/react-server/src/features/server-action/browser.tsx
+++ b/packages/react-server/src/features/server-action/browser.tsx
@@ -4,9 +4,7 @@ import { __global } from "../../lib/global";
 // https://github.com/facebook/react/blob/c8a035036d0f257c514b3628e927dd9dd26e5a09/packages/react-client/src/ReactFlightReplyClient.js#L758
 
 export function createServerReference(id: string) {
-  const reference = reactServerDomClient.createServerReference(id, (...args) =>
+  return reactServerDomClient.createServerReference(id, (...args) =>
     __global.callServer(...args),
   );
-  Object.assign(reference, { $$id: id });
-  return reference;
 }
diff --git a/packages/react-server/src/features/server-action/client.tsx b/packages/react-server/src/features/server-action/client.tsx
index 66589ba68..35000e811 100644
--- a/packages/react-server/src/features/server-action/client.tsx
+++ b/packages/react-server/src/features/server-action/client.tsx
@@ -1,25 +1,9 @@
-import { tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { __global } from "../../lib/global";
 import { RedirectBoundary } from "../../runtime-client";
 import { createError } from "../../server";
 import { LayoutStateContext } from "../router/client";
 
-export function useActionData<T extends (...args: any[]) => any>(
-  action: T,
-): Awaited<ReturnType<T>> | undefined {
-  const actionId = (action as any).$$id;
-  tinyassert(actionId);
-  const ctx = React.useContext(LayoutStateContext);
-  const data = React.use(ctx.data);
-  if (data.action) {
-    if (data.action.id === actionId) {
-      return data.action.data as any;
-    }
-  }
-  return;
-}
-
 export function ActionRedirectHandler() {
   return (
     <RedirectBoundary>
@@ -37,3 +21,19 @@ function ThrowActionError() {
   }
   return null;
 }
+
+// re-export React.useActionState since the type is not officially available yet
+export const useActionState: ReactUseActionState = (...args) =>
+  (React as any).useActionState(...args);
+
+// type is copied from ReactDOM.useFormState
+// https://github.com/facebook/react/pull/28491
+type ReactUseActionState = <State, Payload>(
+  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
+  initialState: Awaited<State>,
+  permalink?: string,
+) => [
+  state: Awaited<State>,
+  dispatch: (payload: Payload) => void,
+  isPending: boolean,
+];
diff --git a/packages/react-server/src/features/server-action/context.tsx b/packages/react-server/src/features/server-action/context.tsx
new file mode 100644
index 000000000..939a39166
--- /dev/null
+++ b/packages/react-server/src/features/server-action/context.tsx
@@ -0,0 +1,22 @@
+import { tinyassert } from "@hiogawa/utils";
+import type { ActionContext } from "./react-server";
+
+// builtin context system only for synchronus access.
+// for now, avoid relying on async hooks since it's not supported on stackblitz yet.
+
+let currentActionContext: ActionContext | undefined;
+
+export function runActionContext<T>(context: ActionContext, f: () => T): T {
+  tinyassert(!currentActionContext);
+  currentActionContext = context;
+  try {
+    return f();
+  } finally {
+    currentActionContext = undefined;
+  }
+}
+
+export function useActionContext() {
+  tinyassert(currentActionContext);
+  return currentActionContext;
+}
diff --git a/packages/react-server/src/features/server-action/react-server.tsx b/packages/react-server/src/features/server-action/react-server.tsx
index 680c0aaa2..49db45018 100644
--- a/packages/react-server/src/features/server-action/react-server.tsx
+++ b/packages/react-server/src/features/server-action/react-server.tsx
@@ -1,4 +1,6 @@
+import { memoize, tinyassert } from "@hiogawa/utils";
 import reactServerDomWebpack from "react-server-dom-webpack/server.edge";
+import type { BundlerConfig, ImportManifestEntry } from "../../lib/types";
 import type { ReactServerErrorContext } from "../../server";
 
 // https://github.com/facebook/react/blob/c8a035036d0f257c514b3628e927dd9dd26e5a09/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L87
@@ -12,7 +14,6 @@ export function registerServerReference(
 }
 
 export type ActionResult = {
-  id: string;
   error?: ReactServerErrorContext;
   data?: unknown;
   responseHeaders?: Record<string, string>;
@@ -27,3 +28,60 @@ export class ActionContext {
 
   constructor(public request: Request) {}
 }
+
+const REFERENCE_SEP = "#";
+
+export function createActionBundlerConfig(): BundlerConfig {
+  return new Proxy(
+    {},
+    {
+      get(_target, $$id, _receiver) {
+        tinyassert(typeof $$id === "string");
+        let [id, name] = $$id.split(REFERENCE_SEP);
+        tinyassert(id);
+        tinyassert(name);
+        return {
+          id,
+          name,
+          chunks: [],
+        } satisfies ImportManifestEntry;
+      },
+    },
+  );
+}
+
+// same as packages/react-server/src/features/use-client/server.tsx
+export const serverReferenceImportPromiseCache = new Map<
+  string,
+  Promise<unknown>
+>();
+
+const serverReferenceWebpackRequire = memoize(importServerReference, {
+  cache: serverReferenceImportPromiseCache,
+});
+
+export function initializeWebpackReactServer() {
+  Object.assign(globalThis, {
+    __vite_react_server_webpack_require__: serverReferenceWebpackRequire,
+    __vite_react_server_webpack_chunk_load__: () => {
+      throw new Error("todo: __webpack_chunk_load__");
+    },
+  });
+}
+
+async function importServerReference(id: string): Promise<unknown> {
+  if (import.meta.env.DEV) {
+    return await import(/* @vite-ignore */ id);
+  } else {
+    const mod = await import("virtual:rsc-use-server" as string);
+    const dynImport = mod.default[id];
+    tinyassert(dynImport, `server reference not found '${id}'`);
+    return dynImport();
+  }
+}
+
+export async function importServerAction(id: string): Promise<Function> {
+  const [file, name] = id.split(REFERENCE_SEP) as [string, string];
+  const mod: any = await importServerReference(file);
+  return mod[name];
+}
diff --git a/packages/react-server/src/features/server-action/server.tsx b/packages/react-server/src/features/server-action/server.tsx
index 198450f5d..85ca5b48a 100644
--- a/packages/react-server/src/features/server-action/server.tsx
+++ b/packages/react-server/src/features/server-action/server.tsx
@@ -1,14 +1,8 @@
 import reactServerDomClient from "react-server-dom-webpack/client.edge";
 
 export function createServerReference(id: string) {
-  const reference = reactServerDomClient.createServerReference(
-    id,
-    (...args) => {
-      console.error(args);
-      throw new Error("unexpected callServer during SSR");
-    },
-  );
-  // for now, this is for our DIY `useActionData` system.
-  Object.assign(reference, { $$id: id });
-  return reference;
+  return reactServerDomClient.createServerReference(id, (...args) => {
+    console.error(args);
+    throw new Error("unexpected callServer during SSR");
+  });
 }
diff --git a/packages/react-server/src/features/server-action/utils.tsx b/packages/react-server/src/features/server-action/utils.tsx
index 23fc0ee34..0c364fdab 100644
--- a/packages/react-server/src/features/server-action/utils.tsx
+++ b/packages/react-server/src/features/server-action/utils.tsx
@@ -1,23 +1,13 @@
-import { tinyassert } from "@hiogawa/utils";
+const ACTION_ID_HEADER = "x-server-action-id";
 
-// TODO
-// it doesn't seem like a right way to do progressive enhancement for SSR
-// but works okay for simple cases? (e.g. no `bind`?)
-// cf. https://github.com/facebook/react/pull/26774
-const ACTION_ID_PREFIX = "$ACTION_ID_";
-
-export function injectActionId(formData: FormData, id: string) {
-  formData.set(ACTION_ID_PREFIX + id, "");
+export function wrapStreamActionRequest(id: string) {
+  return { [ACTION_ID_HEADER]: id };
 }
 
-export function ejectActionId(formData: FormData) {
-  let id: string | undefined;
-  formData.forEach((_v, k) => {
-    if (k.startsWith(ACTION_ID_PREFIX)) {
-      id = k.slice(ACTION_ID_PREFIX.length);
-      formData.delete(k);
-    }
-  });
-  tinyassert(id);
-  return id;
+export function unwrapStreamActionRequest(request: Request) {
+  const id = request.headers.get(ACTION_ID_HEADER);
+  if (id) {
+    return { id };
+  }
+  return false;
 }
diff --git a/packages/react-server/src/lib/types-env.d.ts b/packages/react-server/src/lib/types-env.d.ts
index fc0608786..6b15faedb 100644
--- a/packages/react-server/src/lib/types-env.d.ts
+++ b/packages/react-server/src/lib/types-env.d.ts
@@ -25,7 +25,18 @@ declare module "react-server-dom-webpack/server.edge" {
     name: string,
   ): T;
 
-  export function decodeReply(body: string | FormData): Promise<unknown>;
+  export function decodeReply(body: string | FormData): Promise<unknown[]>;
+
+  export function decodeAction(
+    body: FormData,
+    bundlerConfig: import("./types").BundlerConfig,
+  ): Promise<() => Promise<unknown>>;
+
+  export function decodeFormState(
+    actionResult: unknown,
+    body: FormData,
+    serverManifest?: unknown,
+  ): Promise<unknown>;
 }
 
 // https://github.com/facebook/react/blob/89021fb4ec9aa82194b0788566e736a4cedfc0e4/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js
@@ -68,7 +79,5 @@ declare module "react-server-dom-webpack/client.browser" {
     },
   ): Promise<T>;
 
-  export function encodeReply(
-    v: unknown,
-  ): Promise<string | URLSearchParams | FormData>;
+  export function encodeReply(v: unknown[]): Promise<string | FormData>;
 }
diff --git a/packages/react-server/src/lib/types.ts b/packages/react-server/src/lib/types.ts
index f4ffd508a..41d8c1c25 100644
--- a/packages/react-server/src/lib/types.ts
+++ b/packages/react-server/src/lib/types.ts
@@ -32,3 +32,14 @@ export type WebpackRequire = (id: string) => Promise<unknown>;
 export type WebpackChunkLoad = (id: string) => Promise<unknown>;
 
 export type CallServerCallback = (id: any, args: any) => Promise<unknown>;
+
+// https://github.com/facebook/react/pull/28491
+export type ReactUseActionState = <State, Payload>(
+  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
+  initialState: Awaited<State>,
+  permalink?: string,
+) => [
+  state: Awaited<State>,
+  dispatch: (payload: Payload) => void,
+  isPending: boolean,
+];
diff --git a/packages/react-server/src/plugin/index.ts b/packages/react-server/src/plugin/index.ts
index 6d4cad792..eec7883c3 100644
--- a/packages/react-server/src/plugin/index.ts
+++ b/packages/react-server/src/plugin/index.ts
@@ -170,6 +170,32 @@ export function vitePluginReactServer(options?: {
         },
       ),
 
+      {
+        name: "patch-react-server-dom-webpack",
+        transform(code, id, _options) {
+          if (id.includes("react-server-dom-webpack")) {
+            // rename webpack markers in react server runtime
+            // to avoid conflict with ssr runtime which shares same globals
+            code = code.replaceAll(
+              "__webpack_require__",
+              "__vite_react_server_webpack_require__",
+            );
+            code = code.replaceAll(
+              "__webpack_chunk_load__",
+              "__vite_react_server_webpack_chunk_load__",
+            );
+
+            // make server reference async for simplicity (stale chunkCache, etc...)
+            // see TODO in https://github.com/facebook/react/blob/33a32441e991e126e5e874f831bd3afc237a3ecf/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js#L131-L132
+            code = code.replaceAll("if (isAsyncImport(metadata))", "if (true)");
+            code = code.replaceAll("4===a.length", "true");
+
+            return code;
+          }
+          return;
+        },
+      },
+
       ...(options?.plugins ?? []),
     ],
     build: {
@@ -298,6 +324,7 @@ export function vitePluginReactServer(options?: {
     },
   };
 
+  // plugins for main vite dev server (browser / ssr)
   return [
     rscParentPlugin,
     vitePluginSilenceUseClientBuildWarning(),
diff --git a/packages/react-server/src/server.ts b/packages/react-server/src/server.ts
index 6f1627382..454d7c591 100644
--- a/packages/react-server/src/server.ts
+++ b/packages/react-server/src/server.ts
@@ -5,3 +5,4 @@ export {
   type ReactServerErrorContext,
 } from "./lib/error";
 export type { ActionContext } from "./features/server-action/react-server";
+export { useActionContext } from "./features/server-action/context";
diff --git a/tsconfig.base.json b/tsconfig.base.json
index d246edcac..90f314f9f 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -7,6 +7,6 @@
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ESNext",
-    "lib": ["ESNext", "DOM"]
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
   }
 }