718: React Server Components

You're listening to Syntax, the podcast with the tastiest web development traits out there. Strap yourself in and get ready. Here's Scott Zielinski and Wes Boss. Welcome to Syntax.

This is the React Server Components show. React Server Components have been sort 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.

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 other pieces and how it works together. But let's talk about Sentry. If you have a React application, and you are goofing some code up like I tend to do in your React application, you're going to 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 Sentry is fantastic. For that, check it out. Sentry.io's coupon code TastyTreat for two months. For free.

Sick. How are you doing today, Scott? Oh, hey, man. Doing.

I'm doing just about as good as one person can do. To give some context, we're recording this on January 9th. Yesterday was Monday, January 8th, a.k.a. Michigan won the national championship in football, which means nothing to Wes as being, one, not from the United States, and two, not caring about sports, especially American football.

But for me, many people, they make the University of Michigan football their entire personality. That was not me. I went to school 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 dog SHIT since I went to school there. In fact, 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. They won the national championship. They beat Alabama.

They beat Ohio State, all of our big rivals and stuff. In college football, man, there's a lot of teams. And yeah, it was absolutely wild. And my wife and I were just screaming our brains out last night.

So I'm doing great today. I'm having a lot of fun. Congratulations. That's good.

And I like Michigan. Big fan. I've been there many, many times. And I'm happy to hear that the football team did well.

I'm still blown away that the American college football is so wild. Like I went to university and we had a hockey team. I went to one of their things. And there's like 11 people there.

Oh, really? You know, like you grew up like watching, like, this is what university and college is like. And you have these campuses, you walk around, there's these huge football games. And like, it's nothing, nothing like that in Canada.

So I would like to go to, you know, high school football down in the South is pretty big too, isn't it? Yeah, it's very popular. But Michigan, specifically, the big house where the Michigan football team plays is like the largest stadium in the country. I mean, 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 in school. They're just, it's insane. It's very loud.

It's very intense. And like people go nuts for it. I would like to do the Buffalo Bills tailgating experience at some point in my life. That seems super fun.

Yeah. My, my realtor has like at the Broncos stadium, he has like 10th row tickets, like basically with the players. And so he takes his clients to games. So I got to go to a game.

It's called pregame VIP thing. You know, fancy. And we're back, we're getting all the 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 server components and what they are, how they work, all of that good stuff. So first of all, React server 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 to 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 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's going to establish patterns for things that a lot of people are needing to do right now. It adds that. I think the big thing 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 can get people scared. But, you know, for me, I haven't built a web app without a server connected essentially in a while. So for me, I'm maybe a little less intimidated by the fact that, hey, there's this server now that has to be a part of your workflow beyond just hitting an API, right?

Yeah. So a lot of people are. There's a lot of opinions flying. We'll get into 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 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, like, two things. A, yes, there's a lot more thinking that goes into a lot more paradigms, and that's certainly a lot more tricky. But B, the amount of code that I had to delete, lots 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 is, here we go, rendered on the server, meaning that it is not rendered on the client. All of the data fetching, that's probably the biggest one, all of the looping, completing, everything that needs to happen happens on the server.

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 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 beautiful because you simply say, like, let's say we wanted to list the syntax podcast. Const shows equals await fetch the syntax API. And 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 a 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 is 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 whatever you're doing server-side to get your data that needs to happen server-side. It's simply just done.

And you can import all your server-side packages right into 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 really nice, you know? Yeah, you know what? It's so funny to me because, like, I came from Meteor World, as I mentioned 100 times on the show.

And, like, that's how you did stuff in Meteor. So I didn't encounter a loading state until I started moving my code days off of Meteor. And that was always, like, weird for me. It's like, I have to now worry about a status of this application where there's no data here.

Like, if I'm using the data, why do I got to worry about waiting for that data? So for me, that was always, like, that was, like, 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 somebody that's now worrying about a situation where you're getting the data directly from the database. And also, you know, people dunking on, like, the database queries directly in your components.

That's wild to me. That's what I've always wanted. I want that. I want that connection, right?

