---
title: "15 — Server Functions — Mutations That Run on the Server"
uid: server-functions
tags: ["roadmap:nextjs", "mutations", "server-functions", "server-actions", "forms", "nextjs"]
excerpt: "Server Functions are async functions that execute on the server, callable from Client or Server Components — the App Router's native answer to mutations, replacing hand-rolled endpoints."
date: 2026-08-13T03:28:00+0000
source: https://www.aveshina.my.id/en/blog/server-functions
---
The App Router's mechanism for mutations replaces a pattern I had been hand-rolling for years — endpoint, fetch, response handling. The model that clicked: **a Server Function is an async function that executes on the server, callable from Client or Server Components, used to handle form submissions and data mutations** [1]. In a mutation context they're called Server Actions. They replace the older pattern of writing a separate API endpoint, wiring up a fetch to call it, and handling the response — the function call crosses the network boundary for me.
## The mechanism
A Server Function is marked with the 'use server' directive, either at the top of a file (marking every export as a server function) or inside a function body. Once marked, the function runs only on the server — even when invoked from a Client Component, the call is serialized, sent to the server, executed, and the result returned [1].
```
// app/actions.ts
'use server';
import { revalidateTag } from 'next/cache';
import { db } from '@/lib/db';
export async function createPost(formData: FormData) {
await db.post.create({
data: { title: String(formData.get('title')) },
});
revalidateTag('posts'); // refresh the cached list
}
```
The win is that the Client Component doesn't write a fetch — it just calls the function:
```
// app/posts/NewPostForm.tsx
'use client';
import { createPost } from '@/app/actions';
export function NewPostForm() {
return (
);
}
```
The action prop on a