Server Components (RSC) in react-router are... actually good?

00:00 Now this is shaping up to be a wonderful year. It's 2025, we still haven't gotten GTA 6 but we got React server components in React Router. Let's talk about them. So I wanted to go through this article with you and talk about the pros and cons of RSEs in React router and what does this mean for you. So if you want to pause the video and look at these cool visuals behind the title you can do that but we're gonna skip over that and we're gonna go into TLDR of it.

00:29 They've created a sample repository that you can check out and what's really important to know is this is still very previewish and experimental. It's still not in Vite. We are waiting for support for React server components in Vite to drop for them to adopt it in Vite and then allow you to use it in your projects. This preview uses Parcel and it's very experimental. So please keep that in mind going forward.

00:55 What do we get? We get RSE first server component routes, client components with useClient and server functions with useServer. So this is pretty much React 19 stuff. It's not really React router specific. And then there are two demos that we can check out.

01:10 There's one live demo. And if I open it up and it's RSC movies, and this is built with React router and it serves you a bunch of movies. You can check out the actors, you can add them to favorites. And all of this is using RSCs. So if I click at the favorites, it adds it to my favorites lists.

01:28 And if I click this one, it adds it as well. All of this is done with react server components, react server actions and it has nothing to do with react.ru and if I open any of these up I can scroll down I can remove them from favorites and it's a pretty simple demo but it's using RSEs. Yeah you can play with it if you want. There's a bunch of movies here and it's pretty minimal, but it gets the point across We're not gonna go into the source code just yet But what's important is middleware for batching and caching queries And the last thing is what I already said the stable release is blocked by RSC support in wheat so as soon as we get that we're gonna get RSCs in wheat for now it's on a preview parcel build so we're not gonna be exploring it today as much as in depth as we could because it's still not out in actual proper reactor other apps yet. Now for the tryout section we're gonna jump over that and we're gonna go straight into RSEs from loaders.

02:24 So if you didn't watch there is a video of Ryan basically returning RSEs from a loader And that is what this is. So if you look at the code here, it's basically a loader and then you get your product, you return it and then based on some content, you can use a switch and then return different components from your loader. And then inside of your default export you just use the loader data that has a returned RSC in it and you basically render it and how you do that is by doing loader data content and that's how you use RSCs with loaders. This is a really great way to know where your boundary is. I personally really like this approach.

03:06 And for example, in the future, when more third-party libraries get more support, what you're gonna be able to do is, you might use some sort of RSCs from those third-party libraries here, and then render them on the server and just pipe them to the client. And for example, if you can think about Stripe, for example, you could return a Stripe component here for the embedded checkout, and then you pass it the key that's supposed to be hopefully hidden on the server, it creates everything, sets everything up and then returns it to the client safely. That would be the ideal use case, but considering this is pretty new tech, we are probably a bit ways off from there but that will be a really cool use of React server components and that's the first way to use them so returning them just from the loaders. Now there's another way and these are called server component routes so basically what you can picture is you have your client rendered routes so this gets bundled and sent to the client so for example your normal routes that you have in your current react router apps and then you will have server component routes and what this is is basically a part of the route hierarchy rendered on the server and sent to the client and then you can also use outlets in these to render a part on the client and render the part on the server and if you look at the example here how you do that is instead of a default export you export a special component called server component and then everything inside of the server component is basically an RSC so what you can do is you can fetch for example products from somewhere and then you can render them here or you can pass them to different components that do something else and everything that's a client component so has the use client directive gets sent to the client gets rendered on the client and then all the other stuff is server rendered so pretty much what you would expect from RSCs but there's a really cool thing about RSCs in React Router and that is that you can define loaders and actions with your React server components.

