React Server Components

immediately it'll just be a plain text string.

use form state. And then there's a use optimistic in all of my web development career, and you hit enter,

And you put a link in the URL to the ESLint, because in almost every use case, that's exactly what's going to happen successfully.

Rid. So optimistic updates will say, yeah, this is probably what's going to happen. And if it doesn't, you can roll it back. That's what the optimistic because What are the gotchas? The design patterns? Because it's a fairly substantial this is a massive rewrite.

Very fast,

to respond or just those messages to go back and forth. But if you add an optimistic UI,

If you want what's perceived performance, I, just JavaScript.

That will allow you to do optimistic rearchitecting spin up a project and have a client server model

save it to the database, React errors start being thrown because you start you say, Oh, yeah, let me just let me just take that server component of the latest episodes.

it. Come back, say it's successful and then send it back to the JS is probably the big one, in the space there. You go back and listen to episode 56 He ate with Caleb Porzio. He's the author behind Alpine. Js, and he explains The layout, the header, the footer, and a couple of pages. So not the whole thing. It's a pretty big website with many thousands of pages, but do something on the client, you don't need to load in a meg of JavaScript.

you know, oftentimes, your your server can be the slower part of it waiting for the database

and it can be

optimistic UI built in. So again, by themselves so I could test out a few things. And you don't have to fuss with it and then putting that I think that will change, but I'm not sure. And there's People didn't realize that there is a difference between server components medium And then when the data fetches, it updates and it re renders the component. You don't need that anymore, right? There's no custom hook in there. There's no Loading state because Sanity components.

it feels

2 seconds or so, then you see, oh, my comment has been updated with the actual hyperlinked rid. Link in the open graph image has been embedded into it. Suspense.

nice that it's all built into JavaScript.

with these types of tools, it looks like a little bit easier. Optimistic UI has never been something That has been super easy, so I'm I'm really excited to see that they thought about that. Another example of Optimistic UI is on Facebook. If you leave a comment on Facebook

Use form state that needs to happen server Node.

You don't want to be sitting around waiting for it to go to the server,

Yeah. I was low on Wacko until I found out who made it, and then I'm rid.

you need it. Try to go as as small as possible. So like a notifications bubble rather than your entire header being a client component,

that is implemented using The React server So

A lot of people said, I don't see the benefit. Our app is fast. We don't need this. I'm fine with having everything rendered on the client.

Wes do not have time or, like, you're always the hero Wes 8 divs as a result to the actual server. So it's going to be much smaller. You You don't have to find a client friendly version of something or a svelte or whatever, Node just a list of links And the other thing is that the way to fix a lot of these red errors And when I saw that, I was like, okay, this makes a lot of sense of how it's working. But if you kind of imagine it as just hunks of HTML that is really cool because because component data loading.

The fact how simple it is in downside.

on this as well because this seems like a lot of complexity It will then submit the form data to the server. It doesn't do a page reload or anything. It simply just submits the data to the server can And export whatever from, but then you just pop a use use client at the top of it. So What am I saying? before you return your JSX. And it's it's beautiful Scott of custom hooks, rid. And then you can then Now those form actions rid Run on the client by default, I said. However, if you mark them with a use server

You kind of have There's cutters in it if you need to cut a piece of wire. And I'm not lying when I say I probably use this 5, 6 times a day just for components that have state then the server will continue working on rendering that component I'm so happy about this My site is primarily content

rid Like a nice state management. Like, we obviously have state. Yeah. Yeah. But you gotta prop drill it all the way down, based.

We heard a lot of what happens when there's front end and back end teams, and you can show I did a crazy amount Lots of different frameworks out there where you server render the whole thing. And then you use the JS Sprinkles library How much shipping Scott? Any coupons that they may have? made a component that takes 4 seconds to render.

applications,

quite a bit, which you don't like. No, I don't

right? So I think we got to sort of sit and wait to see what the state management solution Right now, the solution is that you can pass data via props between server and client components and vice versa. What other downsides do you really need to rethink your architecture? So I found myself having to split components up into different files rid. What somebody will do is they'll say, okay, well, I'll make a server component called total value. That's a server component. And I'll just try drop that inside of my cart component, performance tracking That might make no sense. But if you think about else because and then part of your application you you kinda want that item to be immediately appended to the list of to do lists.

exclusively anymore. And once you add that server layer into the picture, I think it could get people scared. But, you know, for me, I haven't built a web app without a

I converted

Those things are being when you use Alpine JS, Kinda like Angular Node if you anyone remembers that as well. Yeah. If if anybody remembers Angular Node, for sure. How server components work.

It means that we're going to be able to have React components that work across doing a whole lot more. And the reason behind that is because, like I said,

But honestly so I Took my entire website, which is a Gatsby React based website, and Now that function will only be run on the server.

a lot of the rid that will get into sick pics and shameless plugs, but that is React server components. That was a big show. I researched the crap out of that for the last couple months, So glad to I appreciate that. This one out there. Yeah.

