Server Actions ('use server') in React
From the React Design Patterns cheat sheet · Server Components · verified Jul 2026
Server Actions ('use server')
Call server functions directly from client components and forms
jsx
// actions.ts
'use server';
export async function createPost(formData) {
await db.post.create({ data: { title: formData.get('title') } });
revalidatePath('/posts');
}
// PostForm.tsx (Client)
import { createPost } from './actions';
function PostForm() {
return <form action={createPost}><input name="title" /></form>;
}💡 Server actions look like regular function calls but execute on the server with direct DB access
⚡ Use revalidatePath/revalidateTag to refresh the cached UI after a mutation
📌 Server actions in form action props give progressive enhancement - works without JavaScript
🟢 Always validate inputs in server actions - they are public endpoints accessible to anyone
server-actionsuse-servermutations