Server Components & RSChigh

Server Actions

Server Actions are async functions marked with 'use server' that run on the server but can be called from client components like regular functions. They simplify form submissions and mutations (though API routes are still needed for webhooks, third-party integrations, and non-Next.js consumers).

Memory anchor

Server Actions are a drive-through window — you place your order (call the action) from your car (client), the kitchen (server) prepares it, and hands it back. But the kitchen still needs to check your payment (auth) and verify the order makes sense (validation).

Expected depth

Server Actions can be passed as the action prop to <form>, enabling progressive enhancement (forms work without JavaScript). They automatically handle serialization of FormData. They can also be called directly from event handlers: onClick={() => await deleteItem(id)}. Under the hood, the framework creates an HTTP endpoint for each action. They integrate with React's transition system, so calling a Server Action can trigger Suspense boundaries.

Deep — senior internals

Server Actions use a POST request with a special encoding. The framework generates a unique ID for each action function, and the client sends this ID plus serialized arguments. Return values are serialized back to the client and can update the UI via revalidation. Security considerations: Server Actions are public HTTP endpoints, so they must validate inputs and check authorization — the 'use server' directive doesn't make them secure by default. They work with useActionState (React 19) for optimistic updates, pending states, and error handling.

🎤Interview-ready answer

Server Actions are async server functions marked with 'use server' that can be called from client components. They simplify mutations by removing the need for manual API routes, and work as form actions with progressive enhancement. Key security point: they're public HTTP endpoints under the hood, so input validation and auth checks are still required. I pair them with useActionState for optimistic updates and pending states.

Common trap

Assuming 'use server' provides security. It only marks the function as a server endpoint. You must still validate inputs, check authentication, and sanitize data — just like any API route.

Related concepts