Server Functions

A button that runs code on the server

Adding tea to a cart has to change something on the server: the cart lives in a database there, not in the browser. Until now, that meant writing an API: a web address on the server, code that reads the request, and a fetch call in the browser that sends it. A Server Function lets you skip that. You write an async function that runs on the server, mark it with "use server", and call it from a component like any other function.

Server Functions need a server and a framework that supports them, like Next.js. This page has neither, so the live examples bring a small pretend framework in their tabs. It writes the request exactly the way React does, with React's own code, and lists every request under the result. Only the network and the server are pretend: the "server" is the same page, 0.6 seconds away. Press Add 2 cups:

1import { useState, useTransition } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5// In a real app: import { addToCart } from "./actions.js";6const { addToCart } = server;7 8export default function App() {9  const [cups, setCups] = useState(0);10  const [isPending, startTransition] = useTransition();11 12  function handleClick() {13    startTransition(async () => {14      const result = await addToCart("mint", 2);15      startTransition(() => setCups(result.cups));16    });17  }18 19  return (20    <>21      <p>Mint tea in your cart: {cups} cups</p>22      <button onClick={handleClick} disabled={isPending}>23        {isPending ? "Adding…" : "Add 2 cups"}24      </button>25      <NetworkLog />26    </>27  );28}

Open the actions.js tab first. Line 1, "use server", marks every function the file exports as a Server Function. addToCart (lines 6 to 9) adds the cups to the cart and returns how many there are now. In a real app this file runs only on the server, so it could talk to a database directly; here a Map on line 4 stands in for one.

In App.jsx, line 14 calls addToCart("mint", 2) and waits for its answer with await. Line 15 stores the new count. Lines 13 and 15 wrap the work in startTransition, so isPending is true while the request travels and the button says Adding… (the Transitions lesson explains why line 15 needs its own startTransition). In a real app, line 5 would be the whole story: you import addToCart from ./actions.js. Here, line 6 takes it from the pretend framework, which stands in for the build step that a framework runs.

After the click, the network list shows POST actions.js#addToCart with the body ["mint",2], and 0.6 seconds later the answer {"teaId":"mint","cups":2}. The page says Mint tea in your cart: 2 cups. Press it again: a second request, and 4 cups. The browser never ran addToCart's code; it sent the function's name and the arguments, and the server sent back the result.

Where the use server directive goes

"use server" is a directive: a plain string on a line of its own that tells the build tool something about the code. It does nothing when the code runs; the framework's bundler reads it while it builds your app. React gives it two places.

At the top of a file

"use server";

import { db } from "./db.js";

export async function addToCart(teaId, cups) {
  await db.cart.add(teaId, cups);
  return { teaId, cups: await db.cart.count(teaId) };
}

export async function removeFromCart(teaId) {
  await db.cart.remove(teaId);
}

Line 1 marks the whole file. Every function it exports, addToCart on line 5 and removeFromCart on line 10, becomes a Server Function. The directive has to come first, before the imports; only comments may sit above it. Each export must be an async function, because calling it from the browser always waits for the network. Line 3 imports the database code, which never reaches the browser. A Client Component can then import these functions:

"use client";

import { startTransition } from "react";
import { addToCart } from "./actions.js";

export default function AddButton({ teaId }) {
  return (
    <button onClick={() => startTransition(() => addToCart(teaId, 1))}>
      Add 1 cup
    </button>
  );
}

Line 1 marks this file as a Client Component, code that runs in the browser (the Server Components lesson covers "use client"). Line 4 imports addToCart as if it were local. The bundler doesn't send actions.js to the browser: it puts a reference in its place. Line 8 calls it in a Transition. The overview's example did the same, with the pretend framework doing the bundler's job.

Inside a function, in a Server Component

A Server Component runs only on the server, so it can read the database while it renders. It can also define a Server Function right where it's used:

import { db } from "./db.js";
import AddButton from "./AddButton.jsx";

export default async function ProductPage({ teaId }) {
  const tea = await db.teas.find(teaId);

  async function addThisTea(cups) {
    "use server";
    await db.cart.add(tea.id, cups);
  }

  return (
    <article>
      <h1>{tea.name}</h1>
      <AddButton onAdd={addThisTea} />
    </article>
  );
}

Line 4 is an async Server Component, and line 5 reads the tea from the database. Lines 7 to 10 define addThisTea; line 8, "use server", is the first line of its body, which marks this one function. Line 15 passes it to AddButton as a prop. The button, a Client Component, calls it like any function prop:

"use client";

import { startTransition } from "react";

export default function AddButton({ onAdd }) {
  return <button onClick={() => startTransition(() => onAdd(1))}>Add 1 cup</button>;
}

Line 6 calls onAdd(1) in a Transition, and the server runs line 9 of ProductPage.jsx. Notice that addThisTea uses tea.id, a variable from the component around it: a closure. But the component finished rendering long before the click, on a server that may have handled a thousand other requests since. So the framework sends tea.id to the browser along with the reference, and the browser sends it back with every call. That detail matters for security, later in this lesson.

How to read the table: each row asks one question, answered for each place the directive can go.

What happens when the browser calls one

When the framework builds your app, it splits each "use server" file in two. The server keeps the code. The browser gets, for each function, a reference: a small stand-in function that knows the real one's id and nothing else.

Frameworks write this step for you, with React's packages for each bundler (react-server-dom-webpack, react-server-dom-turbopack, react-server-dom-parcel). With Parcel's, the two halves look roughly like this:

// What the browser gets for actions.js (simplified)
import { createServerReference } from "react-server-dom-parcel/client";

export const addToCart = createServerReference("actions.js", "addToCart");
export const removeFromCart = createServerReference("actions.js", "removeFromCart");

// What the server keeps for actions.js (simplified)
import { registerServerReference } from "react-server-dom-parcel/server";

export async function addToCart(teaId, cups) {
  await db.cart.add(teaId, cups);
  return { teaId, cups: await db.cart.count(teaId) };
}
registerServerReference(addToCart, "actions.js", "addToCart");

In the browser's half, line 4 makes addToCart a reference whose id is actions.js#addToCart; no database code, no cart. In the server's half, lines 4 to 7 are your function, and line 8 registers it under the same id, so a request naming that id finds it. Real frameworks use a hash instead of the file's name, like 7f3a9c….

Then, on each call:

1. The reference passes the id and your arguments to the framework. React's encodeReply writes the arguments as text: the request's body.
2. The framework sends a POST request to the server with the id and the body.
3. On the server, React rebuilds the arguments from the body (decodeReply), the framework finds the function by its id, and calls it.
4. Whatever the function returns is written back in the same format that Server Components use to send what they render, and React turns it into a value again in the browser. Your await gets that value.

What can travel

Since the arguments have to become text, only some values can be arguments: the ones React knows how to write down and rebuild. The pretend framework in this example uses React's own encodeReply, so each button shows you the real body, or the real error. The actions.js tab's inspect answers with the kind of value that arrived. Press each button, from left to right:

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { inspect } = server;6 7const tries = {8  "A string and a number": () => inspect("mint", 2),9  "An object": () => inspect({ teaId: "mint", cups: 2 }),10  "A date": () => inspect(new Date("2026-10-26T09:00:00Z")),11  "A Map": () => inspect(new Map([["mint", 2]])),12  "A function": () => inspect(() => "mint"),13  "The click event": (event) => inspect(event),14};15 16export default function App() {17  const [error, setError] = useState("");18 19  function send(name, event) {20    setError("");21    startTransition(async () => {22      try {23        await tries[name](event);24      } catch (thrown) {25        startTransition(() => setError(thrown.message.split("\n")[0]));26      }27    });28  }29 30  return (31    <>32      <div className="row">33        {Object.keys(tries).map((name) => (34          <button key={name} onClick={(event) => send(name, event)}>35            {name}36          </button>37        ))}38      </div>39      {error && <p className="error">Not sent: {error}</p>}40      <NetworkLog />41    </>42  );43}

Lines 7 to 14 list six calls. Lines 19 to 28 run the one you pick in a Transition, and line 25 keeps the first line of any error to show on line 39. What you'll see:

• A string and a number (line 8) send ["mint",2]: the arguments as a JSON list. They arrive as String and Number.
• An object (line 9) sends [{"teaId":"mint","cups":2}] and arrives as a plain Object.
• A date (line 10) sends ["$D2026-10-26T09:00:00.000Z"]. JSON has no dates, so React writes the date as text and marks it with $D; it arrives as a real Date.
• A Map (line 11) needs more than one line of JSON, so the body becomes a multipart form, the format browsers use to send forms. The log shows each part: 1=[["mint",2]] holds the Map's entries, and 0=["$Q1"] is the argument list, saying "a Map, from part 1".
• A function (line 12) never leaves the page: Not sent: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again. Code can't be written as text.
• The click event (line 13) fails too: Not sent: Only plain objects, and a few built-ins, can be passed to Server Functions. Classes or null prototypes are not supported. React's event object is made by a class. This one happens by accident a lot: onClick={addToCart} passes the event as the first argument.

