React Server Components

have been rid. Scott of cooking for, I don't know, what was it, December 2020 when they were first announced? And here we are January 2024.

So however many years that is, I feel like we are finally at a spot where we know what they are.

Rid. There's people using them in production, and we're at a spot now where React devs are going to say, okay, What are these? How do I use them? What are the benefits? What are the gotchas? The design patterns? Because it's a fairly substantial Upgrade to React.

And we're going to talk all about the pieces and how it works together.

But rid. Let's talk about Sentry. You have a React application and you are goofing some code up like I tend to do in your React application. You're gonna need some error exception, performance tracking session replay telling you and helping you figure out what went wrong, where, how, 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

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

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

Yesterday was Monday, January 8th AKA.

Rid. Michigan won the national championship in football, which, means nothing to Wes as being, 1, not from the United States, and 2, not caring about Sports, especially American football.

But for me, I, 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.

And you know what, man? They've been absolute, 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.

And, 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, they they beat all the the you know, they beat Alabama. They beat, Ohio State, all of our big rivals and stuff. And college football, Well, man, there's a lot of teams, and, yeah, it was absolutely wild. And, my my wife and I were just rid Screaming our brains out last night, so, I'm doing great today. I'm having a lot of fun. Congratulations.

That's that's good. And, yeah, rid I like Michigan. Big fan. I've been there many, many times, and I'm happy to hear that the football team did did well. I I'm I'm still 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 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 in Canada.

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

Michigan, 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, like, 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 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 are a totally new paradigm, in React, meaning that React, of course, you were able to render React on the server in the past, 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, whereas 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 a lot of the How things are server rendered, how they fetch data, how they are loaded, how they are sent from the server to the browser.

Those things are being done opinionatedly, and that is really cool because It means that we're going to be able to have React components that work across

any React application. Yeah. I think the coolest thing is that it it's going to establish rich. Patterns for things that, 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 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 server connected essentially in a in a while. So for me, Like, I may be a little less intimidated by the fact that, hey. There's this this server now that has to be a part of your workflow beyond just hitting an API. Right? Yeah.

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.

But honestly so I Took my entire website, which is a Gatsby React based website, and I converted 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 just to sort of, like, get a feel for it. And then I also built a couple of little smaller applications just by themselves so I could test out a few things. And I was surprised at how much 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.

But B, the amount of code that I had to delete, Scott of custom hooks, lots of, like, API endpoints, serverless functions.

I just deleted a lot of them because I was able to just bring that logic into a server component. So What is a server component? A server component is a component, a react component that JS, here we go, rendered on the server, meaning that it is Node rendered on the client.

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

Rid. All of the looping, templating, 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 React sends HTML 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, server components are asynchronous, meaning we've never had asynchronous components in React before. And what that means is you're able to simply await a fetch before you return your JSX. And it's it's beautiful because you simply say, like, Let's say we wanted to list the syntax podcasts Scott shows equals await fetch the syntax API. And then 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.

And That is amazing because it takes care of, like, you don't need a hook that is initially undefined.

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 You're simply just waiting for the thing to be fetched before you go ahead so you can take out a lot of your Loading States.

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

You can literally and this rid. The same thing with a lot of these meta frameworks. You can just query your database directly in a function so you don't need to make a REST API. You don't need a GraphQL API.

You can straight up SQL statement, Drizzle, Prisma, SQLite, whatever you're fetching your data or or whatever you're doing server side to get your data that needs to happen server Node.

It's simply just done and you can import all your server side packages right into you your React component, which is really, really nice. And that's the one thing when we built our Svelte site where I was just like, oh, this is rid

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.

So there there were I I didn't encounter a loading state Until I started moving my code Bos off of BDR, and that was always, like, weird for me. It's like I have to now worry about, 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 from that 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, the 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

to somebody seeing a button with an ESLint QL Query on inside of it.

People didn't realize that there is a difference between server components And client components. They are always, always, always, always separate files.

You can you can put your your database logic in a separate file 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 like it's not running on the client, obviously.

Right.

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

Rid. Why would you want to run something Vercel side? Large dependencies do not need to be loaded on the client.

