Mutating Data

You can mutate data in Next.js using React Server Functions. This page will go through how you can create and invoke Server Functions. For Next.js-specific behaviors (single-roundtrip response, sequential dispatch, security, deployment), see Server Actions and Mutations.
A Server Function is an asynchronous function that runs on the server. You can call them from the client through a network request, which is why they must be asynchronous.
In an action or mutation context, they are also called Server Actions.
By convention, a Server Action is an async function used with startTransition. This happens automatically when the function is:
When an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.
Behind the scenes, actions use the POST method, and only this HTTP method can invoke them.
Server Functions are reachable via direct POST requests, not just through your application's UI. Always verify authentication and authorization inside every Server Function. See the Data Security guide for recommended patterns.
A Server Action is a Server Function used in a specific way (for handling form submissions and mutations). Server Function is the broader term.
A Server Function can be defined by using the use server directive. You can place the directive at the top of an asynchronous function to mark the function as a Server Function, or at the top of a separate file to mark all exports of that file.
Server Functions can be inlined in Server Components by adding the "use server" directive to the top of the function body:
Server Components support progressive enhancement by default, meaning forms that call Server Actions will be submitted even if JavaScript hasn't loaded yet or is disabled.
It's not possible to define Server Functions in Client Components. However, you can invoke them in Client Components by importing them from a file that has the "use server" directive at the top of it:
In Client Components, forms invoking Server Actions will queue submissions if JavaScript isn't loaded yet, and will be prioritized for hydration. After hydration, the browser does not refresh on form submission.
You can also pass an action to a Client Component as a prop:
There are two main ways you can invoke a Server Function:
Server Functions are designed for server-side mutations. The client dispatches and awaits them one at a time. See Sequential dispatch on the client. If you need parallel data fetching, use data fetching in Server Components, or perform parallel work inside a single Server Function or Route Handler.
React extends the HTML <form> element to allow a Server Function to be invoked with the HTML action prop.
When invoked in a form, the function automatically receives the FormData object. You can extract the data using the native FormData methods:
You can invoke a Server Function in a Client Component by using event handlers such as onClick.
While executing a Server Function, you can show a loading indicator with React's useActionState hook. This hook returns a pending boolean:
See the Building interactive apps guide for a deeper walkthrough of responsive interactions, including pending feedback, optimistic UI, transitions, and error handling.
With the experimental useOffline config enabled, a Server Action interrupted by a connectivity drop stays pending and completes when the network returns.
After a mutation, you may want to refresh the current page to show the latest data. You can do this by calling refresh from next/cache in a Server Action:
This refreshes the client router, ensuring the UI reflects the latest state. The refresh() function does not revalidate tagged data. To revalidate tagged data, use updateTag or revalidateTag instead.
After performing a mutation, you can revalidate the Next.js cache and show the updated data by calling revalidatePath or revalidateTag within the Server Function:
You may want to redirect the user to a different page after a mutation. You can do this by calling redirect within the Server Function.
Calling redirect throws a framework handled control-flow exception. Any code after it won't execute. If you need fresh data, call revalidatePath or revalidateTag beforehand.
You can get, set, and delete cookies inside a Server Action using the cookies API.
When you set or delete a cookie in a Server Action, Next.js re-renders the current page and its layouts on the server so the UI reflects the new cookie value.
The server update applies to the current React tree, re-rendering, mounting, or unmounting components, as needed. Client state is preserved for re-rendered components, and effects re-run if their dependencies changed.
You can use the React useEffect hook to invoke a Server Action when the component mounts or a dependency changes. This is useful for mutations that depend on global events or need to be triggered automatically. For example, onKeyDown for app shortcuts, an intersection observer hook for infinite scrolling, or when the component mounts to update a view count:
Learn more about Server Actions and the APIs mentioned in this page.
Last updated October 15, 2026
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.