React Server Components: Form Actions + Server Actions

Doing great. We are, right about to head out to Miami tomorrow, Westside. I don't know when you're heading out, but my family's heading out there, and we're bringing the whole crew along. So, hey, I'm stoked. We've never been. I'm sure the kids are gonna have a blast going to museums and whatever they're gonna be off doing. But you and I are gonna be at React Miami, which by the time you're hearing this JS long and gone, but pretty stoked to be out there. So, yeah, excited.

JS nation.

I'm doing, React Miami and then potentially doing another one. We're gonna see if I can make it out to Utah. There's 1 in a parks Park City at React Rally.

So I'm Oh, yeah. Gonna see if I can do that or not. But yeah. And in November, we are going to be in New York City doing, another live syntax as well. So Yeah. And potentially another something else as well. Pretty stacked. It's gonna be pretty fun. And if you are, you know, sending data back and forth, you're, you know, working with forms, you're working with data of any kind. Sometimes that that transmission, whether that is via the UI or the server, you know, these lines are getting blurred, and your tools really need to get blurred as well. And that's why we use something called a Sentry, which is what the show is presented by, to track all of our data and how it works inside of our app. We look for slow queries. We look for slow routes. We look for slow form events and those types of things. And we're able to track at any given point if something went wrong in that process regardless if it was happening on the server or the client or that kind of fuzzy area in between that now exists given how these tools work. So if you want error handling, exception handling, all kinds of, instant replay bug finding tools, Head on over to century.ioforward/syntax ESLint up and get 2 months for free.

Alright, Wes. Form actions.

I don't know that much about React Vercel components beyond what we've talked about.

I get the general vibe. And in fact, go back and listen to episode number 718. That's, syntax.fmforward/718 if you wanna learn more about React Vercel components in general.

But, you know, working with data is a big part of these things. Most websites, what they do, they load data.

They allow you to interact with the site.

And many times when you're interacting with the site, you're sending data back to the server, then data comes from the server back to the ESLint. And that whole process is something you do a 100 times. You know? If if you're building anything, you do that a lot Yeah. Especially if it's interactive.

So I'm interested to hear exactly how form actions in React Vercel components compared to the things that I'm familiar with, but also, how they make my life easier.

vanilla React JS well as all the the the frameworks that are out there. So And a a question with that, though, Wes. Yeah. When you say vanilla React in this regard, what is the server component there in a vanilla React app in 2024?

the component as in, like, a React component, but, like, what is the server

but it's, again, it's still early days for that type of thing. That's the hardest part for me with any of this is when we're saying this is in Vanilla React. It's like, what is the server there? The I wonder if there ever becomes a point, which I kind of doubt at this point, but, like and we got all this React server stuff. Would React ever ship their own server?

Yeah. And and that was even the 1st time I saw anything like that was in Remix, and I I I remember trying those types of things and just being like, yes. This is what I've wanted. You know? Yeah. I I'm used to calling Mongo commands from the client in Meteor. So for me, like, our PC feels very great, and I know that some people feel skeptical because they they have been working in a a different flow for so long. But there's definitely a lot of just generally nice things that can come about, especially if your client and server are a little bit more, like, I wanna say tightly coupled. You know? For a little while, we swung into this world where everybody's blog had its own API. And, like, hey. If there's not, like, multiple things consuming your API, why do you have an API that so tightly, Wes so, you know, not coupled to your to your UI? Is that ever going to be a thing you'll actually need?

Word. I I have a question. Can you use these things outside of a server component? Can these be done in a client component? Oh, yeah.

And I do wanna say, I think this may be a thing even more in the React world than outside of it. Mhmm. Forms.

Forms are a key component. If you're sending data around, hey, man. Forms. I I know a lot of React folks just use buttons or even worse like a DIV. Click send an event because it's easy. You Node, just send a fetch with a a button or something like that. But, hey, forms are forms are great. And, if your page is server side rendered and you have a form, it will still work. Yes. It's it's beautiful,

Yeah. Back to the, back to the web. You know?

actions. Actions. Alright. And actions are functions. I'm laughing because the episode title form actions and server So I was

It's a huge missed opportunity to not call them reactions.

I mean Oh. Come on.

Yeah. And that's really great because the alternative for that is you create your own state variable.

You set it to loading JS equal to true, right, when you click that Yes. That form, and then you said loading is equal to false on the state whenever it's returned. So this just gives you a nice little helper Sanity handy little bit for that. You know, one thing I really do love about this flow is the error message validation stuff Because, you know, one of the things that working with forms, bad UX, people don't get right all the time.

Form error messages validation.

You Node, something went wrong in the server process returned, and maybe the form isn't responding the correct way. This makes it so easy to get that right because JS all you have to do is make sure your your server returns a proper error message with whatever you want to say, and your forms become super reusable because you can have a if error, check for error message, just display the error. I do this all the time in in Svelte form action. So, you know, I I think this is a big win for a lot of, like, easy accessibility.

Yeah.

Hey. More more info is not not a problem, but yeah. Yeah. Yeah.