If you need a big package to do something on the client, you don't need to load in a meg of JavaScript.

You can just use that server side where it's already loaded and simply just send the 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 and make sure it works in all the browsers.

As long as the markup 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 I was literally reading how many files I had in the file system and then putting that into a button in a client component. We'll talk about that in just a second. It's pretty cool to be able to just 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.

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

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 there's a lot of, like, initial, rid really? That's the best way? And I think that will change, but I'm not sure. And there's There's a lot just asking on Twitter. There's a lot of people who are like, 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 client components are components that have state components that have custom use effects, components that have event handlers on click on submit, all of that good stuff.

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

However, They are rehydrated on the ESLint, much like you would expect on a traditional like rehydrated Vercel side rendered and then rehydrate on the browser approach. Like that's what we've been doing a long time. The big difference here is that 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 effects, 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 in a server component.

Yeah. Like, doesn't that rid. Initially, that sounds awful. Yeah. But you know you know what's just as good as state on the server? Variables. Data? 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 because 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.

Yeah. You Node? If you're if you're writing you don't write your interactive JavaScript to interact 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?

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, by default, everything is server rendered.

And then you opt in to client side components when you need interactivity and updating state.

So if you think about the way that we used to do it, a PHP backend and you add a little bit of jQuery on top to make that part interactive.

React Islands is another example that is very popular where you have an existing monolith application and then part of your application It's built in React because that is the piece that needs to be interactive, right, or JS Sprinkles.

Lots of different frameworks out there where you server render the whole thing. And then you use the JS Sprinkles library to make the parts that you need interactive. And if you think about React ESLint components in the same way you say, okay, I understand this whole website is server rendered, but now I want to make these parts 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

when Wes says things like JS Sprinkles, he's not referring to a library called JS Sprinkles.

He's referring to sprinkling in Actual JavaScript as Node. Not like, not like some kind of actual technique or whatever. He he's just rid. He just likes sprinkles. Yeah. Alpine

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 that whole idea of JavaScript sprinkles, which is rid. If you've been around since jQuery days, it's really not all that complicated.

It's just a bit more declarative 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.

The server will render the component and send the React code over the wire.

And you can essentially think of that as The React server will render.

It's not HTML, but if you think about it as HTML, 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, You can think of React as just sending the div HTML, and then the React on the client side will say, oh, 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 The pieces being streamed in from the server to the client.

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 are being and that's how HT Max works. You're just Sending, culling, hunks of HTML to update part of the website.

Yeah. And I love that. You know? Node it's one of those things that I think rid. Makes so much sense if if you think about it in terms of how we work on the web.

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

Alright. So now comes the tricky bits, and this is where the tiers sort of come when people are trying to move an existing application. Because If you have a medium to large size React application, I would even say small small, medium to large, and you want to move it to server components.

You're in for for a couple of hard days because rid. To give you an idea, being after building 2 small applications, I took my website, which is Node just a list of links 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, the layout.

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

And that probably took me 3 and a half hours. And I bet if I were to port over the rest of the website, I would probably need another like 15:20 hours, which is fairly significant for it's not a large application if You have an application with lots more interactivity.

My site is primarily content based.

If you Scott a lot more interactivity, then rid. You're going to be doing a whole lot more. And the reason behind that is because, like I said, Vercel components by default and the rules of putting server components inside of client components and vice versa Yarn a little bit tricky. So server components, like think of generally, you can think of your page as a server component.

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 drag and drop. This has a map in it.

So server components can have client components.

However, client components cannot have server components, and that's where the red 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.

Rid. Let me throw it into this thing that is a client component. And then it says you can't do that because

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? You could think of client components as like the foliage of a tree 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 Your server components are kind of inherently, 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.

But, 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,

You run into this issue a Scott, in my experience.

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 have a Yarn, and you can drag items into your Yarn, right? So So you've got a bunch of products in a cart. You drag something from the 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.

However, if you want to calculate the total Of the user's Yarn.

That's probably better as a server component because there's a lot of logic that goes into How much shipping Scott? Any coupons that they may have? If there's any logic of buying multiple, just generate

That total value on the server, though, as data.