Press Edit & run and try your own on line 8, like inspect(new Set(["mint"]), 5n): a Set and a BigInt travel too. How to read the table: each row is a kind of value, whether it can be an argument, and why.

The same rules apply to what the function returns: values a Server Component could pass to a Client Component as props. The arguments that arrive are copies, rebuilt from text, so changing an object on the server never changes the browser's object.

Server Functions as form actions

In Form actions, a form's action was a function in the browser. It can be a Server Function just as well, and with useActionState it can return the answer to show. Type an email and press the button; then try asha@example.com, who is already a member:

1import { useActionState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { joinClub } = server;6 7export default function App() {8  const [state, formAction, isPending] = useActionState(joinClub, { message: "", email: "" });9 10  return (11    <>12      <form action={formAction}>13        <input name="email" aria-label="Email" defaultValue={state.email} />14        <button disabled={isPending}>{isPending ? "Joining…" : "Join the tea club"}</button>15      </form>16      <p>{state.message}</p>17      <NetworkLog />18    </>19  );20}

In App.jsx, line 8 hands the Server Function to useActionState, exactly as you would a local action, and line 12 gives the form the formAction it returns. In actions.js, line 5 has the two parameters useActionState passes: the previous state, then the form's FormData. Lines 7 and 8 return an error for a missing @ or a known member, with the email, so line 13's defaultValue puts it back after React resets the form. Join with mint@example.com: the page says Welcome, mint@example.com!.

Look at the request. The body is a multipart form again, because one argument is a FormData. One part holds the email field, its name with a prefix added. The part named 0 is the argument list: [{"message":"","email":""},"$K1"], the previous state, then $K1, "the FormData from part 1". The previous state travels with every call; the server doesn't remember it for you.

Forms that work before JavaScript

A server-rendered page shows its HTML before its JavaScript has loaded (Server rendering and hydration). What can a form do in that gap? It depends on its action. The playground shows the HTML React's server renderer really writes for four versions of the sign-up form:

import { joinClub } from "./actions.js";

function JoinForm() {
  return (
    <form action={joinClub}>
      <input name="email" />
      <button>Join</button>
    </form>
  );
}

<form action="" encType="multipart/form-data" method="POST">
  <input type="hidden" name="$ACTION_ID_actions.js#joinClub"/>
  <input name="email"/>
  <button>Join</button>
</form>

With a browser function, the form has nowhere to go: its action is a placeholder that throws, and a small script keeps early submits until React has loaded, then React runs them. With a Server Function, the form is ordinary HTML: method="POST", the page's own address, and a hidden field naming the function. The browser can send it with JavaScript still loading, or turned off, and the framework runs the function and sends back the page. That's progressive enhancement: the page works as plain HTML first, and gets better when JavaScript arrives.

With useActionState, the hidden fields also hold the initial state, so the server can call joinClub with both arguments and render the new state into the page it sends back. With a permalink (useActionState's third argument, "/club"), the form posts to that page instead, which helps when the same form sits on many pages. Once React is running, none of this shows: React calls the function with fetch, as in the live example, and the page doesn't reload.

Calling one from an event handler

Not every change is a form. A Save button, a star rating, or a drag in a list calls the Server Function from an event handler. React doesn't start a Transition for you there, so you start one. Save a few teas, then press one again:

1import { useState, useTransition } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { toggleSaved } = server;6const teas = ["mint", "chai", "sencha"];7 8export default function App() {9  const [saved, setSaved] = useState([]);10  const [isPending, startTransition] = useTransition();11 12  function toggle(teaId) {13    startTransition(async () => {14      const list = await toggleSaved(teaId);15      startTransition(() => setSaved(list));16    });17  }18 19  return (20    <>21      <div className="row">22        {teas.map((teaId) => (23          <button key={teaId} onClick={() => toggle(teaId)} disabled={isPending}>24            {saved.includes(teaId) ? "Saved" : "Save"} {teaId}25          </button>26        ))}27      </div>28      <p>{isPending ? "Saving…" : `Saved for later: ${saved.join(", ") || "nothing yet"}`}</p>29      <NetworkLog />30    </>31  );32}

Line 10 gets isPending and startTransition from useTransition. Line 14 calls toggleSaved and waits; line 15 stores the list the server returned, in a second startTransition because it comes after an await. While the request travels, line 23 turns the buttons off and line 28 says Saving…. Save mint, then chai: Saved for later: mint, chai. The server owns the list (lines 3 to 8 of actions.js), and the page shows what it returned.

How to read the table: each row asks one question about calling a Server Function, answered for each way.

Three more things to know when you call one yourself:

• Show the result right away with useOptimistic. A Transition is what Optimistic updates need, so the Save button can say Saved before the server answers, and go back if it fails.
• Calls may wait in line. React hands each call to the framework when you make it, and frameworks often send them one at a time. Next.js's docs (checked October 2026) say it sends a page's Server Actions one after another, so Promise.all doesn't make them parallel.
• They're for changes, not for reading. react.dev says Server Functions are designed for mutations, and that frameworks usually have no way to cache their answers. To read data, use a Server Component, a route's loader, or a library from Data fetching libraries.

An error the function throws reaches the browser as an error from the await. Inside a Transition, React shows it in the nearest error boundary, the same as for any action. For errors you expect, like "already a member", return a value instead, as joinClub does.

Every Server Function is a public endpoint

An endpoint is an address on a server that answers requests. A Server Function is one, even though you never wrote an address: the framework made one for it. The function's id is in your page's JavaScript, where anyone can read it, and anyone can send a POST with that id and any body they like. Here is a delete function that trusts its caller:

"use server";

import { db } from "./db.js";

export async function deleteReview(reviewId) {
  await db.reviews.delete({ id: reviewId });
}

Line 6 deletes whichever review it's given. The page may only show a Delete button under your own reviews, but the button isn't what calls the function; a request is. Anyone signed in can open the browser's console on the shop and send this:

await fetch("/teas/mint", {
  method: "POST",
  headers: { "Next-Action": "a1b2c3" },
  body: JSON.stringify(["r2"]),
});

Line 1 posts to a page of the shop, line 3 names the function the way Next.js does, with its id in a header, and line 4 sends Ben's review id. To the server, this request looks the same as a click on a Delete button.

react.dev's security notes for "use server" say it plainly: arguments are fully client-controlled, so treat them as untrusted input, and in every Server Function check that the signed-in user is allowed to do it. Here is the same function with those checks:

"use server";

import { db } from "./db.js";
import { getUser } from "./session.js";

export async function deleteReview(reviewId) {
  const user = await getUser();
  if (!user) return { error: "Sign in first." };
  if (typeof reviewId !== "string") return { error: "Not a review." };
  const review = await db.reviews.find({ id: reviewId });
  if (!review || review.author !== user.name) return { error: "Not allowed." };
  await db.reviews.delete({ id: reviewId });
  return { deleted: reviewId };
}

Line 7 asks your session code who is signed in; it reads a cookie the server signed, so it can't be faked like an argument (the Cookies lesson covers cookies). Line 8 stops anyone who isn't. Line 9 checks that the argument is the kind of value you expect. Line 10 loads the review, and line 11 refuses unless this user wrote it. Only then does line 12 delete. Try four requests against both versions:

Asha deletes her review: both versions delete r1. Asha deletes Ben's review: without checks, Ben's review is gone; with them, the answer is {"error":"Not allowed."}. Nobody is signed in: the unchecked version deletes Asha's review for a stranger. An object instead of an id: the argument {"$ne":""} means "any id that isn't empty" to a database like MongoDB, so the unchecked version deletes every review. Line 9's type check stops it.

Captured values travel too

An inline Server Function that uses a variable from its component, like reviewId here, gets that value from the browser on every call:

export default async function ReviewPage({ reviewId }) {
  async function deleteThisReview() {
    "use server";
    await db.reviews.delete({ id: reviewId });
  }

  return (
    <form action={deleteThisReview}>
      <button>Delete</button>
    </form>
  );
}

Line 4 uses reviewId from line 1. React treats a captured value like an argument fixed in advance, as .bind does. This is the HTML React's server renderer writes for that form, when reviewId is "review-7":

<form action="" encType="multipart/form-data" method="POST">
  <input type="hidden" name="$ACTION_REF_1"/>
  <input type="hidden" name="$ACTION_1:0" value="{&quot;id&quot;:&quot;ReviewPage.jsx#deleteThisReview&quot;,&quot;bound&quot;:&quot;$@1&quot;}"/>
  <input type="hidden" name="$ACTION_1:1" value="[&quot;review-7&quot;]"/>
  <button>Delete</button>
</form>

Line 4 holds ["review-7"] in plain text, in a field anyone can edit before submitting. Next.js encrypts captured values before they reach the page, which keeps them from being read; its docs still say not to rely on that alone, and react.dev says to treat every argument as untrusted. So check captured values like arguments, and never capture a secret.

The same habits keep the rest of a Server Function safe:

• Return only what the page needs. The return value is sent to the browser as it is. Return { deleted: reviewId }, not the whole database row with the author's email in it.
• Keep secrets out of the code. Read keys at run time, from process.env, instead of writing them in the function. A flaw found in December 2025 let a crafted request make some Server Functions send back Server Functions' source code, with any secret written in it.
• Keep React and your framework up to date. That same month, react.dev announced a critical flaw (CVE-2025-55182) that let a crafted request to a Server Function endpoint run code on the server. It was fixed in React 19.0.1, 19.1.2 and 19.2.1, with more fixes in January 2026; React 19.3.1, which this course uses, came out after them.

Fresh data after a change

After a Server Function changes data, other parts of the page may be out of date: the review count, the list of reviews, a cached copy of the page. React doesn't know about your data, so the framework handles it. In Next.js (version 16.4, checked October 2026), the function says what changed:

"use server";

import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
import { db } from "@/db";
import { getUser } from "@/session";

export async function postReview(teaId, formData) {
  const user = await getUser();
  if (!user) redirect("/sign-in");
  await db.reviews.add({ teaId, author: user.name, text: String(formData.get("text")) });
  revalidatePath(`/teas/${teaId}`);
}

Lines 9 and 10 check the user and send anyone signed out to the sign-in page; redirect throws, so nothing after it runs. Line 11 saves the review. Line 12, revalidatePath, tells Next.js that the saved copy of the tea's page is out of date (the Rendering strategies lesson met it with revalidation). When that's the page you're on, Next.js renders it again on the server and sends the new Server Component output in the same answer as the return value, so the reviews update without a second request. A form passes the tea's id with postReview.bind(null, teaId), and the FormData arrives second.

Next.js has a few of these, each for a different scope: revalidatePath for one page, updateTag and revalidateTag for data you tagged when you read it, and refresh() to render the current page again. Other frameworks do the same job their own way. React Router (version 8, in framework mode) doesn't need "use server" for this at all:

// app/routes/tea.jsx, a React Router route module
import { Form } from "react-router";
import { db } from "../db.js";

export async function loader({ params }) {
  return { reviews: await db.reviews.forTea(params.teaId) };
}

export async function action({ request, params }) {
  const formData = await request.formData();
  await db.reviews.add({ teaId: params.teaId, text: String(formData.get("text")) });
}

export default function Tea({ loaderData }) {
  return (
    <Form method="post">
      <textarea name="text" />
      <button>Post</button>
      <p>{loaderData.reviews.length} reviews</p>
    </Form>
  );
}

Lines 5 to 7 are the route's loader, which reads the reviews on the server. Lines 9 to 12 are its action, which runs on the server when the <Form> on line 16 is submitted. After every action, React Router calls the page's loaders again, so line 19's count is fresh without any revalidation call (the Routing lesson met loaders). React Router also has a mode with Server Components and "use server", which its docs still called experimental in October 2026.

A review form, end to end

Here is everything together: a form whose action is a Server Function, which reads the signed-in user, checks every field on the server, returns errors with what was typed, and saves the review. Press Post review with nothing filled in first:

1import { useActionState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { postReview } = server;6const blank = { errors: {}, values: {} };7 8export default function App() {9  const [state, formAction, isPending] = useActionState(postReview, blank);10 11  return (12    <>13      <form action={formAction}>14        <label>15          Stars <input name="stars" size="2" defaultValue={state.values.stars} />16        </label>17        <input name="text" aria-label="Review" placeholder="Your review" defaultValue={state.values.text} />18        <button disabled={isPending}>{isPending ? "Posting…" : "Post review"}</button>19      </form>20      {state.errors.form && <p className="error">{state.errors.form}</p>}21      {state.errors.stars && <p className="error">{state.errors.stars}</p>}22      {state.errors.text && <p className="error">{state.errors.text}</p>}23      {state.message && <p>{state.message}</p>}24      <NetworkLog />25    </>26  );27}

In actions.js, line 4 stands in for the session a framework reads from a cookie, and line 8 refuses anyone signed out. Line 9 reads both fields as strings, whatever the browser sent. Lines 12 and 13 check them, and line 14 returns the errors with the values. Only valid reviews reach line 15. In App.jsx, lines 15 and 17 put the values back as defaults, and lines 20 to 23 show the errors and the thanks.

Empty, the page says Pick 1 to 5 stars. and Write at least 10 characters. Type 9 stars and Lovely and fresh.: only the stars error is left, and your review is still in its box. Change it to 4 stars: Thanks, Asha! Review 1 is up. Then press Edit & run, open actions.js, and change line 4 to { user: null }: every post now says Sign in first.

Browser checks, like required or min, still help: they answer at once, with no request. But they run in the browser, so the server checks again. Sort what a Server Function gets by where it comes from:

Common mix-ups

• "The browser downloads the Server Function's code." No. It gets a reference with an id. The code, and anything it imports, stays on the server.
• "Hiding the button keeps the function safe." No. Anyone can send the request without the button. Check the user and the input inside the function.
• "Any value can be an argument." No. Only values React can write as text and rebuild: not functions from the browser, class instances, or events.
• "'use server' marks a Server Component." No. It marks functions the browser may call. Server Components need no directive; "use client" marks the other kind.
• "Server Functions are a good way to read data." Not usually. They're designed for changes; frameworks run them one at a time and don't cache their answers.
• "Server Actions and Server Functions are different features." No. Server Function is the general name since September 2024; a Server Action is one used as an action.

Practice exercises

Each exercise runs with the same pretend framework, in the framework.js and network.jsx tabs, and its Server Functions are in the actions.js tab. Try a guess first, then use the hints.

1import { startTransition } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { addToCart } = server;6 7export default function App() {8  return (9    <>10      <button onClick={() => startTransition(() => addToCart("chai", 3))}>Add chai</button>11      <NetworkLog />12    </>13  );14}

1import { startTransition } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { addToCart } = server;6 7export default function App() {8  return (9    <>10      <button onClick={() => startTransition(() => addToCart("chai", 3))}>Add chai</button>11      <NetworkLog />12    </>13  );14}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { addToCart } = server;6 7export default function App() {8  const [message, setMessage] = useState("Nothing added yet.");9 10  function add(teaId) {11    startTransition(async () => {12      try {13        const result = await addToCart(teaId, 1);14        startTransition(() => setMessage(`${result.teaId}: ${result.cups} cup`));15      } catch (error) {16        startTransition(() => setMessage(`Failed: ${error.message.split(".")[0]}.`));17      }18    });19  }20 21  return (22    <>23      <button onClick={add}>Add mint</button>24      <p>{message}</p>25      <NetworkLog />26    </>27  );28}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { addToCart } = server;6 7export default function App() {8  const [message, setMessage] = useState("Nothing added yet.");9 10  function add(teaId) {11    startTransition(async () => {12      try {13        const result = await addToCart(teaId, 1);14        startTransition(() => setMessage(`${result.teaId}: ${result.cups} cup`));15      } catch (error) {16        startTransition(() => setMessage(`Failed: ${error.message.split(".")[0]}.`));17      }18    });19  }20 21  return (22    <>23      <button onClick={() => add("mint")}>Add mint</button>24      <p>{message}</p>25      <NetworkLog />26    </>27  );28}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { toggleSaved } = server;6 7export default function App() {8  const [saved, setSaved] = useState([]);9 10  function save() {11    startTransition(async () => {12      const list = await toggleSaved("chai");13      startTransition(() => setSaved(list));14    });15  }16 17  return (18    <>19      <button onClick={save}>Save chai</button>20      <p>Saved for later: {saved.join(", ") || "nothing yet"}</p>21      <NetworkLog />22    </>23  );24}

1import { useState, useTransition } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { toggleSaved } = server;6 7export default function App() {8  const [saved, setSaved] = useState([]);9  const [isPending, startTransition] = useTransition();10 11  function save() {12    startTransition(async () => {13      const list = await toggleSaved("chai");14      startTransition(() => setSaved(list));15    });16  }17 18  return (19    <>20      <button onClick={save} disabled={isPending}>21        {isPending ? "Saving…" : "Save chai"}22      </button>23      <p>Saved for later: {saved.join(", ") || "nothing yet"}</p>24      <NetworkLog />25    </>26  );27}

1import { useActionState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { joinClub } = server;6 7export default function App() {8  const [state, formAction] = useActionState(joinClub, { message: "", email: "" });9 10  return (11    <>12      <form action={formAction}>13        <input name="email" aria-label="Email" defaultValue={state.email} />14        <button>Join the tea club</button>15      </form>16      <p>{state.message}</p>17      <NetworkLog />18    </>19  );20}

1import { useActionState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { joinClub } = server;6 7export default function App() {8  const [state, formAction] = useActionState(joinClub, { message: "", email: "" });9 10  return (11    <>12      <form action={formAction}>13        <input name="email" aria-label="Email" defaultValue={state.email} />14        <button>Join the tea club</button>15      </form>16      <p>{state.message}</p>17      <NetworkLog />18    </>19  );20}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { deleteReview } = server;6 7export default function App() {8  const [answer, setAnswer] = useState(null);9 10  function send(reviewId) {11    startTransition(async () => {12      const result = await deleteReview(reviewId);13      startTransition(() => setAnswer(result));14    });15  }16 17  return (18    <>19      <div className="row">20        <button onClick={() => send("r1")}>Delete my review (r1)</button>21        <button onClick={() => send("r2")}>Send what a script could: r2</button>22      </div>23      {answer && <p>{answer.error ?? "Deleted."} Reviews left: {answer.left.join(", ") || "none"}</p>}24      <NetworkLog />25    </>26  );27}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { deleteReview } = server;6 7export default function App() {8  const [answer, setAnswer] = useState(null);9 10  function send(reviewId) {11    startTransition(async () => {12      const result = await deleteReview(reviewId);13      startTransition(() => setAnswer(result));14    });15  }16 17  return (18    <>19      <div className="row">20        <button onClick={() => send("r1")}>Delete my review (r1)</button>21        <button onClick={() => send("r2")}>Send what a script could: r2</button>22      </div>23      {answer && <p>{answer.error ?? "Deleted."} Reviews left: {answer.left.join(", ") || "none"}</p>}24      <NetworkLog />25    </>26  );27}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { rateTea } = server;6 7export default function App() {8  const [message, setMessage] = useState("");9 10  function rate(stars) {11    startTransition(async () => {12      const result = await rateTea("mint", stars);13      startTransition(() => setMessage(result.message));14    });15  }16 17  return (18    <>19      <div className="row">20        <button onClick={() => rate(4)}>Rate 4 stars</button>21        <button onClick={() => rate(50)}>Send what a script could: 50</button>22      </div>23      <p>{message}</p>24      <NetworkLog />25    </>26  );27}

1import { startTransition, useState } from "react";2import { server } from "./framework.js";3import { NetworkLog } from "./network.jsx";4 5const { rateTea } = server;6 7export default function App() {8  const [message, setMessage] = useState("");9 10  function rate(stars) {11    startTransition(async () => {12      const result = await rateTea("mint", stars);13      startTransition(() => setMessage(result.message));14    });15  }16 17  return (18    <>19      <div className="row">20        <button onClick={() => rate(4)}>Rate 4 stars</button>21        <button onClick={() => rate(50)}>Send what a script could: 50</button>22      </div>23      <p>{message}</p>24      <NetworkLog />25    </>26  );27}

Check your understanding

For each question, ask what the browser has (a reference and the arguments) and what the server has (the code, the session, the database).

Key takeaways

• A Server Function is an async function marked with "use server", at the top of a file or of a function in a Server Component. It runs on the server and can be called from the browser.
• The browser gets a reference with an id. A call sends a POST with the arguments, written as text by React; the server runs the function and sends back the result. Only values React can write down can travel.
• As a form's action, with useActionState, it gets (previousState, formData), and the form works before JavaScript loads. From an event handler, call it in startTransition.
• Every Server Function is a public endpoint. Check who is signed in, check every argument and captured value, check permission, and return only what the page needs.
• Frameworks refresh data after a change: Next.js with revalidatePath and friends, React Router by reloading its loaders.

Coming next: React frameworks. Server Functions, Server Components and streaming all need a framework; that lesson compares Next.js, React Router, TanStack Start and Expo, and when Vite alone is enough.