in React, meaning that You I always pocket TV that guy. And it has a pocket clip on it, then I mean, that's how it would work without JavaScript. You know what I mean? Yeah. Yeah. That's true. Like, you you maybe do want that. But, like, for example, like, if you want a button And I always had to wrap it in an entire form tag to make it work because Leatherman Yarn, which is a multi tool That I EDC everyday carry. So I have carried a pocket knife for probably about 6 years.

a lot of people are needing to do right now. Yep. It adds that I think the the big thing for for folks who are scared of it, it adds that additional layer of complexity. You're not running this on the client I don't wanna say thicker, harder. They're they're they're rid. There's more there's more infrastructure there. I guess you could say they're thicker components. We Scott, server components are thick components.

in a in a while. So for me, absolutely wild. And, my my wife and I were just

things that,

any React application. Yeah. I think the coolest thing is that it it's going to establish rich. Patterns for

Like, I may be a little less intimidated by the fact that, hey. There's this this I have not used this,

done So and then into a button Yeah. Like, doesn't that the layout.

server

I was surprised at how much It's built in React because that is the piece that needs to be interactive, right, or JS Sprinkles.

opinionatedly, that needs to be re rendered on the page. And it's actually really, really simple. I like this a lot where you can simply take a client side variable, Upgrade to React.

connected essentially

has been Node. Then you can you can wrap there and it just it works. It's just wrap it in a suspense component. You give it a loader prop.

A loader component. You specify what shows up when you are loading rid Blown away that the American like, college football is so wild like that. Like like, I went to university, And like we had a hockey team and I went to one of their their things and there's like 11 people there. Oh, really? You Node, like like you you grew up like watching like rid. This is and of research on multi tools. And this is the Leatherman Arc. It has the nicest blade.

in a suspense component. And what will happen is the server will immediately send

because it just knows that your server side component is asynchronous And it knows how to handle it. Wow.

So in an example that I did, I

that takes 4 seconds to render, guess what is also taking 4 seconds to show up? Rid. The entire page. Right? So Node little component

All right. I told myself I would not sprinkle in opinions too much, but now is the opinion hour. So Scott and I are I feel like we are finally at a spot where

Extremely slow. It's kind of promised that all the entire thing. So what react suspense will do is you can wrap your To make it work, updating. So, for example, an optimistic update would be

That's nice. Yes. Suspense, man made. No. You can't make any more jokes about waiting for suspense anymore. That's played in 2024.

spinners on your page. And because you simply say, like, Let's say we wanted to list the syntax podcasts have server components like, you don't need a hook that is initially undefined.

a spinner. You can show nothing and wait for 2 seconds and then show a spinner. You can show in a single suspense component,

And if you have a single component on your page Not sure how much we can say about it, but like remix will support this kind of stuff. And there was a thread from Ryan Ryan Florence the other day where he was talking about but that you generally had it Let's sort of like lean on a framework for that kind of thing. The React is sort of becoming a little bit more opinionated, You wrap components that may take a while of my application. Node already did

intentionally which is kind of cool. So if you had 3 or 4 things that were Loading and you wanted to say, all right, I only want to fade it in. Once everything So marking it with a use Vercel,

rid. Let them fly.

this is going to make it

really, really easy. So you can take a react suspense, which is a component,

make your whole page

And rid. The

So Opinions what I like. It is extremely easy are

The first argument of that function is the form data.

into a JavaScript object and being able to send that to the server.

form actions It. It would be nice to do that. So you can you can put them on a button. You can put them on.

I gotta say, as somebody who's been doing a a similar workflow,

that form.

I love this. Yes. This is how I prefer to work, so,

with and submit forms like one of the best state management libraries out there.

and parsing form data in, like, I could probably do it in 7 and a half minutes, You can have a client component and then wrap that client component around another Hook will allow you to do and you can display an error. Yeah, actually, that didn't that didn't work after one second of us trying.

you have access to the entire form data API, and that can happen server components inside of client components and vice versa Yarn a little bit tricky. So drag and drop. This has a map in it.

Rid. When that form is submitted, fetched before you go ahead so you can take out a lot of your Loading States.

choices there. Exactly.

kit.

props on React for doing this. And, honestly, you know, React has long been nonopinionated on these types of things, and it's the reason why we have things like rid. Remix and Astro, and I'm happy to see that React is making,

In React, in a client component. We'll talk about that in just a second. It's pretty cool to be able to just clips? for how it actually works.

about the way that you work here we go, rendered on the server, meaning that it is Node rendered You're in for Rid I so a lot of people are there's a lot of opinions flying, and we'll get into to some of those in a bit.

Svelte users will recognize this. This is kind of how farms work in Svelte,

So you simply just write a regular JavaScript function Mux.com So the fix to it is that and I think that this is just like A DX issue with JSX in general is that client components Right. It'd be nice to him, you know? Yeah. But then the other thing is like the back to So again, this is another little bit of a confusing thing. It's one of those things. It makes sense if you think about it. And there probably was lots of discussion about it. But the initial reaction to this JS, Rid. Let me throw it into this thing that is a client component. And then it says you can't do that server component or pass it in via props. And You can think of React as just sending the div HTML, just to sort of, like, get a feel for it. And then I also built a couple of little smaller applications just you pull out your rid. Little scissors, you're the hero. Yeah. We were I was at, like, a kid's function the other day, and, like, somebody had, like, bumped

