hardFrontend

What are Server Actions and the `"use server"` directive in React 19?

Q: What are Server Actions and the `"use server"` directive in React 19?

**Server Actions** are async functions marked with the `"use server"` directive that execute on the **server** but can be **called from client components** or passed to a form's `action`. React handles the RPC — serializing the arguments, invoking the function on the server, and returning the result — so you can do mutations (DB writes, revalidation) without hand-writing an API route. client calls a 'use server' fn → React RPC → runs on the server <text x="115" y="60" fill="#3b82f6" font-size="11"

296 views

Understand the problem

Server functions callable from the client, integrated with forms.

reactreact-19rscserver-actions

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Server Action + form (needs an RSC framework)

// app/actions.js
'use server';
export async function addTodo(formData) {
  // runs ONLY on the server — safe to touch the DB directly
  await db.todo.create({ data: { text: formData.get('text') } });
}

// app/TodoForm.jsx (a client component)
import { addTodo } from './actions';

export default function TodoForm() {
  // The server function is passed straight to the form's action.
  return (
    <form action={addTodo}>
      <input name="text" />
      <button>Add</button>
    </form>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What causes hydration mismatches, and how do you handle them?

How do you safely handle async work and race conditions inside effects?