React: What are Server Actions?

Server Actions are functions that execute on the server but are called from the client. Introduced in React 19 + Next.js.

Simple analogy: Imagine you are in a restaurant.

• Regular approach (API): you write an order on paper (create JSON), give it to the waiter, the waiter takes it to the kitchen (fetch), the cook reads the note, cooks, gives it to the waiter, the waiter brings it to you. Many steps.
• Server Action: you simply say "Bring me pasta" — and the waiter shouts to the kitchen (calling a function with "use server" marker), the cook cooks and immediately brings it. Fewer steps.

What it looks like in code:

1// In a file with 'use server' marker (separate file)
2'use server';
3
4export async function createOrder(formData) {
5    const name = formData.get('name');
6    const email = formData.get('email');
7    
8    // This code executes ON THE SERVER
9    await db.orders.create({ name, email });
10    await sendEmail(email);
11}
12
13// On the client:
14function OrderForm() {
15    return (
16        <form action={createOrder}>  {/* Server function! */}
17            <input name="name" required />
18            <input name="email" type="email" required />
19            <button type="submit">Order</button>
20        </form>
21    );
22}

Advantages:

• Progressive enhancement — form works even without JavaScript (server render).
• Security — API keys, tokens remain on the server.
• Less code — no need to write API endpoint.
• Automatic cache invalidation — after Server Action React updates data itself.