A Mental Model for Server Actions

Server Actions (or Server Functions) seem to be a constant source of confusion among the community. What can you do with them? What should you do with them? Is this or that correct? I have a simple trick to make them easier to reason about!

Think about why Server Actions got added to React. Improved developer experience is a big part of why people talk about them and I am sure that played a role in why the React Team built Server Actions, but the main reason for them being introduced, was as a new tool to make React Server Components easier to adopt.

If your entire component is static (i.e. RSC), it would be a shame to have to turn it into a client component, just because you have to send something to the server. It is my theory that Server Actions got added for this exact reason!

Instead of having to add a useMutation hook, we can just use the reliable (and always available) form element (or Form component) with a Server Action. Add a little bit of bundling magic and our feature is complete! The fact that Server Actions work without JavaScript isn't a happy accident, it was the main motivator for the feature.

Venturing into conspiracy theories: This is also why we haven't received a "Server Query", which could provide similar DX, but with optimizations for data fetching (you should not be fetching data with Server Actions).

So, when questioning your usage of a Server Action, you should always remember: This isn't some magical DX feature, but rather a performance-oriented addition!

Are you after DX? Reconsider. Are you after a smaller bundle? Consider.