00:00 Super, so right now we have a special endpoint API slash whatever the URL is and it's going to give us the data for that URL. And by the end of this exercise step, you should have an RSC endpoint that sends back RSC content. And then you can consume that on the client and render that content directly.

00:18 So that's the goal is to get there. You can use the RSC parser to parse through it if you're interested in what that looks like. But that is what our objective is. Now to get there, it's going to be a little tricky because the React server components require evaluating and kind of a special runtime environment.

00:35 So the thing is that due to some constraints around the serializability of state and the stateless nature of HTTP, there are certain types of things you cannot do in a React server component environment, like you can't use state because we can't serialize something

00:55 that lives in memory. It just wouldn't make sense. You can't use context. You can't do like a whole all the interactive things like events and stuff like that. So we have the separation for that reason of client components and server components. Right now we're just dealing with the server components. We'll get to the client components later.

01:14 That said, our React server DOM ESM package that we're going to be using requires that you run your node process in a special environment called React server that will ensure that the version of React that you're running is different from the regular React version.

01:34 So that if you try to call use state and use effect and all of these things, that you'll get a runtime error and hopefully fail fast before you end up in production. And this is using a special conditions flag that you can pass to node, which will set up what environment we're in.

01:52 And so when the package JSONs are all being resolved, like all the imports are being resolved, it'll look in the package JSON, it'll see this exports and it'll say, oh, OK, if you're exporting the root package, here's the React server. I want you to go import this version of the module versus this one.

02:10 As an example, we can actually dive into that. If you go into your node modules directory and take a look at that, what that ends up looking like, the implementation may change in the future. But if you go into the package JSON of the React package in your node modules, you'll see something that looks a little bit like this.

02:29 And it's just telling node, hey, when I'm in a React server condition, then this is the module that should be loaded. And it's a special one, a special version of React that doesn't support use state and things that way. We ensure we don't have a situation where we're trying to use state in a server component, which shouldn't be allowed to do that.

02:47 And again, we'll talk about this a little bit more when we get into use client. But that is one of the limitations of server components. And honestly, I say it's a limitation, but it wouldn't make sense to use state in a server component anyway. So it's not really a limitation. It's just like you wouldn't want to do that anyway.

03:05 So this just helps you avoid any mistakes in that way. So you're going to need to probably the first thing you should do is update the package JSON to add this conditions right there. That way, you don't forget to do that. So you can actually import React in this RSC environment.

03:24 And then you're going to go into the app server, you'll update the RSC or the API endpoint to RSC. You'll want to also go to the import map so that we can handle importing the React server DOM ESM module properly on the client. And on the on the server side, we'll do render to pipeable stream.

03:43 On the client side, you'll do create from fetch. And then you'll be actually you'll be rocking and rolling it. There's just a couple of changes from there to make it so that we're sending RSC payload and then consuming that RSC payload and returning the value. So this will be really cool because when you're done, you actually like this is RSCs right

04:01 here like you implemented RSCs with just this step of the workshop. So have a good time.