on the client side. That happens on the client side by default. And,

are So, like, React is now becoming opinionated framework like Next. Js or Gatsby or Remix Parting links here. There's a really good Chrome extension I'll link up. There is Yeah. Because, like like, literally any other framework I've ever worked in little stuff. I don't have to go get a tool when I'm doing something So server components can have client components.

that function itself will give you

to the action 3rd 3 and a half hours. And I bet if I were to port over the rest of the website, I would probably need another

object.

because

action property is reference to a function that will run components or you can wrap anything that fetches data client components are Yes. That Wes that's that's the fix. But Alright. So now comes the tricky bits, and this I don't need to hit the submit button again, but after Irish listeners, which apparently it's illegal to carry a knife there, but I carry a knife with me all the time JS that's exactly my next point is I'll say the first point here is that components Our server rendered by default. So when you are building a React application, And that probably took me That's probably better as a server component because there's a lot of logic that goes into There's a couple other ones. I think it's prop on a form. So red. Rec server components from the default, and it's from the same dev as Zustand.

Rid I'm trying to get all that physical media out of here. I'm backing up stuff. You know? I I just I'm tired of having that stuff around the house.

what's the backpack we have? The peak bat yeah. The peak design bag? I got that thing, like, 6 or 7 years ago before everybody had it, and I could not Stop talking about how awesome it was to people. It is great. Although the the my only concern with the Peak Designs backpack is that when I take it through airport security and they stop me because I have, to Rid Yeah. Data. Yeah. You're right. Yeah. Variables and state. You don't need custom state on the server side because you simply just await it. It's asynchronous. So you simply just await the fetch request and then you you have the thing and that that state never updates having to You should you should default to server, right? Everything should be server rendered by default. You shouldn't have to opt in to server.

sign up for our our YouTube channel. Go smash that subscribe button, Yeah. I Optimistic UI is one of those easy wins for folks And any of the server components as, like, wood or or branches and trunks. Right? You can't go from leaf to trunk, but you can go from trunk to or branch to leaf. Right? You can't go from leaf to branch, branch to leaf. And your

Pliers in it. Yeah. It has Vercel side rendered and then rehydrate on the browser I was trying to redo my navigation, like it was great class. Then it was class components, then it was hooks.

that I had of old school projects Wes there were songs. You Node, when I was in I was in school, I was constantly working on on music projects or programs or something like that. And, You know, people might not know this, but, hey. My my, like, hard drive was only 200 gigabytes.

JS much as the knife, surprisingly, because I used to cut with my knife, but the scissors is a lot more controlled, especially like you have something that is like zip tied, like you get something like a package and it's zip tied. You can do the scissors have really good Thank goodness.

even then, that thing died. So it was important to keep stuff backed up on on DVDs or whatever. So you you might be like me and have physical media sitting around, and I think this this thing JS a little $28 CD drive rid. Wes super fantastic.

I I really think the audience is gonna get a lot of out of that because as somebody who's only seen

what it actually would look like to use this stuff in the real world. So, thank you for for doing all that research. Yeah. Now is the part of the show where we get into sick picks and shameless plugs, things we wanna pick or plug. I'm gonna be picking I'm gonna go back in time here. I'm picking a CD drive or a d d DVD drive. What?

You got to think that they think, you know what? This state management thing is not solved yet,

the Syntax YouTube channel. Hey. We have a YouTube channel, And it used to be level up tutorials, which is one of the reasons why you see a lot of my old content there. But

And,

for a full archive of all of our shows,

Go ahead and smash that subscribe rid Drive button. Ring the bell. Do all that stuff, and, you'll get syntax episodes on YouTube. Beautiful. Alright. Thanks, Larry, for tuning in. Catch you later.

leverage on them. You could just snip the zip tie rather than trying to rid. Pop it open.

clothes or whatever is coming up. Oh, so you end up using those little scissors? Okay. I use the scissors

Yeah. And Vercel is funding it as well.

So I found this Asus

from, like, old projects and stuff, and I've been ripping all this data, whether it's been projects that I've had from a long time ago.

a picture that was hanging in the hallway, and it broke. Rid. And they're trying to figure out, oh, shoot. Like, I gotta fix this thing, and I just, like Uh-huh. Excuse me. And I fixed it with the pliers, Scott shows equals await fetch So I would like to go to even high school football down in the south is pretty big too, isn't it? Yeah. It's it's it's very popular, but

is built in server components. So if you're using the Chrome extension I talked about, go to Mux.com and start hovering over URLs. You'll see them being preloaded

rid. List all my courses.

for fans of the podcast, We're gonna be Scott pushing episodes out there

audio gear or or something in my my bag. Yeah. They're always like, how the hell do I get this thing open? Oh, yeah.

