React Canary Introduces Server and Client Actions

React Canary has rolled out two significant features that developers should be eager to explore: Server Actions and Client Actions.

If you use Next.js you might have come across these experimental directives 'use server' and 'use client' who have been leveraging them before they got into the latest React Canary version.

If not, here's a little info:

Server Actions allow us to mark functions as serverside actions. This means we can now do operations that would have previously been separate from our components, such as data mutations or database queries within your components, and use them in your client code.

The announcement from React on X (link):

Server Actions are now in React Canary, ready for frameworks and libraries to adopt! Server Actions are functions created alongside your components that run on the server for tasks like data mutations

We also got Client Actions! These actions are tailored to facilitate asynchronous UI updates. They integrate and play well with Suspense and error boundaries, which should help create a smoother user experience.

The React team shared this CodeSandbox to try out the 'use client' directive:

With these directives, you can be more verbose in the behavior you are trying to achieve with your SSR React apps.

The docs are still a WIP, but you can check out the updates here.

Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.