Server Actions in next.js seem to be running in 'series'

Question

I have a next.js app which needs to make 5 requests to an external resource (only accessible on the server side), so from the 'client' component, when the user clicks a button, I use the async pattern to make the 5 calls, and deal with the response. However, I'm finding that even though I'm using promises, the server side seems to queue these server actions.

I've had a look through the documentation about server actions/functions, and don't see any mention of there being a limit of one call at a time.

I have created a simple next.js app to demonstrate this.

serverFunctions.js

"use server"

// Wait for 5 seconds, only called on server
export async function ServerDelay(index) {
    console.log(`calling ${index} ` + new Date().toLocaleTimeString())
    return new Promise(resolve => {
        setInterval(() => {
            resolve({'index': index, 'time': new Date().toLocaleTimeString()})
        }, 5000)
    })
}

// Call both 5 second delays from the server
export async function launchOnServer() {
    ServerDelay(1).then(x => {console.log(x)})
    ServerDelay(2).then(x => {console.log(x)})
}

page.js

"use client"

import {ServerDelay, launchOnServer} from "./serverFunctions";

export async function ClientDelay(index) {
  console.log(`calling ${index} ` + new Date().toLocaleTimeString())
  return new Promise(resolve => {
    setInterval(() => {
      resolve({'index': index, 'time': new Date().toLocaleTimeString()})
    }, 5000)
  })
}

// Calls the 'delay' function on the server with two server requests
function launchSeparately() {
  ServerDelay(1).then(x => {console.log(x)})
  ServerDelay(2).then(x => {console.log(x)})
}

// Calls the delay locally on the client without touching the server-side component
function clientLaunch() {
  ClientDelay(1).then(x => {console.log(x)})
  ClientDelay(2).then(x => {console.log(x)})
}

// This makes a single 'server' request, which then makes the two calls from the server side
function launchBoth() {
  launchOnServer()
}

export default function Home() {
  return <div>
    <button onClick={launchSeparately}>Multiple Server Requests</button><br></br><br></br>
    <button onClick={launchBoth}>Single Server Requests</button><br></br><br></br>
    <button onClick={clientLaunch}>Client Request</button>
  </div>
}

If I click the Multiple Server Request button, the server terminal window shows the following...

calling 1 10:06:38
 POST / 200 in 5079ms
calling 2 10:06:43
 POST / 200 in 5033ms

And the browser console shows..

So, as you can see, the server doesn't receive the 2nd call until the 1st is finished, and the whole process takes 10 seconds.

If I click either of the other buttons, i.e. both running on the client, or both running on the server, the Delays run at the same time, and return at the same time, taking just 5 seconds.

i.e. on the Single Server Request button, it shows this on the server..

calling 1 10:13:02
calling 2 10:13:02
 POST / 200 in 24ms
{ index: 1, time: '10:13:07' }
{ index: 2, time: '10:13:07' }

And similar when everything runs on the client

I realise that I can re-factor my code to pass 5 URLs or whatever to the server side, and control execution there, but I'm really hoping I'm just missing something, and there's a setting somewhere to allow multiple server actions/functions to happen at the same time.

Answer 1

Unfortunately, there’s yet another problem with server actions: they run serially. Only one server action can be in flight at a time; they’ll queue if you try to violate this constraint. link