I'm going to sick pick But rid. Let's talk about Sentry. You have a React application is you just Mark something as a client component. So to Mark something as a client component, you write Use client at the top of the file, and that makes that file a client. You cannot put a client component and a server component in the same The pieces being streamed in from the server to the client.

And,

and it's $28.

or drop a review if you like this show.

that is it. Hopefully you enjoyed if there are any URLs is effortless.

So if you are ripping if you Scott a Stack a CD somewhere that you've just been putting off.

And I've always wanted to carry a multi tool, which is it has a knife.

with a built in USB C cable. You don't Scott power. You just plug it right in USB C. It's a tiny little itty bitty CD drive, You get access to the farm data as a rid. Proper.

And you might even see some additional content

And I'm going to shamelessly plug

ZenDrive for me, You know?

from me and others here and there as well. I've been doing some kind of one off videos there,

Rid. You pull down on here, and you you twist the knob. You bop it, you know, and then it comes up in the Alright. Shameless plugs. Westboss.comforward/courses

what is the channel URL?

3 times a day, 1400 buttons on that page. You Node, more than that, actually. There's there's probably 5,000 buttons on that page, and they're all for tags.

between Vercel, React rid. It's a lot, especially with a pretty big one. So it's a big rewrite.

and then I just, like, walked off into the sunset like the hero of the day.

the high level about these things, I think that gave me a lot deeper insight into this little $28 drive, I just popped it in there, Function great. That's amazing. That's so cheap. Yeah. It's amazing that it's so cheap. And I went through maybe about, you know, 200 some DVDs means nothing to Wes as being, 1, not from the United States, and 2, not caring about Sports, especially American football.

Yes. I have been I had a bit old stack of DVDs and CDs

I could talk about it forever. It's like when I got my And now we're talking about this whole client server methodology. And

Man,

Head on over to syntax.fm

Yeah. I'm feeling very knowledgeable about server components now, and I, yeah, I I really,

like

where I would actually want to use it as React. Now for me, the negatives come in when I think,

maybe even Wes. Node to somebody seeing a button with an ESLint And then you which state management library do you want to use in React? You got to that's the other thing. A lot of the state management libraries are broken from the server into the client when it actually is rendered. And Sometimes you have to put a button, a form submit button, in which is kind of wild to think that all the 10stack stuff

Yep.

That's ideal to me. I'm gonna say here from my perspective And,

feeling down on too much of it because I Typically work in sites that have a tightly integrated back end. So for me, that's nothing new. I typically rid. A status of this application where there's no data here Yep. Like, if I'm using the data, why do I gotta worry about waiting for that data? So for me, that was always like that was like a a major sticking point. So it's interesting to hear now that the sticking point for people is moving So there there were I I didn't encounter

rendering out reactivity

How do I do this? Yep. Do I just use Next. Js? Is that it? Do I have to do I have to use Next? I don't I'm gonna be real. I don't love Next. JS. Even with all this stuff, it's not my favorite platform. So if the answer is you gotta use Next. Js to use all this stuff, I'm out. I'm sorry. Yeah.

But I don't really dislike

I personally

anything that we've mentioned so far. I

the form action stuff because that's how I'm used to writing apps. So all of this kind of to me brings React into a place

yeah, what what is that how piece? It just feels like a big mystery to me. Dex. Wes. Was the 1st framework to this.

am like, I'm optimistic about all this stuff, and I'm having a hard time

But,

like think of generally, you can think of your page as a server component.

Vercel components by default

and the rules of putting Oh, another There was a whole bunch of them. I'll link it up in the show Node, but basically said, like, we don't need these things in remix anymore because now React has them in that kind of nice.

when Wes says things like JS Sprinkles, he's not referring to

when you need describing this thing called Rid. And most

updating state.

this whole website is server rendered, but now I want to make these parts

It's just a bit more declarative principles, and I will probably have a follow-up show in 3 months or so to figure out a little bit more of these architecture examples.

you say, okay, I understand event and event handlers and anything else that like you're accessing the window object or something like that. That's when you would reach for a client component. Initially, I was like, you can't put state on the client.

rid interactive, have click handlers, have custom state, drag and drop, then you opt in to being a client. And just for the audience, rid

not like some kind of actual technique or whatever. He he's just rid. He just likes sprinkles. Yeah. Alpine

and you add a little bit of jQuery on top to make that part interactive.

application say, all right, this one is only server side and I can use All of the server side APIs that I could ever imagine or ever want. Wow.

So if you think about the way that we used to do it, a PHP backend and JS children or as props.

React Islands is another example that is very popular where you have an existing monolith is used for displaying error or success messages from the back end. So if your form needs to return some additional data that needs to be displayed in the form, you can use by default, everything is server rendered.

And then you opt in to client side components There's a lot just asking on Twitter. There's a lot of people who are like,

do any API, no Wes API, no JSON stringify. None of that a lot of the other things. And still also, like, Rex still does not have

Form actions are client by default, and you have to opt in to

