Why are Server Actions not executing concurrently?

Question

Consider the following functions:

async function printAB() {
  console.log("A");
  await new Promise((resolve) => setTimeout(resolve, 1000));
  console.log("B");
}

async function f() {
  printAB();
  printAB();
}

the usual expected output of f() would be

A
A
B
B

as the console.log('A') statements can execute concurrently with the timeouts. Indeed, this is what we get if the functions are either both on the server (actions or defined in a server component) or both on the client. However, if printAB is a server action, and f is a function in a user component, we get

A
B
A
B

. Why does this happen? This behavior could cause lower performance if we use multiple actions at once, is there a way to avoid it?

Answer 1

from react.dev "use server" docs (emphasis mine):

Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value.

I still don't get why, and how it works in detail. Is this being done on the server side? Does that mean then if there's a lot of users, they won't be served in parallel by e.g. DB writes?

Answer 2

TLDR; If you need to handle multiple actions, then create a single server action to do this. Avoid calling multiple server actions in order within client code.

From react.dev's docs, we have two pieces of information that shed more light on the OP's question:

1. common caveats of server actions

Server Actions are designed for mutations that update server-side state

2. information on using server actions in client code

Server Actions are exposed server endpoints and can be called anywhere in client code.

These tells us one thing, contrary to how the OP may want to view it, when triggered via the client, each call to printAB is treated as a separate API call. This means that the execution of printAB as a function occurs on the server and not on the client, you therefore can't expect the same results you would if the functions were executed on the client.

As a result, triggering more than one printAB only causes the server endpoints to be called and when this occurs, we have the result the OP included just as below, but with more information:

// f is a client code
function f(){
printAB()
printAB()
}
...
// two requests are made, since f is client code

// 1st request
A (from first printAB)
B (from first printAB)
//timeout is invoked.

// 2nd request
A (from second printAB)
B (from second printAB)
//timeout is invoked.

Final words? I'll say one way to look at server actions is to treat every server action you create as an API endpoint of some sort and trigger only one action per mutation and While it's possible and allowed, avoid multiple action calls as you outlined in your question.