Call api from useServer in nextjs14, apis are not called concurrently

[ducyb782001]

Hi @TkDodo , I'm now working with useServer in nextjs14 for calling external api. When calling from client-side, tanstack query is perfect. But when using use server, this api called is not concurrently. Each API is called sequentially, one is finished then the next. I don't know why and how to resolve it.

Here is my stackblizt: https://stackblitz.com/edit/stackblitz-starters-s5vflexj?file=app%2Fpage.tsx

Can anyone help me with this

[TkDodo]

server actions run in serial in nextJs. don’t use server actions for making queries.

[reqyo]

@TkDodo Omg this might be related to the loading bug I've been having. With React query, are you not able to call server actions directly? Only through a route handler with a fetch? And if not, if you prefetch, what then?

[TkDodo]

With React query, are you not able to call server actions directly?

this has nothing to do with react query, it’s how server actions are done in nextJs. You’ll get the same behaviour with calling the server action in useEffect.

[reqyo]

Ofcourse this makes total sense! So when using react query, how do you deal with calling a server action/component?

I guess you would have your top level server component, call you server function to get the initial data, then within your client components with react query, do you use a route handler with a fetch?

[TkDodo]

server actions are _not_for getting data, they are for updating data.

[reqyo]

@TkDodo honestly thanks for commenting this. The prefetching is what confuses me, in some videos I've watched about prefetching in next, they act like you can prefetch in the server component and then fetch at random in the client. I've been incredibly miss led. The docs don't really state what the functions here: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

What is the getPosts function? Is that a server function in both places? Because if it is this doesn't make sense.

I would expect now after what you just said, is that getPosts in the server component would be a server function. getPosts on the client would be some kind of route handler with a fetch call?

[TkDodo]

It used to not matter what getPosts is, as long as its a function that returns a Promise. It would be good to add a note to the docs that server actions shouldn’t be used for queries.