so much that it made a component that I was simply just a button It's not HTML, but if you think about it as HTML,

However, and it's just too complex. A lot of people are like, I just moved to Svelte. I moved to Astro. I moved to something effects,

the component that You don't like that? I see. I like that about Svelte because JavaScript to interact

seamless transition of passing a variable All of these features that remix had

Rid. Do a full page reload or is it to do a progressive enhancement? Like, so

Components are server by default

return data from the server, or you can return an entire component It's not cheap, but it's one of those things. Hopefully, you don't lose it And you'll hopefully have it forever, and I've been just been my wife got it for me for Christmas, and I've been so happy with it. Yeah. How would you is that rid. Was that one that we'll have to talk about? Maybe I'm sure Christmas gifts will end up becoming sick picks here. We haven't talked much about our holiday. Yeah. But Node. No. I, I got a list of stuff I got for Christmas that will be upcoming sick picks, but this Leatherman Yarn has been high on my list. Awesome. Has magnets in it. That's the other thing. Is it components that have custom use effects, components that have event handlers on click on submit, all of that good stuff.

from the client side to the server side without And what's happening is that Facebook is saving that comment to the database, but it's also checking Rid. You're done. There's no there's no creating custom fetch requests client, and then it Not everything is a client component like it previously Wes. And in fact, you have to sort of opt in to client components in React when you Do need to do the things that we just mentioned. When you do need custom state products into your cart. So your part obviously has to be a client component because it needs to handle drag and drop and clicks and deletes and all of that stuff. Right.

Not mind blowing because we certainly have had things like that. But a lot of the use case where you have to do the Afro mentioned dancing between server and client components is with forms So really, really nice. And that's the one thing when we built our Svelte site where I was just like, oh, this is rid even like as simple as a button. Rid data handling libraries will have some sort of So you want.

rid. Call the You're simply just waiting for the thing to be And you may think that's kind of weird, especially for rid JS you Hover over top of them and you'll see the parts come in as you change pieces on the website. And Right.

like, server now that has to be a part of your workflow beyond just hitting an API. Right? Yeah.

yeah, it was

which, specifically, the the big house where the Michigan football team plays JS, like, the largest rid. Stadium in the country. I mean, it's that big. It's massive. So, like, going to a football game there, which I have been to, by the way. I didn't go to any when I was of They're they're just it's insane. It's it's very loud. It's very intense. And, like, people go nuts for it. So I would like to do the Good deal. Buffalo Bills tailgating experience at some point in my life. That seems super fun. Yeah. My, my realtor JS has,

rid Dawg, s h I t, since I went to school there. In fact, like, my freshman year was maybe the last year they were decent.

I've been waiting this long for them to be good again, and they had an undefeated season. They did not lose a single game, and then they won rid. The national championship, a library called JS Sprinkles.

rid Screaming our brains out last night, so, I'm doing great today. I'm having a lot of fun. Congratulations.

and, You know, I had to worry about loading states or in a status where there was no data to now worrying about a situation where you're getting the data directly from the database. And, also, you know Node know, people dunking on, like,

you know, many people like,

You know, they they make University of Michigan Football their entire personality. That was not me. I went to school at at that school and never went to a single football game. So it wasn't until after I graduated that I got really into Michigan football.

Michigan,

Rid to to give some context, we're recording this on January 9th.

But

Ohio State, all of our big rivals and stuff. And college football, Well, man, there's a lot of teams,

past players and stuff like that. It was pretty cool. Love it. All right, let's talk about React Vercel Components

and what they are, how they work, All of that good stuff. So first of all, React Vercel components hook Yeah. Yeah.

Rid. Michigan won the national championship in football,

what Vercel and college is like. And you have these campuses, you walk around, and there's these huge football games. And, like, It's nothing nothing like that

they they beat all the the you know, they beat Alabama. They beat,

rid At the Broncos stadium, he has, like, 10th Node tickets. You're, like, basically with the players, and so he takes his clients to games. So I got to go to a game, and he did this whole rid. Pregame

VIP thing because he's, you know, Sanity, and we're bat we're we're getting all free food and hanging out with

in Canada.

And you know what, man? They've been absolute,

and I'm happy to hear that the football team did did well. I I'm I'm still but it has a a click handler like rehydrated you have to now pass that in via props in order to make it work. It's kind of frustrating to do that, and I think it's more of having to understand and getting new design patterns in place But you can wrap.

Yesterday was Monday, January 8th AKA.

annoying.

there was, like, one of those threads that have gone off the rails

just execute this only on the client. Yes.

has, like, a resize observer in it. Node all of a sudden higher navigation and we got to explore this a little further.

And You can be in a server component.

And I was not Yeah. That's weird. A major fan of that. Or sometimes I'm like, oh, And I'm a huge fan of that in all of these meta frameworks, being able to just likely to render.

A server component, now it's a client component. It'd be nice if you could hit wrap that in a some sort of wrapper to say, hey. This bit, this little tiny bit of JavaScript, This resize observer,

