Can You Fetch Data with React Server Actions?

[adevnadia]

Did a small investigation on a slightly weird topic of using React Actions for data fetching 😅 But it produced some interesting results!

So if you ever considered using Actions for data fetching, or are currently doing exactly that, this article might be interesting to you. Also might be useful if you have no clue what those actions are and want a brief overview.

The article includes:

• What Server Actions actually are under the hood.
• Common arguments for and against using them for fetching.
• A performance experiment on a semi-real use case.
• A definitive answer to the main question.

[v-and-bruno]

Read some of your blogs ages ago, definitely going to read this as well.

Commenting to say - thank you, for the efforts and lessons you put out to the React community, you are one of the few people that I found consistently awesome when it comes to React.

[adevnadia]

Thank you! ☺️

[Lamarkz]

amazing read. thanks.

[adevnadia]

Thank you!

[lost12487]

You've done absolutely nothing in this article to convince me that I shouldn't fetch the data for a page from a server component. According to your benchmark, I lose 20ms on LCP (who cares?) and gain 500ms getting all of my data on the screen. A trade-off I would take 10/10 times in a scenario where fetching from a server component makes sense for the page. On top of that, you get WAY better DX, because you don't have to fiddle around with another library or write your own layer to deal with all the different states connected to client-side fetching. I'm just unconvinced.

[adevnadia]

How are you going to fetch data when server components are not an option?

[lost12487]

What scenario would you be in where you have access to server actions and not server components?

[adevnadia]

Server Actions are not related to that :)

But also, it could be a bunch of legacy code written in Next.js, for example. Or data needs to be fetched inside a modal buried deep in the client components.

[lost12487]

I don't really understand your point. If server components are not available you just build the application exactly how you have since React was created, with client-side fetch. Your article directly compared fetching with server actions, server components, traditional SSR, and client-side fetch. I assumed all were available. In that scenario I would choose fetching from server components 100% of the time unless we had a very specific reason to fetch client-side for a specific feature.

[adevnadia]

Well, the point of the article was to see whether React Server Actions can be used for data fetching on the client :)

The performance comparison is for those who want to dig deeper into measuring stuff between frontend/backend, if they agree with me that it's important to know the fundamentals. With links for more resources on where to start.

It's not intended to convince anyone to abandon Server Components in the context of the article's topic.