You know?

Yes. That Wes that's that's the fix. But 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, which is client, and then it can't do it.

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 can have server components passed in JS children or as props.

So you can't put a server component in a client component file, But you can wrap.

You can be in a server component.

You can have a client component and then wrap that client component around another server component or pass it in via props. And I'm probably losing you right now. Go to the show notes and click the tweet that I have. I made a whole visualization for how it actually works.

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 and putting in a component, 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 To make it work, but I think a lot of devs are not used to this type of work.

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

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?

Yeah. Because, like like, literally any other framework I've ever worked in in all of my web development career, If you have a partial or a component or a svelte or whatever, you can just import the sucker and put it in rid and you're off and running. But now you really have to think about this. And it JS I think it is a bit of a foot gun because you think, Oh, yeah.

And the other thing is that the way to fix a lot of these red errors 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 file, which is another frustrating thing that you have to have multiple files if you're trying to do like for an example would be with that cart.

If you wanted to put that button in there, you would have to have 2 or 3 files just to render out the Yarn. And 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.

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, multiple components per file now. Yeah. So I have been doing that a lot, and it is nice. But, You know that use client thing is interesting to me because, you know, one of the big arguments about React is that it is just JavaScript.

Is use client

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 provide metadata to the file. And Yeah.

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.

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

Yeah. Let's talk about forms, because likely a lot of the use case where you have to do the Afro mentioned dancing between server and client components is with forms because forms need inputs from your user. You often want to do client side things with your forms like validation. When somebody types in something, you want to reformat it, credit card input, etcetera. And then you always need that all of the data from that form on the client side. And it's long been a pain in the butt 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 this thing called rid. Vercel actions and form form actions and server actions.

So form actions are So, like, React is now becoming opinionated about the way that you work with and submit forms to the server, which is Thank goodness.

I'm so happy about this because you don't have to fuss with it any more. And it is using the standard FormData API, which is a JavaScript standard for describing and parsing form data into a JavaScript object and being able to send that to the server.

So Form actions are functions that run when your form is submitted and you pass a function to the action prop on a form. So In HTML, you have an action that is a string, and that string is a URL of where the form is submitted to.

In React, rid. The action property is reference to a function that will run when somebody submits that form.

So and then that function itself will give you the entire form data object.

So you simply just write a regular JavaScript function handle form submit.

The first argument of that function is the form data.

Rid. When that form is submitted, you have access to the entire form data API, and that can happen on the client side. That happens on the client side by default. And,

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

You get access to the farm data as a rid. Proper.

I gotta say, as somebody who's been doing a a similar workflow, I love this. Yes. This is how I prefer to work, so, 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, choices there. Exactly.

Now those form actions rid Run on the client by default, I said. However, if you mark them with a use server in the function, Now that function will only be run on the server.

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, so you're telling me Components are server by default and client you have to opt in to client side with use client.

However, Form actions are client by default, and you have to opt in to server when you want them to run on the server.

And That might make no sense. But if you think about it, forms are going to be client side if you want to do any of your interaction.

So marking it with a use Vercel, make sure that that function will only ever run on server.

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

that's what happens is if you market with a use server, 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 rid. And then you can then return data from the server, or you can return an entire component 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, rid. Call the the function from the client and that variable will be available to you on the server side, which is just like Not mind blowing because we certainly have had things like that. But that like seamless transition of passing a variable from the client side to the server side without having to do any API, no Wes API, no JSON stringify. None of that 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.

And I always had to wrap it in an entire form tag to make it work so much that it made a component that I was simply just a button

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

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 that Wes you click it, it runs off and fetches some stuff. It's never going to be run server side.

It's just a delete button. Delete something.

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

There's a couple other ones. I think it's

option as well. I I know to to be clear here about the Svelte, you can actually 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, there's probably 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.

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

Rid. So along with these form, 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? Status.

What am I saying? 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.

Use form state 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 use form state. And then there's a use optimistic hook That will allow you to do optimistic updating. So, for example, an optimistic update would be if rid You have a to do list and you add an item and you hit enter, you you kinda want that item to be immediately appended to the list of to do lists.