Let's let's say React Aria. Maybe React Aria JS kind of it's a framework in itself. You know? Yeah. Totally. But let's talk about, like like,

You have to make another file that simply just imports that component, And if those URLs have OG images and if that URL has been banned or any of that stuff, right? Doing it in the background. Exactly. So it's doing all of that in the background. So immediately you see, oh, my comment worked.

because

yeah, I could do that, but then I have to convert the whole thing to a server component, I just deleted a lot of them because I was able to just bring that logic into a server component. So and make sure it works in all the browsers.

like, really? That's the best way? And

In Svelte, you just import the freaking page, and you get it. You don't have to Yeah. They don't Page gets access the entire URL property. Whatever you want. Have it. Your name, any of that stuff. Yeah. I don't I don't like those butts.

and I was just, like, going through all these threads So I imagine remix is going to get it.

so it's a server component by default,

in it. What rid. What do you get? Feels like that should have been the other way around.

So you're importing a component from a totally new paradigm,

it's very likely that that component does not have a used client at the top of it. Oh, right. Rid. So

Ready? 1st those butts.

some guys, like, for sales, a $90,000,000,000,000 Their support already in 10stack,

you can't get the current page to the server, which is server components, So like 15:20 Form actions are functions that run when your form is submitted and you pass a function So it's long been a pain in the butt everything that needs to happen happens on the Vercel, and React simply sends I'll explain what it is in just a second, but essentially And but I think a lot of devs are not used to this type of work.

that gets 100 on Lighthouse score. There's many thousands of pages. There's guides on there. There There's tips, there's blog posts, there's a whole store built into it. There's quite a bit of stuff on that website. So I built the Nav, the footer, If there's any logic of buying multiple, just generate everywhere I go because it's super handy. I find myself using it From cutting kids chicken nuggets in half to just prying at something, popping it open, cutting something. I use it probably The server will render the component and send the React code over the wire.

and you want to move it to server components.

hours, which is fairly significant for we've all been on those apps before where there's 8 spinners for 3 seconds and then Can we do a whole show on my multi tool? Because In HTML, you have an action that is a string, and that string is a URL of where the form is submitted to.

Yeah. And I love that. You know? Node it's one of those things that I think rid. Makes so much sense

I would even say small small, medium to large, If you wanted to

I ported over style components because that's what my styles were built in.

I don't know why it works any differently. Yeah.

it's not a large application if

for a couple of hard days How things are server rendered, how they fetch data, how they are loaded, how they are sent from the server to the browser.

to large size React application, will render.

You have an application with lots more interactivity.

are being and that's how HT Max works. You're just Sending, culling, hunks of HTML to update part of the website.

If you have a You can show an actual skeleton, whatever I don't like butts of, like, If you have a partial or a component server side in next JS.

if if you think about it in terms of how we work on the web.

rid. To give you an idea, The website slowly comes in, but you can also wrap multiple suspense components Skeleton screen, that's pretty common in applications where it's just gray boxes where the content should show up. And then Show an actual skeleton.

is where the tiers sort of come when people are trying to move an existing application. Because the entire form data the syntax API. And then maybe just the notifications bubble would be a client component.

Is use client

multiple components per file now. Yeah. So I have been doing that a lot, and it is nice. But, He's referring to sprinkling in Actual JavaScript as Node. Not like, YouTube has changed that stuff so much. It's just at rid. Syntax f m on youtube. Youtube.comforward/atsyntaxfm.

Oh, yeah.

you can just import the sucker and put it in rid and you're off and running. But server when you want them to run on the server.

Like any sort of JavaScript standard, or is that are are we, like, now past the point where React is just JavaScript? React is is is That's a good question because rid Because, like, it's it's a JSX thing. It's not a JSX thing. No. It's not. It's a React. It's a React thing, and it's a way to However, rid. Vercel actions

I'm probably losing you right now. Go to the show notes and click the tweet that I have. I made a whole visualization Of the user's Yarn.

file, which is another frustrating thing that you have to have multiple files That's that's good. And, yeah, rid I like Michigan. Big fan. I've been there many, many times,

Rid. Did you discover that yourself, or did you see somebody talk? Because that's a an interesting like, I don't know if I would have, like, instantly said, hey. Can I pass this as a prop here?

like validation. When somebody types in something, you want to reformat it, credit card input, there's probably and form possibly slow

But Well, Wes, you'll be happy to know that Svelte five fixes that. I've been using Svelte 5 has a good way to do you can do,

put that button in there, you would have to have 2 or 3 files on the server unless you opt ESLint using cookies, which then opts you out of all of the Vercel Caching and like

now you really have to think about this. And And it fits. It's not much bigger than my knife. It goes really small. It has like a couple of screwdriver bits in it, a little micro screwdriver.

provide metadata to the file. And Yeah.

just to render out the Yarn. And React, of course, you were able to render React on the server in the past,

etcetera. And then you always need that all of the data from that form on the client side. And Variables. Data?

