Server Action

A server-only function the UI or a form can call through a framework-managed request, without hand-writing a separate API route.

call server code from a formuse server functionsave to the database straight from a buttonsubmit without writing an API routeno more writing fetch to my own backendform action in Next.jsserver acctionthe function that somehow runs on the server

See it

Live demo coming soon

What it is

A Server Action is an asynchronous server function that frontend code can invoke through a framework-managed request. In React it is a Server Function used as an action, marked by the 'use server' directive, and Next.js 14 was the release that made it stable. A form can pass FormData to it without you hand-writing a separate JSON endpoint and fetch call.

Use one for mutations that start in the interface: creating a comment, updating a profile, or adding an item to a cart. It fits especially well with forms because the platform already knows how to submit them, and frameworks can connect the result to pending state and cache revalidation.

Gotcha: convenient call syntax does not make the function private or trusted. Treat every action like a public endpoint: authenticate, authorize the specific mutation, validate FormData on the server, and return only serializable data. Never rely on a hidden button or a disabled client control as access control.

Ask AI for it

Implement this profile form as a Next.js App Router Server Action. Mark the async mutation with 'use server', accept FormData, authenticate the session, validate fields with Zod safeParse, authorize the target record, update it, and call revalidatePath('/profile'). Connect it to the form action property and useActionState for field errors and a pending submit state. Return serializable data and never trust a user ID from the client.

You might have meant

react server componentsclient componentprogressive enhancementdata fetchingserver side rendering

Go deeper