Parallel server actions?
Unanswered
Whiteleg shrimp posted this in #help-forum
Whiteleg shrimpOP
Does anyone know if there are any plans from the react team of making server actions run in parallel instead of sequentially?
12 Replies
American black bear
Well I don't know if you are asking about awaiting two requests at once or how the next.js server handles them but you can do something like this:
import { Post } from "~/src/components/post"
import { getUser } from "~/src/app/actions/user"
import { getPosts } from "~/src/app/actions/post"
export async function HomePage() {
// this runs the requests in parallel unlike code below
const [user, posts ] = await Promise.all([getUser(), getPosts()]);
// below code does not run in parallel and would be slower
/*
const user = await getUser()
const posts = await getPosts()
*/
return (
<main>
<div>{user.username}</div>
<div>
{
posts.map((post) => <Post post={post} />)
}
</div>
</main>
)
}
@American black bear Well I don't know if you are asking about awaiting two requests at once or how the next.js server handles them but you can do something like this:
tsx
import { Post } from "~/src/components/post"
import { getUser } from "~/src/app/actions/user"
import { getPosts } from "~/src/app/actions/post"
export async function HomePage() {
// this runs the requests in parallel unlike code below
const [user, posts ] = await Promise.all([getUser(), getPosts()]);
// below code does not run in parallel and would be slower
/*
const user = await getUser()
const posts = await getPosts()
*/
return (
<main>
<div>{user.username}</div>
<div>
{
posts.map((post) => <Post post={post} />)
}
</div>
</main>
)
}
Whiteleg shrimpOP
Yes, I know you can do that. I mean, running 2 server actions from the client in parallel, no from a server component
@American black bear Well I don't know if you are asking about awaiting two requests at once or how the next.js server handles them but you can do something like this:
tsx
import { Post } from "~/src/components/post"
import { getUser } from "~/src/app/actions/user"
import { getPosts } from "~/src/app/actions/post"
export async function HomePage() {
// this runs the requests in parallel unlike code below
const [user, posts ] = await Promise.all([getUser(), getPosts()]);
// below code does not run in parallel and would be slower
/*
const user = await getUser()
const posts = await getPosts()
*/
return (
<main>
<div>{user.username}</div>
<div>
{
posts.map((post) => <Post post={post} />)
}
</div>
</main>
)
}
Asian black bear
If this was a client component it still wouldn't allow you to parallelize server actions using
Promise.all
or Promise.allSettled
. It's a technical restriction at the moment that server actions run in sequence no matter how you call them. Also, Promise.all
does run concurrently on Node, not in parallel.Whiteleg shrimpOP
This is the closest I can get, and it works
I wonder if the react team plans to make running them in a non-sequential order?
I don’t think this is a React limitation, I believe it’s rather a Next.js limitation, according to what the [React docs say](https://react.dev/reference/rsc/use-server#caveats):
They talk about “frameworks implementating” them, not React itself being the issue.
Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
They talk about “frameworks implementating” them, not React itself being the issue.
Southern rough shrimp
How come 'server actions are just api routes but closer to the developer', but then 'not parallel unlike api routes'
@LuisLl I don’t think this is a React limitation, I believe it’s rather a Next.js limitation, according to what the [React docs say](<https://react.dev/reference/rsc/use-server#caveats>):
> Accordingly, frameworks implementing Server Functions typically process one action at a time and do not have a way to cache the return value.
They talk about “frameworks implementating” them, not React itself being the issue.
Whiteleg shrimpOP
I didn't know each framework was responsible of the server action implementation. I thought it was something that came already built in react. Good to know, thanks
Original message was deleted
Asian black bear
Don't be rude and ping random mods.
@Asian black bear Don't be rude and ping random mods.
Atlantic menhaden
"and spamming"
slight error