Because, like, hey, 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, ugh, to somebody saying a button with an inline SQL query 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 put your database logic in a separate file and import that function into it. You can mark it as, we'll talk about it, it's a used server. Mark it 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. Why would you want to run something server-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 eight divs as a result to the actual server. So it's going to be much smaller. 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 APIs. 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 don't know how else to say that.

Well, we haven't got to the rest yet, so you might change your mind. I'll say, I know I told myself I would hold back on opinions, but there's a lot of, like, initial, ugh, ah, really? That's the best way? And I think that will change, but I'm not sure.

And there's a lot, just asking me on Twitter, there's a lot of people who are like, uh-uh. But I think it's going to be okay. We'll talk about this in a second. So let's talk about server components.

We just talked about server components versus 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. And the weird thing about this is that client components are still server-rendered initially. However, they are rehydrated on the client, much like you would expect on a traditional, like, rehydrated server-side rendered and rehydrated 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 was. 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, initially, that sounds awful. But, you know, you know what's just as good as state on the server?

Variables. Data? Yeah, data. Variables as state.

You don't need custom state on the server side because you simply just await it. It's synchronous. So you simply just await the fetch request, and then you have the thing. And 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 re-run that fetch request, and then it will return the whole component. And you know who's going to 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, you know, 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? Why would the server care about, you know, events for a slide show? It doesn't care at all, right?

That's exactly my next point. I'll say the first one here is that components are 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, right? You have an existing monolith application, and then part of your application is 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 a JS Sprinkles library to make the parts that you need interactive. And if you think about React client components in the same way, you say, okay, I understand. This whole website is server rendered, but now I want to make these parts interactive. Have click handlers, have custom state, drag and drop.

Then you opt in to being a client. And just for the audience, when Wes does things like JS Sprinkles, he's not referring to a library called JS Sprinkles. He's referring to sprinkling in actual JavaScript as needed. Not like some kind of actual technique or whatever.

He's just like Sprinkles. Yeah. AlpineJS is probably the big one in the space there. You go back and listen to episode 568 with Caleb Porzio.

He's the author behind AlpineJS, and he explains that whole idea of JavaScript Sprinkles, which is, 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 AlpineJS. Kind of like Angular 1, if anyone remembers that as well. Yeah.

If anybody remembers Angular 1, 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 HTML from the server. Let me just put that into that part of the website where it belongs. And what it's actually sending is a React component with references and all of the data in it.

There's a really nice Chrome extension. 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, that's how HTML works.

You're just sending hunks of HTML to update part of the website. Yeah. And I love that. You know, it's one of those things that I think makes so much sense if you think about it in terms of how we work on the web.

I don't know why it works any differently. Yeah. All right. So now comes the tricky bits.

And this is where the tears 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, medium to large, and you want to move it to server components, you're in for a couple hard days. Because to give you an idea, after building two small applications, I took my website, which is not just a list of links that gets 100 on Lighthouse Store. There's many thousands of pages.

