00:00 Welcome to the React Server Components Workshop. My name is Kent C. Dodds, and I will take you on a tour of React Server Components in this workshop today. It is going to be awesome. We're going to be doing a bunch of stuff using this application, which is going to start out as a pretty typical SPA application. But as we work through everything,

00:18 we're going to build it into a highly interactive, really awesome app that allows us to look at the typical list detail thing with a URL search parameter. It's not a huge application, but the framework underneath it is what makes it really cool. So I'm making a couple of assumptions in here

00:36 that you're already convinced that React Server Components are great, and you just want to understand how they work. We're not going to be talking about all of the benefits of React Server Components in this workshop. This is mostly just, you're an experienced developer, this is definitely an advanced workshop, and you want to have a deep understanding

00:56 of why React Server Components are working or not working. So when you're working with React Server Components, and you're like, it's not working, you'll at least understand why not, and probably how to make it work. So I want to give you a quick rundown of how React Server Components typically work, or at least the implementation that we

01:16 are going to be providing before I send you off into this workshop. So for a typical single page app, lots of you who are watching this are probably pretty familiar with single page apps. You've got the user who goes to a site. The browser is going to request a document from the server. The server will send the document back

01:34 and will render a loading spinner of some kind. Maybe it's like rendered in the index HTML or something. Then we're going to request some client side code. The server will send that back, and then we can update the UI components to maybe some more loading spinners. We're going to go request the data that the server generates that response. It'll be dynamic based on the user or whatever. And then we send the JSON, and then we

01:54 update the UI with the JSON data. Now, lots of this stuff can be smooshed down if you're doing server rendering and different things, but that's the basic idea of a single page app. Then the user is going to change the state in some way, so some UI state change. We're going to render some pending UI. We go get new data. We generate the data response and send the JSON back,

02:12 and then update the UI with the JSON data. And then the user wants to make a mutation, so they submit a form. We render some pending UI. We make the POST request. We perform that mutation or that action with the POST body, send back the JSON response, and update the UI with the JSON data. This is actually really similar to how RSCs work.

02:30 The difference is where that updating of UI components happens. That combination of data and UI, that's got to happen somewhere. And in a server component world, that mostly happens on the server. So here in the super simple React Server Components and Actions implementation, it works like this.

02:48 And I call it super simple because it's without optimizations or build tools. So the user goes to the site, requests the document, get the document back. And at this point, we'll probably render a loading spinner as well. But we're going to request a JSX payload. And that is going to render our suspense fallback while that's happening.

03:07 And then we generate a serialized JSX with what we're going to be using is React Server DOM ESM and rendered a pipeable stream. That will stream back the JSX. And that stream, I'm using that very especially because there are cool things that you can do with server components with streaming.

03:26 But ultimately, that shows up on the UI using create from fetch with React Server Components. So already, we're actually generating a UI on the server here in a special format that is streamable. It's pretty neat. And then the browser is going to request some client component code. So if you've got client components that

03:45 have some interactivity, we've got to get the code for that. That comes back. And then we hydrate the client component. So we make them interactive. And then the user is going to trigger a state change. And here, I have this note. This only applies for state changes that affect server-generated UI. So if you're clicking on a button or a toggle

04:04 or something, we don't have to go to the server every time for that. So we're changing the route or something. While we do that, we render pending UI with start transition. We request an updated payload. And that generates the serialized JSX and rendered pipeable stream that comes back. And we update the UI with that information

04:22 from using create from fetch. And so far, that all looks pretty much the same. It's just a difference between generating data and generating the UI on the client side. Now we're generating UI and just sending that back. So then the user triggers an action, a form submission. We render some UI.

04:40 We make the post via a call server API that you're going to be implementing in this workshop. And then we determine the action to call and call it with the parse body. And then we stream the serialized JSX back along with the return value of that action and send the updated UI back to the user.

04:59 So it really isn't actually all that different. It can get more complicated. And you've got to deal with caches and stuff like that. And we'll get into a lot of that in this workshop. So I'm really excited to have you working with me in all of this. I think your mind is going to be blown. It's going to be a ton of fun. So I don't want to talk about it anymore.

05:18 Let's just get into it. See you in the workshop.