05:12 So what does this mean? It means that before the server component gets rendered and sent to the client from the server, you can actually export a loader, do a bunch of stuff like you can authenticate the user, you can authorize the user, and then you can preload something, and then you send that data over to the client and this snippet doesn't really show it here But what you could do is you can fetch the project from the loader data and pass it into the project screen And that would basically render your project and whatever else is needed with the server component and what you can also do instead of doing a server action from react so basically creating a user action and then submitting it you can export an action from this file as well and when you submit a form to the current route so basically react our standard stuff is going to go through the route with the react server component. And then you have your server functions. That's what I talked about earlier. So basically you just say, use server you define your function and this can be passed.

06:17 So if you use the update favorite you can pass it to a form and that is gonna submit it to the backend or to the server basic react server component stuff I'm not gonna go in too deep into that you probably already know that and then you can create also components that use those patterns or you can use the other way where you have an actual action you use the capital letter form from react-router you submit to the current location and then handle it in an action so it's really up to you how you handle it both are fine and you're really flexible on how you do it and then you have your client components that are pretty standard if you look closely into all of the code I'm showing you this is all from the movie demo that I just showed you earlier and then you can do something like use form status and then do all this magic with the button and stuff like that. So that's pretty vanilla RSCs. That's nothing really mind blowing, but what is mind blowing is if I skip the movie demo, there's a batching and caching section.

07:16 So basically there's a new package for batching requests. So if you make a request to something like product slash five and you want to call the database like seven times because you have a lot of RSCs, well, there's a way to batch that into a single request. And how you do that is by defining a middleware. You can see that we use the async local storage and what that is, it's basically an API that allows you to create something very similar to a global React context but on the server and it's scoped to the current execution context. So what that means is, if you use middleware, which allows you to wrap your loaders and actions and RSCs and everything with a function, So if you define something in a middleware it's going to allow you to create a global context in your whole app that takes the start of the request in middleware, creates a context with context run batch functions and then executes this.

08:18 And what this does is it tells react router, Hey, I defined this context. I'm going to use this in my app somewhere in my RSCs. I'm going to resolve the response and I'm going to provide this to the context. And if you look at this export function load what it does it basically gets the store from the context but the cool thing is if I scroll up here you can see that it's used inside of a RSC And how you do that is you call load.actor and if you look at the code at the bottom What that does it gets from the store that's defined here in middleware and that is basically batch function so movie or actor and This is the coolest part about RSCs in React router because they allow you to wrap the RSCs with middleware What you can do is authenticate Authorize provide contexts do whatever you want before you get to the actual RSC part either by using the middleware that I just showed you or loaders that run before RSCs. So there's a bunch of levers and approaches you can use but the cool thing is that you get to the RSC with everything already prepared for you And then you can just do whatever you want in the component itself.

09:36 Like if you look at the example here, you can load the actor, you can load the product, you can show the username because you already authenticated the user and so on and so forth. And what's really cool is because you have this async local storage, that's providing you the global context. You can access it anywhere in your React server components, use it and show some data. So that's something really cool. And another cool thing is if it's not available, it can just throw an error or something like that and then when you're developing it you can know already that you did something wrong.

10:09 And now if you look at this example for the movie tile it's basically what I just said so it loads the movie with the ID it batches the requests if there are multiple, it shows you the data and this gets sent to the client, the client renders it and you don't have to worry about anything and if you submit again to the server and change some data ReactRouter automatically re-renders the server component and sends it again back to the client so you don't have to worry about that part either. And that's pretty much it! The easiest way to use all of React is React router and this is the perfect title because this is something that gives you so much power in deciding what to send to the client and what to keep on the server. It gives you sane defaults with middleware and loaders to do all the checks you need to do before you get to the RSC part, hopefully avoiding some security issues that have been raised with RSCs. And yeah, the only thing that's left is for this to actually release in VEED.

11:08 I'm really excited for it and I can't wait to dive deep into this. I really like to know what you think about this. Is it good? Is it bad? Do you like it?

11:16 Do you not like it? Let me know. Thank you for watching and see you in the next one. Bye