I Didn't Know Next.js Server Actions Could Do This!

There's more to Server Actions than I thought. I didn't know you could use a Server Actin outside of a form!

**Newsletter**

**DISCORD**

**QUESTIONS ABOUT MY SETUP**

[yassinebenazouz]

i accidentally tried this when the server actions first released and i was impressed. i never used the api folder after that accident x)

[karan]

This is so true. I accidentally called a function with 'use server' on button click. And I spent next hour finding why my API call is not visible in my network tab. Then eventually landed on next js docs and figured server action has more use cases than it was marketed for.

[dgcp]

i actually never used actions inside form action, i call the action inside on submit, etc

[NickWelsh]

Server actions are amazing! I've been using them with next-safe-action for end-to-end type safety.

[vichetnoeng]

I actually use Server-Action with React-Query straight, no need to create additional API Route.
It's amazing

[gorandigitalnomad]

I'm used server actions in my project for Slot Machines.
Every button(Spin, increase/decrease bet) calling server actions and calculate game on server, update game data in redis database and return win amount and new symbol indexes on slot reels.

[heysahilsingh]

The whole YouTube is filled with using server actions in form, come on, that’s not the only case. Thanks to you for making this video.

[TheMindfulCraftsman]

Yep we also changed our API route handlers to "inline" server actions and got rid of a lot of code. Was also wondering why this paragraph is not highlighted.

[xc]

I think vercel ai sdk leverages this feature. And you can return react component from the server action.

[nicolasguillenc]

You can also use it to validate the fields before submitting the form!

[leonarddugan]

Definitely not hidden. Since they became stable enough to actually use I haven’t written an api route once.

[kenscode]

Really cool, can't wait to try it out 😎💪

[treyrader]

yea i noticed it when i first read the docs, but i didn't think it was a common practice so I just mix actions with api endpoints to get shit done. I just try sticking to what's common I guess. still learning the ropes lol. Guess you are too?

[alejandrobalderas]

One very cool thing is combining tanstack query with server actions 🚀 … you can call a server action as a mutation function and forget about exposing api routes that do not necessarily need to be public

[RavenXplod]

I always assumed that server actions worked this way, so i never used form data becuz i dont like it, i just use server actions and send inputs values from use state into server actions like a parameters.

But one problem is that server actions can only return serialisable data, eg JSON but not blobs.

In the next documentation it says that they support returning arraybuffer but thats not the case.

So for just this use case i had to create an api endpoint to recieve a blob/binary data

But yeah server actions are super awesome and i use them everywhere for every server code and its not even button, you can call server action in useEffect also.

[nasko]

While fantastic on paper, calling an action from a button comes with it's own set of issues - mostly the issue of the client manipulating function parameters in a malicious way. Let's say I have a chat app and have an "add friend" button that executes an action which adds a friend request in my db and it takes 2 parameters - the user's username and the person they want to befriend's user name. How do I protect from the user changing their username and basically making a friend request on someone else's behalf? The answer is - you don't really. Only way is to fetch the user's username from an auth session and query the db and that can put an exponential load on your database especially if you're dealing with a lot of buttons in a dashboard/ friend's list type of page.

[alexnelson]

Bruh. How do people not know this? No wonder people still complain about app router. Server actions and RSC are the new meta.

[vivekkaushik]

My problem with this approach 'using server actions with event handlers' is that you've to mark the component as 'use client' which kinda defeats the whole point of using SSR and server actions. I've been struggling with this lately on how to fully leverage the SSR/RSC without invoking use client to handle events.

[liu-river]

How you only know this now, lol? You can throw it in a transition and get loading state too.

[jsantos]

HA!! i figure that the last week! hehe finally i did something before watching a tutorial