Create a Server Action

React lets a form call a Server Function through its action prop. In a mutation context that function is commonly called a Server Action.

Mark the async function with "use server", inline in a Server Component or at the top of a dedicated actions file. The browser sends a POST request behind the scenes. Keep authorization and validation inside the action because a user can invoke the server endpoint without using your rendered form.

With a Server Component form, the browser can submit before client JavaScript loads, so the basic mutation can progressively enhance native HTML. A form rendered inside a Client Component may queue submission until hydration. Do not make correctness depend on that queue or on a disabled button.

Treat every action as a public mutation endpoint. Hidden inputs and IDs bound into an action are user-controlled intent, not authorization. Read the current user on the server, check access to the specific record, validate the full payload, and return only safe serializable state.

async function createNote(formData: FormData) {
  'use server'
  const title = formData.get('title')
  // validate, authorize, then write
}

export default function Page() {
  return <form action={createNote}><input name="title" /><button>Save</button></form>
}

Create the form and action. Log the received value on the server, submit with JavaScript disabled, then alter a note ID in the request. The server should reject the forged resource even though the visible form never offered it.