Server Actions

The modern, API-less way to mutate data on the server directly from React components.

React6 min readConcept 47 of 48

Mutating Data without API Routes

For years, if a user submitted a form in a React app, you had to: 1. Prevent default behavior. 2. Serialize the form data into JSON. 3. Call fetch('/api/submit'). 4. Write a separate API route handler on the backend to receive the request.

**Server Actions** eliminate this boilerplate. They are asynchronous JavaScript functions that run on the server, but can be called directly from your React components on the client.

Seamless RPC (Remote Procedure Call)

When you pass a Server Action to a <form action={submitData}> or call it in an onClick handler, React automatically creates a hidden, secure API endpoint for you.

It handles the serialization, network request, and deserialization behind the scenes. You just write a function, mark it with 'use server', and call it. It feels like you are calling a local function, but it executes on the backend.

The 'use server' Directive

To create a Server Action, you simply add the 'use server' directive at the top of an async function (or at the top of a file containing multiple actions).

tsx // actions.ts 'use server' export async function updateUsername(formData) { const newName = formData.get('name'); await db.query('UPDATE users SET name = ?', [newName]); }

You can then import this function into a Client Component and attach it directly to a form's action attribute.

The Disappearing API Route

Compare the traditional REST API approach for form submission with the modern Server Actions approach. Watch how the boilerplate vanishes.

// 1. Client Component
onSubmit={(e) => {
e.preventDefault();
const data = new FormData(e.target);
fetch('/api/submit', { body: data });
}}
// 2. API Route (/api/submit.js)
export default async function handler(req, res) {
const name = req.body.name;
await db.query(name);
res.status(200).send();
}
// 1. Client Component
// Just pass the function to the action prop
<formaction={submitData}>
// 2. Server Action (actions.js)
'use server';
export async function submitData(formData) {
const name = formData.get('name');
await db.query(name);
}
Browser
Saved!
POST /api/submit
React RPC Payload
(Hidden)
200 OK
/api/submit.js
(Manually Written)
'use server'
submitData()

Server Actions eliminate the need to manually build, serialize, and route API requests. React handles the RPC (Remote Procedure Call) networking under the hood.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is a React Server Action?
  2. 2How do you define a function as a Server Action?
  3. 3True or False: Server Actions are secure by default, so you don't need to check user authentication inside them.

Remember this

  • Server Actions eliminate the need for manual API routes for data mutations.
  • Use the 'use server' directive to mark an async function as a Server Action.
  • React handles the network request (RPC) automatically behind the scenes.
  • They work with <form action={...}> even without JavaScript (Progressive Enhancement).
  • ALWAYS validate inputs and authenticate users inside your Server Actions.

Done with this concept?

Mark it complete to track your progress. No login needed.