I think that's okay. The use client is not a a standard. We have use strict. That is the mode. That's what I'm saying. It's fine. You know? But, you know, like, come people like Astro have been doing this with their, like, markdown at the top of Single file components or remix, whoever. Yeah.

And that's sort of the way to go around it. But you can't Like if you're used to just going into a file called Yarn. Js that like the function from the client and that variable will be available to you on the server side, which is just like are going to be client side if you want to do any of your interaction.

You know that use client thing is interesting to me because, you know, one of the big arguments about React is that it is

of dealing with forms in React. You've always had to reach for some sort of third party library or roll your own custom state hook and Never been a big fan of that. So part of server components, they have rolled out

Yeah. Let's talk about forms, because form actions and server actions.

it JS I think it is a bit of a foot gun because you think, bottle opener scissors. It's probably the most popular one that I use because kids are always asking me to cut the little tags off their

Yeah. That's wild. I think I'm surprised.

It's not just JavaScript. That that argument always kinda bugged me anyways. But Yeah.

Your server components are kind of inherently,

the red you can't put a server component in a client component file, rid is next to impossible and you can drag items into your Yarn, right? So So you've got a bunch of products in a cart. You drag to make the parts that you need interactive. And if you think about React ESLint components in the same way whereas

something any more. And it is using the standard FormData API, which is a JavaScript standard for probably if you're trying to do like for an example would be with that cart.

which is

rid. Yeah. You can't go from leaf to branch, I guess, is ultimately what I'm trying to say. And that makes perfect sense to me. It it makes sense, but in practice,

server components, and that's where

However, it, forms

Client components and server components are separate things. I have a good metaphor for this, Wes. Yeah. If you think about it, like, you if you think about it like a tree, which is often how we think about rid. React applications in general. Right? You have leafs and all those things. Right?

on the server, though, as data.

can't do it.

But,

from the

client components cannot have You know, like, you're kind of blurring the lines here, Status. That gives you a reactive variable if the form is currently being submitted. So you can do your loading indicator. Something's something's been submitted to the Server side, you're waiting for it to come back.

That total value And don't forget to subscribe in your podcast player You could think of client components as like the foliage of a tree

if you want to calculate the total And that's what a client component is.

can straight up SQL statement, Rid. Why would you want to run something

database queries directly in your components, that's that's Wild to me. That's what I've always wanted. I want that I want that connection. Right? Because, like, hey. Your your component needs the data. Like, it feels like that's The perfect place to load the data to me. And I think a lot of that initial

from that

and that was always, like, weird for me. It's like I have to now worry about, for fun.

Drizzle, Prisma, And you can essentially think of that as is no longer a client Node, You run into this issue a Scott, in my experience.

the like to have my data where I use it. That's nothing new for me.

a loading state Until I started moving my code Bos off of BDR,

really nice. You know? Yeah. You know what? It's so funny to me because, like, I came from Meteor world as I've mentioned a 100 times on this show. Yeah. And, like, that's how you did stuff in Meteor.

on inside of it.

You can you can put your your database logic in a separate file and you wrap it.

It's simply just done and you can import all your server side packages right into you your React component, which is being after building 2 small applications, I took my website, which is

SQLite, whatever you're fetching your data or or whatever you're doing server side to get your data interactivity you've Scott to think that

always, always, always separate files.

And here we are January 2024.

have been rid. Scott of cooking for, I don't know, what was it, December 2020 when they were first announced? Yeah, that's rough.

Rid. There's people using them in production,

So however many years that is, in the function, some library.

There's no API endpoints needed in a lot of cases because it's rendered on the server.

in a function so you don't need to make a REST API. You don't need a GraphQL API.

You can literally and this rid. The same thing with a lot of these meta frameworks. You can just query your database directly You used to have to like lean on like a remix or a Next. Js for these types of things. You probably still will for a framework, but For example, if you had a list of podcasts from syntax and you wanted to server render it because you wanted to format them in a certain way and it's much faster to do it on the server, takes all the props or Node. Maybe you can just export from use, like, the Wes 6 QL Query

That is amazing because it takes care of,

Yeah. It feels really positive to me. I know. I don't know what else to say that. Yeah. Well, we haven't got to the rest yet, so hold you might you might as full video episodes, so not just the social clips you've been seeing here and there. So If you wanna get ahead of it,

And

Vercel side?

on the client.

If you need a big package and you're sort of in a suspended state forms need inputs from your user. You often want to do client side things with your forms rid function components to class components. Then it had class components to Really? And so there is a way to make it work, and I'll explain that in just a second. But let's imagine

you might you might change your mind. I'm rid I'm I I was I'll say I I know I told myself I would hold back on opinions, but now you have to wrap.

rid API endpoints, company and can't figure out how to get the Vercel. You're the like the current page URL to highlight the current page in your navigation 2 different If you Scott a lot more interactivity, then like 2 things. A, yes, you have. There's a lot more thinking that goes into a lot more paradigms, and that is certainly a lot more tricky.

As long as the markup

but I think it's going to be okay. We'll talk about those in a second. So let's talking about server components. We just talked about server Vercel client components. So

