React Router makes using RSCs trivial!

00:00 A new day, a new release for ReactRouter. Today they dropped RSE support for framework mode and I want to talk about it. I already tried it out and spoiler alert, it's really cool. Alright, so yesterday they dropped this new blog article, ReactRouter RSE Framework Mode Preview. And I'm not gonna go through the article and read it for you.

00:23 I mean, the article itself is nothing really special. They just talk about the difference between the data and the framework codes, how you can run your framework mode with RSCs and a big TLDR of this article is before you had this so basically you would define the config and the react router and then you plug it into the vidconfig here And now you just install this VJS package and you plug that in here from here. And then you import the other plugin for RSCs from React router and then you plug it in instead of the old React router plugin. And that's pretty much it. So this is pretty experimental and it is nowhere near to be done and like stable and shipped so please don't use this in production but I do recommend playing with it because it's really easy to set up RSCs and you'll see that through the video.

01:20 So with that out of the way I prepared an actual app by running the command they gave us here and I'm going to show you what I've prepared and how you can actually use RSCs in React router easily and how it kind of changes the approach from before where you would have loaders and stuff now you can fetch directing components so without further ado let's jump into the code and let me show you. Alright so I've prepared this demo so basically this is just a sample they gave us with the command I just showed you. You just run that command and you're gonna get this, and I've already enabled GitHub so you can see the changes I've done. Let's explore. So, the first thing that's really important is this is available from version 7.9.2 and that's what we're running here and the only thing you need to do if you don't have a custom server is you go to your Vite config and you pop these two in, the RSC plugin from Vite plugin RSC and their unstable ReactTrader RSC plugin from ReactTrader.

02:26 So these are the two plugins you need. This is irrelevant, irrelevant, irrelevant. So these are the only two plugins that are relevant for React Touter, and this enables it to use RSCs, and that's all the config you have to do. So if you're using currently the non-RSC version of React Touter, when this comes to an actual stable release, you will just have to change the plugins. And that's pretty much it.

02:52 So how do you use React Server components? So because I've already prepared a project, I already have a few routes here and I've added the user routes. So as you can see here, if I kind of edit this little bit to look nicer, I have the users route and then the users route has a user ID route. So pretty usual React Router stuff. And this basically renders user slash user ID and This is cool because of the following reason.

03:25 So first we have the index route. So let's run the project So when you run it you get the using ReactRouter as RSE framework mode, which is experimental, and you get this link. So if I click on it, it opens up an actual app. And here we have the React.Java logo that looks really cool, and I've swapped this from what's next to users. And if I go back to the actual code you're gonna see that if I open up the welcome page that's rendered on the home page so the home page renders this export function server component and this can also be async so you can do export async function this doesn't really matter for this case here but just so you know and it renders the welcome component and if I open up the welcome component you can see that I'm fetching users directly in the component.

04:19 And I'm awaiting this and this is an async component. So this is react server components in react router. So basically you just create the component, you await it. And as long as it's inside of home here inside of the server component it's gonna fetch from the server and it's gonna work like a react server component and that's really cool because you don't really have to do anything else here and as soon as the stable support comes out you're going to be able to swap these out and use them wherever it makes sense but it's not a silver bullet so maybe you should be careful of where you use it and that's how you use it inside of ReactRouter. So let's see what the welcome component actually does with the fetch users.

05:05 So this fetch users is actually a server function and if I open up this file here it's called server function.tsx and you can see I use the use server directive, I import users from a JSON file that's located on the server, and then I just return it. So here, you could use something like a database and fetch it from a database. So this is kind of like an in-between solution, where I just fetch it from a JSON file just for this demo, but this is a fully fledged server function that runs in the RSC and outputs the data. So as you can see in the browser, you get the users here instead of actually fetching the data. And now for our users example.

05:47 So if I go to the users page, you will see that I have a list of users here. So if I check out the actual file that contains the logic, you can see that it's running with the old React-Author approach. So we have our loader, the loader fetches the users, and then our default export here uses the loader data, it gets the users from the loader data and then shows them. Well, how do we convert this into React Server components? Well, pretty easily.

06:20 So I delete the loader, and then I change this to be basically nothing. And then I just do await fetch users. And because this is now an async function, I add the async keyword, and instead of exporting the default, I export the server component. And now if I save this, and if I refresh here, you can see I still get the same data, but this is now running with our RSC. So this is not the usual approach you had before, this is an actual RSC.

07:01 So if you click on any of these, it's going to change the URL to be user slash ID, and it's going to give you the currently active user. So now this again uses the old approach. And if I go to users.userid, you can see this loader, and again this loader is fetching data and as you can see it's nested inside of users, so basically if I go here you can see the outlet. So the server component is actually also an outlet for a client component, but it can also be an outlet for a server component. So because that's the case, if I go back to this file, what we can do is again, we don't need to use the loader.

07:47 Again, what we can do is we can copy this, set it here and then say const user is equal to whatever this is. So this just finds the user and again async, remove the default export and the component export needs to be called server component, I just rendered it before, so we don't have to do that. And then we get the params for the route here, they're type safe, if I hover over this, it's a string. And I save this. And you can see it's logged here and now as you can see again if I refresh this it again fetches the user with the specific id But it doesn't do it from a loader.

08:32 It actually does it from a react server component and this makes using react server components Trivial in react router and this is actually really really cool I wasn't sure what the end result was gonna be because of the data mode. Because in the data mode, if you remember, you had to set up like three entry files and there was a lot of setup you had to do and it just didn't feel right and it didn't feel React router-ish. And this feels just right. So this is kind of really cool and I'm really excited about this and this actually makes me excited about React server components for the first time ever since they got announced. And yeah, you just get another level to pull, it's easy to not send extra JavaScript over the wire now and React Java makes this trivial.

09:22 Now again, like I said, this is still experimental and I tried it with a bunch of stuff, It is still far away from me actually recommending you trying it, adding it to your project and actually using it because a lot of features are not supported yet. But as soon as they are, you should try it out. And I'm hoping this will change in the near future, but we will see. And yeah, that's pretty much it for today. I hope you like this one and I hope you're excited about this.

09:52 I know a lot of people don't like RSEs and I'm kind of in the same boat. I mean they are great for some use cases but they're not like a silver bullet or something that's gonna replace normal components and stuff like that, just a edge use case you can use when you need it and you're probably gonna know when you need it, but yeah I think this is really cool because this allows you to actually use RSCs without having a huge headache on how to do it, and this will be very powerful for everybody who wants to switch to RSCs. And that's it for today. Thank you for watching and see you in the next one. Let me know what you think down below and share it with others.

10:31 Bye!