[19] s/"Server Action"/"Server Function"

[rickhanlonii]

Overview

This PRs re-names "Server Actions" to "Server Functions" in the docs starting in React 19.

If you review the changes here, you can actually see the reason this makes sense: Many of the calls to "use server" functions are not actions.

For example, this example from the Server "Action" docs is not an Action:

"use client";
import {createNote} from './actions';

function EmptyNote() {
  console.log(createNote);
  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
  <button onClick={() => createNote()} />
}

This is just calling a server function on click. Really, it should be converted to an Action for better UX.

What are Server Actions then

Server Actions are Server Functions used in an Action context. For example, there are three examples on the Server Function page in this PR that show:

• Using Server Functions with Actions
• Form Actions with Server Functions
• Server Functions with useActionState

Redirect

This change redirects links to "/server-action" to the 18 docs, which I'll add a callout for saying it's been renamed. We should also probably update the 19 blog post with a note about the name change.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
19-react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 29, 2024 5:15pm
react-dev	✅ Ready (Inspect)	Visit Preview		Sep 29, 2024 5:15pm

[sophiebits]

…are server components server functions

[slorber]

Just passing by to report some details that confused me a bit

---

On the v19 docs site there are still examples using createNoteAction while the function is not an action. Maybe it would be better to rename these as well?

---

Also wondering if there's a canonical place in docs that explains what are actions and server actions (as far as I understand an action is not always necessarily a server action? 🤔 )

It's explained in the v19 RC blog post:

But I'm not sure it's explained in the docs yet, or I couldn't find it.

Maybe having a docs page about the concept of action could be useful?

---

Overall I'm still a bit confused by what a Server Action is.

The way I see it, an async transition might call multiple server functions.

startTransition(async function myTransition() {
  await serverFn1();
  await serverFn2();
});

Here do we consider that serverFn1 and serverFn2 are server actions? But then what about serverFn1 being called outside transitions in other places? The same function gets 2 different names depending on call sites?

Or do we consider myTransition to be a server action? (but then it's somehow a "double server action"). Or it's only a server action if we add use server to it and we directly pass the endpoint to the transition?

I'm wondering if the concept of Server Action makes sense. Maybe there are just Server Functions, Actions, and then it's possible to call Server Functions from Actions and that's it?

[slorber]

Also wondered here why submitAction is async considering startTransition returns nothing

Is wrapping in transition necessary in this case when using <form action>? Isn't the function already an action?