Server & Form Actions Overview

[00:00:00]
>> Scott Moss: Let's dive into our first one. So, form actions, there's a lot to say here. There's a lot of pain on my side that I went through [LAUGH] using these when they first came out, but now we're on the other side and everything looks great. And API's have been formalized and settled, and there's tons of different use cases and patterns, and still more evolving every single day.

[00:00:24]
So, I'm more than excited to talk about form actions and how they work and next year. So, first, in order to understand that, you got to know what server components the server actions are. If you don't know what server components are from the intro course, or never really kind of thought about it.

[00:00:41]
There's a difference between a server component and server side rendering, right? Server side rendering is for, in the case of Next.js, it's literally for every single component. Every component is gonna be a server side rendered, whether it's a client component or a server component, it's always gonna be server side rendered unless you import it with the next dynamic.

[00:01:01]
Unless you lazy load it, basically, if you don't lazy load it, it's gonna be imported, it's gonna be rendered on the server. A server component is a component that gets executed on a server per route. So it's a slight difference, so rendering is basically like, I'm gonna take this, I'm gonna see if I can create a static version of this.

[00:01:20]
As in, I'm gonna see if I can output some HTML, let me see if I can create an HTML string for this. There's like a whole hydration step and things like that. Server component is basically like, every time someone hits this route, run this function, right? That function just happens to be a component, that's what a server component is.

[00:01:35]
So it's slightly different than server side rendering, which, depending on the component, could be an initial render, could be something that revalidates things like that. So, that's the difference there, I think people get confused about that because the naming, server component, server side rendering. Maybe to figure it out, the naming is really confusing.

[00:01:53]
Server action, so with a server component, you're able to, if you've used the app directory before, you know that you can make your components asynchronous. And you can do anything that you can do on the backend inside the component, so this means, like, accessing a database directly without having to go over the wire.

[00:02:10]
Literally accessing the file system if you wanted to, anything you can do on the back end you can do in that component asynchronously. And then, so they kind of just built that a little further and made another abstraction, which is something called a server action. You can think of a server action as like the equivalent of what you would have done for a post request.

[00:02:27]
So, typically like on a form, you unsubmit, you make a fetch to do a post request to some server to send the data up, you get the data back, and that's how you submit the form. Well, it's kinda eliminating that process of having to go over the wire, and instead, we can create a function on the server that gets executed when some action is triggered.

[00:02:48]
In this case, it'll be when a form is submitted. And that way we don't have to go over the wire, I mean, technically it's still going over the wire, but you'd have to make a route for it. So that's basically what a server action is, it's a function that runs on the server, that can be called on the client and it would trigger some logic.

[00:03:04]
And then there's like different ways to like handle it or stuff like that. We'll get into it, this is just the high level. Some of the other cool things about form actions is that it really simplifies how we manage each form's field. So, before you had to like, make a state for this field, eventually you probably just like made one object state and did that.

[00:03:24]
Eventually from there you would go install some form hook that someone made, and you would use that, and it's, cuz it's like managing state reform is quite complicated. Now we don't have to do that, I can't remember the last time I actually made a controlled input using this.

[00:03:40]
A controlled input is when you add the value of an input, and then you do like an on change, and then you feed that back into it. That's just the standard, but I don't remember the last time I did that, which feels great because it's so tedious setting that up, and you'll see why.

[00:03:55]
And then there's some other stuff in here that it doesn't really matter talking about. It's better just to show you, but basically there's some hooks in here that help us do what I just said as far as like, the form state, do optimistic updates, keeping track of changes, things like that.