You don't want to be sitting around waiting for it to go to the server, save it to the database, it. Come back, say it's successful and then send it back to the 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 rid.

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.

Rid. And most data handling libraries will have some sort of optimistic UI built in. So again, nice that it's all built into JavaScript.

Yeah. I Optimistic UI is one of those easy wins for folks If you want what's perceived performance, you know, oftentimes, your your server can be the slower part of it waiting for the database to respond or just those messages to go back and forth. But if you add an optimistic UI, it feels Very fast, and it can be 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

And you put a link in the URL and you hit enter, immediately it'll just be a plain text string.

And what's happening is that Facebook is saving that comment to the database, but it's also checking if there are any URLs 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.

I don't need to hit the submit button again, but after 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.

So we've had react suspense for a while.

And this is going to make it really, really easy. So you can take a react suspense, which is a component, and you wrap it.

You wrap components that may take a while to render.

So in an example that I did, I intentionally made a component that takes 4 seconds to render.

And if you have a single component on your page 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 could make your whole page Extremely slow. It's kind of promised that all the entire thing. So what react suspense will do is you can wrap your possibly slow components or you can wrap anything that fetches data in a suspense component. And what will happen is the server will immediately send A loader component. You specify what shows up when you are loading and you're sort of in a suspended state and you can show a spinner. You can show nothing and wait for 2 seconds and then show a spinner. You can show 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.

You can show an actual skeleton, whatever you want.

And then the server will continue working on rendering that component so not to hold up the rest of the actual website. And then the server will stream them from the server into the client when it actually is rendered. And spinners on your page. And we've all been on those apps before where there's 8 spinners for 3 seconds and then The website slowly comes in, but you can also wrap multiple suspense components in a single suspense component, 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 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.

Rid. You're done. There's no there's no creating custom fetch requests like it used to be because it just knows that your server side component is asynchronous And it knows how to handle it. Wow.

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.

All right. I told myself I would not sprinkle in opinions too much, but now is the opinion hour. So Scott and I are rid. Let them fly.

Opinions what I like. It is extremely easy to run things on the Vercel. And that client server passing is effortless.

And I'm a huge fan of that in all of these meta frameworks, being able to just spin up a project and have a client server model rendering out reactivity in, like, I could probably do it in 7 and a half minutes, maybe even Wes. Node

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

I have not used this, But I don't really dislike anything that we've mentioned so far. I am like, I'm optimistic about all this stuff, and I'm having a hard time 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 like to have my data where I use it. That's nothing new for me.

I personally like 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 where I would actually want to use it as React. Now for me, the negatives come in when I think, 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, yeah, what what is that how piece? It just feels like a big mystery to me. Dex. Wes. Was the 1st framework to this.

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 All of these features that remix had and component data loading.

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.

So I imagine remix is going to get it.

Their support already in 10stack, which is kind of wild to think that all the 10stack stuff JS kind of it's a framework in itself. You know? Yeah. Totally. But let's talk about, like like, rid. What's all the pushback for this type of stuff? Like, the big things that I heard from people is a this is a massive rewrite.

Wes do not have time to fuss around with another rearchitecting of my application. Node already did rid function components to class components. Then it had class components to back to like it was great class. Then it was class components, then it was hooks.

And now we're talking about this whole client server methodology. And rid. It's a lot, especially with a pretty big one. So it's a big rewrite.

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.

We heard a lot of what happens when there's front end and back end teams, You know, like, you're kind of blurring the lines here, 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 else because this seems like a lot of complexity for The fact how simple it is in a lot of the other things. And still also, like, Rex still does not have rid Like a nice state management. Like, we obviously have state. Yeah. Yeah. But you gotta prop drill it all the way down, 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 on this as well because You kind of have 2 different applications, 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

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

even like as simple as a button. Rid Sometimes you have to put a button, a form submit button, in another file.

And I was not Yeah. That's weird. A major fan of that. Or sometimes I'm like, oh, like, my navigation has, like, a resize observer in it. Node all of a sudden higher navigation is no longer a client Node,

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, just execute this only on the client. Yes.

And that's what a client component is.

