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*
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses

[@dgcp354]

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

[@kazmi401]

I also do the same.

[@victorhenriquecollasanta4740]

me too

[@lyrical6852]

How to do that? you mean like this? const onSubmit = handleSubmit(formData=> { serverActionFunction(formData); }); ...

[@vichetnoeng706]

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

[@yassinebenazouz4529]

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

[@karan4345]

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.

[@JamesQQuick]

bahaha that's funny but a valuable lesson I guess

[@kenscode]

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

[@VincentFulco]

Great find

[@gravellife5643]

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.

[@NickWelsh4444]

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

[@JamesQQuick]

Nice! Love that!

[@xc1427]

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

[@christophkovacs]

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.

[@nicolasguillenc]

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

[@kassios]

That is a great use case that could be a video idea

[@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.

[@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?

[@heysahilsingh]

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

[@JamesQQuick]

Thanks! Yeah it's funny how not obvious it was that there are many more use cases!

[@nasko235679]

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.

[@alejandrobalderas2370]

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

[@coder_one]

Next has aggressive caching mechanism. Using tools like tanstack has no reason

[@leonarddugan5451]

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

[@jsantos1220]

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

[@JamesQQuick]

Nice! Seems like we are in a similar position!

[@vivekkaushik9508]

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.

[@kassios]

How would you handle events on a server side component? ‘Use client’ is obvious for user interactivity. Interactivity is the most clear separation between server and client components

[@heysahilsingh]

@@kassios You’re right;

[@alexnelson2119]

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

[@JamesQQuick]

Well for me, the example i always see is within a form. It just wasn't obvious you could do this in other places

[@alexnelson2119]

@@JamesQQuick An opportunity for Vercel to make this clearer in the docs for sure. Nice of you to point it out! Like others have mentioned, I barely use api routes anymore. Pro-tip, bust out useTransition and wrap your server action call in a startTransition for isPending state.

[@liu-river]

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