ReactJS ~Server Functions~

・The sever functions in React is the asynchronous function in server component that can be called from slient component.

Previously, it used to be called server actions though, it is called server functions that covers more wide range features such as query for database.

Basic features
・"use server" directive: You have to add "use server"; at the top of the file or that of the file to define it as the server function.

・Automatic RPC: When you call it from client component, React create HTTP request(POST), run the server function. and return the result of it.

・Type Safety: If you use TypeScript, it enables us to develop an application safely checking types of the parameters or returns between server and client.

・Serialize Constraints: Numbers, stings and objects must be type of data that is sirializable, because parameters and returns are sent over the network.

Usage

1. Data Mutation: When mutating the server state by sending form, and create, update and delete data.

2. Progressive Enhancement: It enables us to send form by calling sserver function throguh <form action={...}> before JavaScript is loaded on the browser.

3. Concealment of confidential information: You can conceal logics such as manitulation for data base or utilizing APIs that should not be exposed to client.

Usage Environment as of 2026
・React 19: Server functions were introduced as a stable feature in React 19.

・Frameworks: Currently, Next.js’s App Router is the most prominent implementation, but support is also expanding in other frameworks such as TanStack Start, react-server, and React Router (preview).

Implementation Example (Next.js / React 19)
By defining a function with “use server”; and passing it directly to the action attribute of a client-side component's form, you can seamlessly invoke server-side processing.

// actions.ts (server side)
'use server';
export async function submitData(formData: FormData) {
  //do something on server
}

// ClientComponent.tsx (client side)
import { submitData } from './actions';
export function MyForm() {
  return <form action={submitData}>...</form>;
}