Right. It'd be nice to him, you know? Yeah. But then the other thing is like the you can't get the current page server side in next JS.

I was trying to redo my navigation, and I was just, like, going through all these threads And there was, like, one of those threads that have gone off the rails because some guys, like, for sales, a $90,000,000,000,000 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 rid is next to impossible on the server unless you opt ESLint using cookies, which then opts you out of all of the Vercel Caching and like 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.

You know? I don't like butts. Yeah. And Can we clip that?

Ready? 1st those butts.

I don't like butts of, like, yeah, I could do that, but then I have to convert the whole thing to a server component, 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 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.

Oh, another downside.

3rd Sanity components.

So you're importing a component from some library.

Let's let's say React Aria. Maybe React Aria is already set up for this, but some component that's been made rid Before 6 months ago, it's very likely that that component does not have a used client at the top of it. Oh, right. Rid. So so it's a server component by default, but it has a a click handler

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

Yeah. Yeah.

I think they I think they did it by default because You should you should default to server, right? Everything should be server rendered by default. You shouldn't have to opt in to server.

So now you have to wrap.

You have to make another file that simply just imports that component, takes all the props or Node. Maybe you can just export from use, like, the Wes 6 export whatever from, but then you just pop a use use client at the top of it. So annoying.

Yeah, that's rough.

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 need it. Try to go as as small as possible. So like a notifications bubble rather than your entire header being a client component, maybe just the notifications bubble would be a client component.

Parting links here. There's a really good Chrome extension I'll link up. There is another framework you'll be glad to hear, a new React framework called Wacku. Rid And Waku is a framework like Next. Js or Gatsby or Remix that is implemented using red. Rec server components from the default, and it's from the same dev as Zustand.

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

Yeah. And Vercel is funding it as well.

So you've Scott to think that between Vercel, React and the guy who made Zoos Stand like one of the best state management libraries out there.

You got to think that they think, you know what? This state management thing is not solved yet, and we got to explore this a little further.

Mux.com 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 JS you Hover over top of them and you'll see the parts come in as you change pieces on the website. And that is it. Hopefully you enjoyed 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.

Yeah. I'm feeling very knowledgeable about server components now, and I, yeah, I I really, I I really think the audience is gonna get a lot of out of that because as somebody who's only seen the high level about these things, I think that gave me a lot deeper insight into 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? Yes. I have been I had a bit old stack of DVDs and CDs 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.

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.

So I found this Asus ZenDrive 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, and it's $28.

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

Man, 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 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.

And, 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'm going to sick pick Leatherman Yarn, which is a multi tool That I EDC everyday carry. So I have carried a pocket knife for probably about 6 years.

And you may think that's kind of weird, especially for our UK and Irish listeners, which apparently it's illegal to carry a knife there, but I carry a knife with me all the time 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 3 times a day, And I've always wanted to carry a multi tool, which is it has a knife.

It has Pliers in it. Yeah. It has screwdriver.

It has 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 clothes or whatever is coming up. Oh, so you end up using those little scissors? Okay. I use the scissors probably 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 leverage on them. You could just snip the zip tie rather than trying to rid. Pop it open.

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 I always pocket TV that guy. And it has a pocket clip on it, 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.

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 little stuff. I don't have to go get a tool when I'm doing something or, like, you're always the hero Wes 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 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, and then I just, like, walked off into the sunset like the hero of the day.

So I did a crazy amount of research on multi tools. And this is the Leatherman Arc. It has the nicest blade.

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 clips? Can we do a whole show on my multi tool? Because I could talk about it forever. It's like when I got my 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,

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.

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

rid. List all my courses.

And I'm going to shamelessly plug 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 for fans of the podcast, We're gonna be Scott pushing episodes out there 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, sign up for our our YouTube channel. Go smash that subscribe button, And you might even see some additional content from me and others here and there as well. I've been doing some kind of one off videos there, for fun.

And, what is the channel URL? YouTube has changed that stuff so much. It's just at rid. Syntax f m on youtube. Youtube.comforward/atsyntaxfm.

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.

Head on over to syntax.fm for a full archive of all of our shows, And don't forget to subscribe in your podcast player or drop a review if you like this show.