There's guides on 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 three 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 um if you got a lot more interactivity then you're going to be doing a whole lot more and the reason behind that is because like i said server components by default and the rules of putting server components inside of client components and vice versa are 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 um however client components cannot have server components and that's where the red react errors start being thrown because he starts you say oh yeah let me just let me just take that server component of the latest episodes let me let me throw it into this thing that is a client component and then you can't do that um because client components server components are separate things i have a good metaphor for this west yeah if you think about it like if you think about it like a tree which is often how we think about react applications in general right you have leafs and all those things right um you would think of client components as like the foliage of a tree and any of the server components as like wood 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 leaf and your your server components are kind of inherently uh i don't want to say thicker harder they're they're more there's more infrastructure there i guess you could say they're thicker components we got uh server components are thick components um but uh 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 makes sense but in practice you run into this issue a lot in my experience um and so there is a way to make it work and i'll explain that in just a second but like let's imagine uh you have a cart um and you can drag items into your cart right so you've got a bunch of products in a cart you drag something from the products into your cart so your cart obviously has to be a client component because it needs to handle drag and drop and clicks and deletes and all that stuff right however if you want to calculate the total of the user's cart that's probably better as a server component because there's a lot of logic that goes into how much shipping costs any coupons that they may have um if there's any logic of buying multiples generate that that total value on the server though as data you know yeah well that's that's the fix but 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 to drop that inside of my cart component which is client and then it can't do it um 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 as 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 you're probably 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 um 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 cart.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 about 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'm surprised did you discover that yourself or did you see somebody talk because that's 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 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 spell or whatever you can just import the sucker and put it in and you're off and running but now you really have to think about this and it's it is i think it is a bit of a hook 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 you can 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 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 um if you wanted to put that button in there you have to have two or three files just to render out the cart and i don't think about that much i can play about this i'm like just let me put them in the same component but let's be happy you know that salt 5 fixes that i've been using salt 5 as a way to do you can do multiple components per file now yeah 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 we like now past the point where react is just javascript is that's a good question because because like it's a jsx thing it's not a jsx thing no it's not um it's a react thing and it's a way to uh provide metadata to the file and yeah i think that's okay the use client is not a standard we have you strict that is it's fine you know but you know like people like astro have been doing this with their like markdown at the top of single file components or remix whoever yeah um it's not just javascript that argument always kind of bugged me anyways but yeah yeah let's talk about forums 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 etc and then you always need that all 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 um this thing called uh server 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 uh to the server which is thank goodness like i'm so happy about this because we can now you don't have to fuss with it uh anymore and it is using the standard form data api which is 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 um in react the form the action property is referenced 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 uh 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 you know spelt users will recognize this this is kind of how forms work in spelt uh kit um you get access to the form data as a proper uh i gotta say as somebody who's been doing a similar workflow i love this um this is how i prefer to work so um props on react for doing this and honestly you know react has long been not opinionated on these types of things and it's the reason why we have things like remix and astro and i'm happy to see that react is making um choices exactly uh now those form actions run on the client by default i said however if you mark them with a used 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 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 is so you're telling me components are server by default and client you have to opt into client side with used client however form actions are client by default and you have to opt into 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 used server um make sure that that function will only ever run on server does it do a full page reload or does it do a progressive enhancement like so that's what happens is if you mark it with a used 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 um and then you can then return data from the server or you can return an entire component um 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 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 uh that like seamless transition of passing a variable from the client side to the server side without having to do any api no rest api no json stringify none of that is just man i'm i'm in love i absolutely love it yeah i love that buttons can have actions as well so this is one thing i thought was kind of weird in spelt is we have a button that's like fetch transcript um and i always had to wrap it in an entire form tag to make it work um and i it's so much that i made a component that was simply just a button the component that you don't like that see i like that about spelt 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 when you click it it runs off and that's just some stuff it's never going to be run server side it's just a delete button delete something um it would be nice to do that so you can put them on a button you can put them on um there's a couple other ones i think it's option as well i know to be clear here about this all you can actually hit the the server actions with just straight up javascript in spelt 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 wrap every single one of those in a form you know i do like it because you're not writing any other functions it's just declarative form right you give it an action every single if you go in the back end of the syntax dashboard there's probably 1400 buttons on that page you know more than that actually there's probably 5 000 buttons on that page and they're all four days so along with these form uh form action server actions we now have a couple new hooks uh that will allow us to work with these forms so we've used form status status status i'm saying uh that gives you a reactive variable if the form is currently being submitted so you can do your loading indicator something's being submitted to the server side you're waiting for it to come back um use form state is used for displaying error 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 you have a to-do list and you add an item and you hit enter you you kind of 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 come back say it's successful and then send it back to the to the client because in almost every use case that's exactly what's going to happen successfully so optimistic updates yeah it's probably what's going to happen and if it doesn't you can roll it back there's that's what the optimistic um hook will allow you to do and you can display in there actually that didn't that didn't work after one second of us trying um and most most data handling libraries will have some sort of optimistic ui built in so again nice that's all built into JavaScript yeah optimistic ui is one of those easy wins for folks if you want what's perceived performance uh you know oftentimes 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 looks like a little bit easier optimistic ui has never been something that has been super easy so i'm really excited to see that they thought about that another example 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 if that url's been banned or any of that stuff right doing in the background exactly so it's doing all of that in the background so immediately you see oh my comment worked um i don't need to hit the submit button again but after two seconds or so then you see oh my comment has been updated with the actual hyperlink link and the open graph image has been embedded into it suspense so we've had react suspense for a while um and this is going to make it really really easy so you can take our react suspense which is a component and you wrap it you wrap components that may take a while to to render so in an example that i did i put it i intentionally made a component that takes four seconds to render and if you have a single component on your page that takes four seconds to render guess what is also taking four seconds to show up the entire page right so one little component could make your whole page extremely slow it's kind of promised not 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 um and you're sort of in a suspended state and you can show a spinner you can show nothing and wait for two 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 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 um you got to be careful because you can get a lot of spinners on your page and we've all been on those apps before where there's eight spinners for three seconds and then the website slowly comes in but you can also wrap multiple suspense components in a single suspense component uh which is kind of cool so if you had three or four things that were loading and you wanted to say all right i only want to fade it in once everything has been done then you can you can wrap there and it just it works it's just wrapping a suspense component you give it a loader prop you're done there's no there's no creating custom fetch requests like it used to be um because it just knows that your server site component is asynchronous and it knows how to handle wow that's nice yes suspense man you can't make any more jokes about waiting for suspense anymore that's played in 2024 all right um i told myself i would not sprinkle in opinions too much but now's the opinion hour so it's gone i are gonna gonna let them fly um opinions what i like it is extremely easy to run things on the server and that client server passing is is effortless um and i'm a huge fan of that in all of these meta frameworks being able to just spin up the project and have a client server model rendering out reactivity and like i could probably do it in seven and a half minutes maybe even less you know and like that's that's ideal to me i'm gonna say here from my perspective yeah 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 backend 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 formation stuff because i'm used to writing out 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 do i just use next js is that it do i have to do i have to use it 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 um but uh yeah what is that how piece it just feels like a big mystery to me next was the first framework to this um 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 um there's a whole bunch of them i'll link it up in the show notes but basically said like we don't need these things in remix anymore because now react has them and that kind of nice uh so i imagine remix is going to get it uh their support already in tanstack um which is kind of wild to think that all the tanstack stuff is kind of it's a framework in itself you know yeah um but let's talk about like what 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 i do not have time to fuss around with another re-architecting of my application you know like i already did um function components to class components i did class components to back to bar like it was great class and it was class components then it was uh hooks uh and now we're talking about this whole client server methodology and it's a lot especially with a pretty big one so it's a big rewrite um a lot of people said i don't see the benefit our app is fast we don't need this i'm fine having everything rendered on the client um we heard a lot of what happens when there's front end and back end teams you know like you're kind of learning the lines here and it's just too complex a lot of people are like i just moved to spelt i moved to astro i moved to something else because this seems like a lot of complexity for the fact that how simple it is in a lot of the other things and still also like react still does not have a like a nice state management like we obviously have states yeah yeah but you got to prop drill it all the way down and then you have like which state management library do you want to use in react you got it that's a lot of the state management libraries are broken on this as well because you kind of have two two different um 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 are here 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 like even as simple as a button sometimes you have to put a button a form submit button in another file um and i was not a major fan of that or sometimes i'm like oh like my navigation is has like a resize observer in it you know so all of a sudden higher navigation is no longer a client side a server component now it's a client component it'd be nice if you could 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 have you know yeah but then the other thing is like the you can't get the current page server side in xjs i was like i was trying to read my navigation and i was just like going through all these threads and uh some there was like one of those like threads that have gone off the rails because some guys like for sale is a 90 trillion dollar company and can't figure out how to get the server your like the current page url to highlight the current page in your navigation is next to impossible on the server unless you opt into using cookies which then opts you out of all of the first caching and like it's felt you just import the freaking page and you get it you don't have to don't worry about it the entire url problem yeah you just have it you know i don't like those butts you know i don't like that and can we put that ready i don't like those butts i don't like butts of like yeah i could do that but then i have to convert the whole thing to server component 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 we'll probably have a follow-up show in three months or so to figure out a little bit more of these architecture examples um oh another downside third third-party components so you're importing a component from some library uh let's let's say react aria maybe react aria is already set up for this but some component that's been made before six months ago it's very likely that that component does not have a used client at the top of it oh right so how so it's a server component by default but it has a click handler in it what do you get it 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 into server so now you have to wrap you have to make another file that simply just imports that component takes all the props or no maybe you can just export from use like the es6 export whatever from but then you just probably use use client at the top of it so annoying um design patterns let's talk about really everything should be server by default your high level components should be server components and then you opt in to client components as as you need it try to go 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 a another framework you'll be glad to hear a new react framework called waku and waku is a framework like next year it's got a remix that is implemented using react server components from the default and it's from the same dev as zoosand yeah i was i was low on waku until i found out who made it and then i'm high on waku yeah and versell is funding it as well so you've got to think that between versell react and the guy who made zoosand 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 uh we got to explore this a little further uh 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 um as as 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 uh that we'll 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 i'm glad to get this one out yeah yeah i'm feeling very knowledgeable about server components now and i uh yeah i really uh i really think the audience is gonna get a lot 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 now as a part of the show where we get into sick pics and shameless plugs things we want to pick or plug i'm gonna be picking i'm gonna go back in time here i'm picking a cd drive or a dvd drive um yes i have been i had a little stack of dvds and cds from like old projects and stuff and i've been ripping all this data whether it's been projects i've had from a long time ago i'm trying to get all that physical media out of here i'm backing up stuff you know i just i'm tired of having that stuff around the house so i found this asus zen drive with a built-in usbc cable you know how you just plug it right in usbc it's a tiny little itty bitty cd drive and it's 28 so if you are ripping if you got a stack of cds somewhere that you've just been putting off man this little 28 drive i just popped it in there it functioned 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 old school projects where there were songs you know when i was in i was in school i was constantly working on music projects or programs or something like that and you know people might not know this but hey my like little c hard drive was only 200 gigabytes and uh even then nothing died so it was important to keep stuff backed up on dvds or whatever so you might be like me and have physical media sitting around and i think this thing as a little 28 cd drive was super fantastic i'm going to sick pick leatherman arc which is a multi-tool that i edc everyday carry so i have carried a pocket knife for probably about six years and you may think that's kind of weird especially for our like uk and um 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 on something popping it open cutting something i use it probably three times a day um and i've always wanted to carry a multi-tool which is it has a knife it has pliers in it it has screwdriver it has bottle opener scissors is probably the most popular one that i use because kids are always asking me to cut the little tags off their clothes or whatever's coming up oh so you end up using those little scissors oh i use the scissors probably as 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 um leverage on them you can just snip the zip tie rather than trying to pop it open and i'm so happy with this thing because i never like multi-tools because you always see those guys with them like holster carrying them on the side you know and like i'm not that guy yet but i always pocket carry 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 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 five six times a day just for little stuff i don't go get a tool when i'm doing something or like you're always the hero when you like i was at a pull out your uh little scissors you're the hero yeah i was at like a kids function the other day and like somebody had like bumped a picture that was hanging in the hallway and it broke and they're trying to figure oh shoot i gotta fix this thing i just like excuse me and i fixed it with the pliers and 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 um it's not cheap but it's one of those things hopefully you don't lose it and you hopefully have it forever and i've been just my wife got it for me for christmas i've been so happy with it yeah how would you do that was that one we'll have to talk about maybe i'm sure christmas will end up becoming sick pics here we haven't talked much about oh yeah yeah i know i i got a list of stuff i got for christmas that will be upcoming sick pics but this leatherman arc has been high on my list awesome there's 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 uh what's the backpack we have the peak back yeah the peak design bag i think like six or seven years ago before everybody had it and i could not stop talking about how awesome it was to people it is great although my only concern with the peak designs backpack is that when i take it through airport security and it's not because i have audio gear or or something in my bag yeah they're always like how the hell do i get this thing open oh yeah you pull down on here and you twist the knob you pop it you know and then it comes open yeah all right uh shameless plugs westbox.com forward slash courses for a list of all my courses uh and i'm going to shameless 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 going to start pushing episodes out there as full video episodes so not just the social clips you've been seeing here and there so if you want to get ahead of it um sign up for 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 uh for fun and um what is the channel url youtube has changed that stuff so much it's just at syntax fm on youtube youtube.com forward slash at syntax fm go ahead and smash that subscribe button ring the bell do all that stuff and uh you'll get syntax episodes on youtube beautiful all right thanks for tuning in catch you later peace 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