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

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

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

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.

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

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

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

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.

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

Great find

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.

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

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

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.

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.

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?

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

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

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

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.

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

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