React: What are Server Actions in React/Next.js?

Server Actions are functions that execute on the server, callable directly from client code. Introduced in React 19 / Next.js 15.

Simple analogy: Previously to submit a form you needed to: write an API endpoint → configure fetch → handle response. Server Actions are like a "direct line" to the server: form is submitted, server processes it, result is returned.

How it works step-by-step:

1. You mark a function with "use server" at the top.
2. Next.js generates an API endpoint behind the scenes.
3. When you pass the function to a <form action={...}>, the form submission triggers a server-side POST request.
4. The function runs on the server with access to databases, environment variables, and server-only APIs.
5. After execution, the page re-renders with updated data (via revalidatePath or revalidateTag).

How to use:

1"use server";  // Server function marker
2
3async function addUser(formData: FormData) {
4"use server";
5  const name = formData.get("name");
6  await db.users.create({ data: { name } });
7  revalidatePath("/users");
8}
9
10// In component:
11<form action={addUser}>
12  <input name="name" />
13  <button type="submit">Add</button>
14</form>

Server Actions vs API Routes:

• Server Actions — no manual endpoint, automatic CSRF protection, works with forms natively.
• API Routes — manual endpoint, more control, needed for webhooks or external clients.
• Use Server Actions for internal form submissions; use API Routes for external-facing APIs.

Pending state with useTransition:

1function AddUserForm() {
2  const [isPending, startTransition] = useTransition();
3
4  const handleSubmit = (formData) => {
5    startTransition(async () => {
6      await addUser(formData);
7    });
8  };
9
10  return (
11    <form action={handleSubmit}>
12      <input name="name" />
13      <button type="submit" disabled={isPending}>
14        {isPending ? "Adding..." : "Add User"}
15      </button>
16    </form>
17  );
18}

Common pitfalls:

• Trying to return a value from a server action — they can only return undefined or throw.
• Not using revalidatePath or revalidateTag after mutations — stale data persists.
• Passing non-serializable data (Date objects, functions) as arguments.

Advantages:

• No need to write API routes manually.
• Automatic CSRF protection.
• Pending state support (useTransition).
• Works with progressive enhancement (JS is not required).