Yeah. That that I think that, like you mentioned, just moving them to a separate file is probably for the best. I know people will colocate and that will be a thing. But that makes a lot of sense in terms of organization and making sure you're not leaking anything. I Node that's a concern.

One thing that really bugs me is when people talk about this stuff in the context of PHP, and they're like, well, this is just PHP. It's like, well, call me when PHP is a client side scripting language as well because it's really giving us the best parts of PHP without,

Yeah. So Optimistic UI is you know, the word optimistic here comes from the fact that you are optimistically thinking that this server side action that you're doing will be successful. Right? So let's say you are you you have, like, a to do list. You submit that to do list in an ideal situation that to do typically goes to the server, gets loaded in the database, and then that gets populated probably into your UI, like a typical to do list. Right? It would pop up and and, you know, that server process can take some time. There's a round trip there, and users are you know, when they click something and it doesn't happen instantly, your users might try to click it again. That might think your app is broken. Your app is gonna feel slow. On a bad network, that's going to take even longer, and it's going to feel bad.

So optimistic UI is the process of saying, hey.

I feel like this thing is going to succeed, and, therefore, I'm going to update the UI immediately with the success state. So even without getting the server database storage of that to do was successful, you're still populating that to do into your UI instantly.

Therefore, the UI feels very snappy.

And in a situation where that would then fail, you gotta handle that. So it would remove it from the UI or it would give an error message. There's various ways to handle that. But, basically, the optimistic part of this whole thing is that you're handling your UI as if your server calls optimistically are going through.

a failure, then they'll show some sort of UI to you. But Or maybe it tries again. Wes. Yeah. Yeah. Yeah. Yeah. Retry as well. Yeah. We do this in my habit tracker because that was a whole thing. You'd click it, and on a network conditions that weren't great, it wouldn't necessarily even look like it was clicked. And you might click it again. That causes a whole host of issues. So, yeah, optimistic UI, it it really helps your applications.

It's like cheating to feel faster. It's a a great technique. Yeah.

That was something that Apollo did really well. Yes. For GraphQL. They had nice docs for optimistic rollbacks.

I've done that myself, but Yeah. It's kind of a tricky, UX thing in general because of what you do. You pop it out of the ESLint. You resubmit. Like, there are UX considerations there that I think are a little bit more,

Yeah. You know, there's you could do it different ways. Like, you could push into an array instead of just grabbing a whole new array of data. I think grabbing a whole new array of data is fine. But, yeah, we're just doing we're just invalidating the page or that specific data

the list of items that are on that specific page, and that API is is pretty slick. Yeah. Yeah. And it it's you're right. That's 90% of the time what you're gonna maybe 99% of the time what you're gonna be doing here. So cool. Well, that that was super informative. You Node? I think this sort of world where we're talking about actions, whether that, you know, is the the Remix flavor of it, the Svelte flavor of it, or now the React Vercel components or React flavor of it is the right direction for me. This is the direction that I have been waiting for. And React for, I think, for a long time, it's kind of been on the we're making things hard for you kind of position for a lot of this, especially in regards to form handling and things like that. So for me, this is a step in the right direction for React. It's making something easier for me. Yeah. That's that's where I wanna be in React land. I want it I want it to get easier because hey. We we have powerful tools. Now let's make these powerful tools, friendlier tools.

Yeah. We are headed to over well, we're headed to Amsterdam, and we're going to Florence and stuff because I'm I'm speaking over there. And so we're doing a little bit of a a 2 week vacation to bounce around Europe for a little bit. And one thing, when you have kids, you have car seats.

How are you gonna do that with, kids in car seats? Well, that's not going to work very Wes. So we got these inflatable car seats, Wes. They're good. They're like booster chairs. Our kids are old enough for booster chairs, so they're not like the car seat that you put a 2 year old in. Yeah. Yep. Yeah. I'm calling it a car seat, but it's a booster seat because our kids have graduated to those. But you have an inflatable booster seat. How you gonna blow this thing up? Well, Courtney got these little miniature air this little miniature air pump. It's tiny.

It's this little Tolinski little air pump. And I have, like, a a portable air pump that's about this big that's USB powered. But this thing is literally, like, this big. And, it has a built in battery, so you charge it up and it can blow up an air mattress and all kinds of stuff. But specifically for us, we're gonna be using it if we're renting a car or maybe we're even taking a taxi or something.

We need to be able to quickly inflate these booster seats, deflate them, whatever.

And it's just a little $23 little air pump. What a Wes what a wild world.

I just remember, like, you'd be, like, pumping it by hand. We'd be you know? But, yeah, this tiny little pump is is really pretty amazing. We gave it a try last night for the 1st time and really stoked about it. So, check it out. It's a tiny portable ultra mini air pump.

Yeah. Also, I don't necessarily know how capture cards work. I I had no idea you would have done anything, like, affecting color, but I guess that's why you do not go with the cheapos.

Work. Cool. Well, I I like this. You know, I I have 1 cam link 4 k and 1 cam link that's, like, a 1000000000 years old. So maybe I should upgrade my non four k one to, something that does 4 k as well considering camera size. So yeah.

No. Thanks so much, Wes. I thought this was really, really super great. Yeah. I I look forward to giving all this stuff a rip.