I want you to read this article because as a front-end developer, I find this concept very interesting. So, here we are!
What are Server Actions?
Here's an example of how you might use server actions with Server Components:
And here's an example of how you might use server actions with Client Components:
Why Use Server Actions?
One of the key benefits of server actions is that they automatically create an endpoint for Next.js to use behind the scenes. This means you don't have to manually create an API endpoint every time you want to perform a server action.
How to Enable Server Actions?
By enabling the experimental serverActions flag in your next.config.js file, you can enable server actions in your Next.js project:
How to Define Server Actions?
Server actions can be defined in two places: inside the component that uses it (Server Components only), or in a separate file (Client and Server Components), for reusability. You can define multiple server actions in a single file.
Here's an example of how you might define a server action inside a Server Component:
And here's an example of how you might define a server action in a separate file:
How to Invoke Server Actions
You can invoke server actions in several ways:
Using action: React's action prop allows invoking a Server Action on a <form> element. Here's an example:
Using formAction: The formAction prop in React allows you to handle button>, input type="submit">, and input type="image"> components in a form>. The formAction prop takes precedence over the action of the form.
Custom Invocation with startTransition: Invoke Server Actions without using action or formAction by using startTransition. This method disables Progressive Enhancement.
React also provides some experimental hooks that can enhance the functionality of server actions.
useOptimistic: This experimental hook allows you to incorporate optimistic updates into your application. Optimistic updates improve the user experience by making the app appear more responsive.
useFormStatus: The experimental useFormStatus hook can be used within Form Actions, and provides the pending property.
React Server Components and Server Actions are two different concepts in the React ecosystem, each with its unique purposes and use cases.
React Server Components
React Server Components are a new type of component introduced by the React team. They allow you to write components that render on the server and then send the HTML response to the client. The main advantage of this approach is that it allows you to leverage the power of the server to do things that would be expensive or impossible for the client.
For example, you can access a database directly from a React Server Component, something that you wouldn't be able to do from a client-side component. This can lead to significant performance improvements, as you can avoid the need to send large amounts of data over the network.
Here's an example of a React Server Component:
Server Actions are particularly useful when you need to perform a data mutation in response to a user action. For example, you might use a Server Action to update a database when a user submits a form.
Here's an example of a Server Action:
In conclusion, while both React Server Components and Server Actions involve server-side operations, they serve different purposes. React Server Components are used for server-side rendering of components, while Server Actions are used for server-side data mutations.
Let us now discuss size constraints. The maximum size of the request body delivered to a Server Action is set to 1MB by default. This avoids sending enormous volumes of data to the server, which could use a lot of server resources to parse. You can, however, set this restriction using the experimental serverActionsBodySizeLimit option.
Server actions also allow for on-demand revalidation. This means that you can revalidate data on-demand by path or by cache tag. This is particularly useful when you want to ensure that your data is always up-to-date, without manually triggering a revalidation.
Finally, I want to mention a tool that I've found incredibly helpful when working with server actions: WiseGPT. It's a generative AI for React developers that writes code in your style without context limit. It also provides API integration by accepting Postman collection and supports extending UI in the VSCode itself. It's been a game-changer for me and I highly recommend checking it out.
That's all for today! I hope this post has given you a deeper understanding of server actions and how they can be used in frontend development. As always, happy coding!