can be sent to the server, then you're in good shape. And same thing with like file system API. So I did a bunch of examples where

But I think a lot of people had a quick knee jerk reaction to that type of stuff.

and import that function into it. And you can Yarn it as we'll talk about it Use server market as a server function. It will only ever run it on the server. So you don't have to worry about for our UK and Rid. So along with these form,

I was literally reading how many files I had in the file system passed in and putting in a component, And Waku is a And then as you get into smaller pieces of your website, those are all server components until you get to one where you say, oh, that needs interactivity. This has buttons. This has It has

like it's not running on the client, obviously.

Large dependencies do not need to be loaded So we've had react suspense for a while.

there's a lot of, like, initial, like it used to be It has

that Wes you click it, it runs off and fetches some stuff. It's never going to be run server side.

hit The the server actions with just straight up JavaScript and Svelte, you don't have to wrap it in a form. But I recently did this, and I opted to

I had, like, 40 buttons on the page, and I opted to to wrap every single one of those in the form. You know? Wes true. I do like it because it's you're not writing any other functions. It's just declarative form. Right? Rid. You give it an action. It's for every single if you go in the admin back end of the syntax dashboard,

option as well. I I know to to be clear here about the Svelte, you can actually

form action Vercel actions, we now have a couple of new hooks,

that will allow us To work with these forms, so we've used form status. Status?

There's probably 5,000 buttons on that page.

It's just a delete button. Delete something.

Status.

on the ESLint, much like you would expect on a traditional and you hit enter, And we're going to rid I complained about this that much. I complained about this enough with Svelte. I'm like, just let me put them in the same component.

with things and make them interactive on the server, that makes no sense. Right? Yeah. Right. Why why would the server care about, You know, events for a slideshow. They doesn't care at all. Right?

approach. Like that's what we've been doing a long time. The big difference here is that rid. But then our client component and this piece needs to be a server component. So push those feelings back because I think that we just need more design

because another framework you'll be glad to hear, a new React framework called Wacku. Rid I got some I got some HTML from the server. Let me just put that into that part of the website where it belongs. And what it's rich. Sending is a React component with references and all of the data in it. There's a really nice Chrome extension that you can see if rid You have a to do list and you add an item when somebody submits You can just use that server side where it's already loaded and simply just send the screwdriver.

in a server component.

Rid. And the weird thing about this is that client components are still server rendered initially.

rid. Initially, that sounds awful. Yeah. But you know you know what's just as good as state on the server? But B,

Yeah. You Node? If you're if you're writing you don't write your interactive

and you are goofing some code up like I tend to do in your React application. You're gonna need some error exception, make sure that that function will only ever run on server.

all that good stuff. So Century is fantastic for that. Check it out. Century IO coupon Node Sanity Treat for 2 months for free. Rid How are you doing today, Scott? Oh, hey, man. Doing And client components. They are always, to fuss around with another And I am so happy with this thing because I I never liked multi tools because you always see those guys with them, like, holster carrying them on the side, You Node? And, like, I'm not that guy yet, but

talk all about the pieces and how it works together.

I'm doing just about as good as 1 person can do.

and we're at a spot now where React devs are going to say, okay, They are rehydrated so not to hold up the rest of the actual website. And then the server will stream them the amount of code that I had to delete, I think they I think they did it by default because

What are these? How do I use them? What are the benefits? that whole idea of JavaScript sprinkles, which is rid. If you've been around since jQuery days, it's really not all that complicated.

session replay telling you and helping you figure out what went wrong, where, how, Design patterns. Let's talk about real quickly. Everything should be server by default. Your high level components should be server components, and then you opt in to client components as You know? I don't like butts. Yeah. And Can we clip that?

rid. Then immediately beneath that, we loop over each of the shows and render out the title and the description and all that stuff that's associated with it.

serverless functions.

Rid. All of the looping, templating,

lots of, like, You have a Yarn, that's what happens is if you market with a use server, It's server rendered. You can re render the server components. I'll talk about that in a sec as well. But again, if you need to re render it, then you simply just rerun that fetch Wes, and then it will return the whole component. And you know who's gonna be particularly adept at picking up those concepts? Anybody who's used Astro or anybody who's done, Like, just straight up JavaScript on the client. Hey.

All of the data fetching, that's probably the biggest one.

React sends HTML However, could rid. You're going to be so you're telling me from the server to the client and it's just rendered out on the thing. So Why? Why would you ever want to do that? First of all, we know what they are.

What is a server component? A server component is a component, a react component that JS, and client you have to opt in to client side with use client.

and then the React on the client side will say, oh, JS just, man, I'm in love. I absolutely love it. Yeah. Love that buttons can have actions as well. So this is one thing I thought was kind of weird in Svelte JS we have, like, a button that This is like fetch TypeScript.

client server passing

to run things on the Vercel. And that another file.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Tolinski and Wes Bos. Welcome to Syntax. This is the React Vercel Components show. React Server components

and handle form submit.

rid. What's all the pushback for this type of stuff? Like, the big things that I heard from people is a rid.