Non-Form Server Actions

[00:00:00]
>> Scott Moss: Now we're gonna, basically, do some CRUD, right? We're gonna use a server action, very similar to kind of what we did with the form, but outside of a form. With a form action, we let the form kind of handle everything, what we now need to do, we need to cause some mutations on the server.

[00:00:14]
In this case, we wanna create an event, and we need that to come back full circle. We wanna see the event pop up on the page after we create it, without having to go through some type of client implementation, which is fine, but we're gonna show you how to do it without that.

[00:00:29]
So that's what we're gonna do, but first, let's kinda talk about it, so you can use server actions onClick. So far, we've only used them on an action prop on a form, but you can pass them to an onClick. And if you're using it onClick, that means you're inside of a client component.

[00:00:45]
So that means yes, you can use server actions inside of client components. That's one of their best use cases, in fact, I think we had to do that with the form regardless. So, an example of that is having a button that has a click. And instead of calling some function that you created in that component that does an awaited fetch, you can just import that server action file, and call that.

[00:01:14]
And it'll do the thing on the server, you can also await the result of that server action call and get the result from it, too. So the result can be passed back to the client as long as it's serializable, because it has to pass through the network threshold.

[00:01:30]
But that's that's not unique to server actions, that's just HTTP in general. So trying to serialize something circular, or dates, serializing dates are hard. So that might feel they're trying to, I think I saw a POST request, I can't remember who's trying, React is trying to patch the date object, so it better serializes.

[00:01:53]
Because people keep running into this issue of trying to send dates over the network, and it just breaks. But a lot of people are downvoting it, so maybe never. You can also use server actions inside of useEffects. So if you have a useEffects, where you would typically call your API function to do something, you can call your server action instead.

[00:02:15]
It also works there as well. It pretty much works everywhere you would have called some asynchronous function in your client. It's gonna work there, for the most part.
>> Scott Moss: Now, we had some stuff with the form, when, basically, we can use useFormStatus hook. That as long as the component that had that hook was a child of a form that used the form state, we would get a property that told us whether or not it was pending, so we can get the status of that.

[00:02:50]
So how do we get the status of a server action that's not part of a form? Well, that's where useTransition comes from. So useTransition, the best way I can describe useTransition is,
>> Scott Moss: It's kinda like useState, except useState, when you call it, it will re-render. useState is basically saying, hey, re-render this component.

[00:03:13]
That's what useState is saying, right? When you call, for instance, if I call setTab here, that's gonna re-render this whole component, that's the whole point. But with useTransition, when you call startTransition, it basically is saying, hey, I don't want this, which normally does call some blocking on the UI.

[00:03:35]
I don't want that to actually affect the UI. Still update the state, still do the thing, just don't mess with the UI, right? I still want the user to be able to click around and do stuff, I don't want the UI to be interrupted by this. So in some examples, you would want that, in this example, I talk about tabs.

[00:03:53]
I actually ripped this straight from the documentations, I thought it was pretty good. So in a tab interface, switching tabs might fetch new data for each tab. Using the useTransition ensures that the UI remains responsive, even if the data fetch is slow. So if you hit another tab, and it takes forever to get the data back, your user won't be able to click on anything.

[00:04:12]
[LAUGH] They have to wait for it to come back, but with the useTransition, they can still click around. They can go back to another tab, they can keep going, and it's still loading in the background, it's not gonna affect anything. So it's quite useful. So it's pretty cool, so we will be using that to make some non-blocking updates on our event, so let's do that.