Node.js Loader

[00:00] Super, let's go to our package JSON, and we're going to update our dev script to include that import. There we go. So we've got our dash dash import server register RSC loader. So let's actually go to that file, register RSC loader. Inside of here, we want to import

[00:18] the registration API for Node, and then we're going to register the file RSC loader. So now we're going to go to the RSC loader file. Of course, let's save this file. We don't want to forget that. A lot of this is already built for us. You could feel free to mess around in here if you want to,

[00:37] but we want to just focus on what does this thing actually do? What is its purpose? So to that end, we're going to uncomment this little block, which is going to say, hey, when we're importing the edit text module, then I want to console log the source code that we've converted it to. So it starts out with one thing,

[00:57] and now what does it end up looking like? So let's go to our edit text module now. The one thing that we need to add here for it to get transformed is use client. In fact, I'm not going to touch this, and instead, I'm going to come over here to our logs. I'm going to restart the app,

[01:13] and here, we're not actually importing anything yet. So we'll leave the use client directive off, but let's come over here to our ship details, and let's import the editable text module. Then I'm going to uncomment all of these logs as well, so we can see what is the editable text.

[01:32] So we'll two-string it, and then we'll also log all of its properties as well. So saving that, come over here, and we're going to get a big honking error, and also the source code of our module. So because we didn't have the use client on there, this module is as it is. It didn't change. We didn't touch it with our node loader.

[01:51] So for that reason, we are importing this FlushSync API from React DOM, and remember, we're running with conditions React server. Remember, that's what we added so that we could do RSCs, and so we're getting an error here because in the React server condition,

[02:10] React DOM doesn't export a FlushSync export, and so that's why we're getting this particular error. So this will actually help us make sure that we don't have any client components that are missing the use client directive. Now, it's important to understand that you don't have to add

[02:29] use client to every client component because use client is more of a door like Dan Abramoff said. It's a door into the client-side, and once you get into the client-side, you don't need a door for your couch and a door for the TV and a door. Once you're inside, then it's all client-side. But we haven't actually created that door yet.

[02:47] We're still outside where it doesn't have FlushSync. So what we need to do now is come over to our edit text here and say use client, and this will tell our node loader, hey, I want you to transform me into a bunch of registrations.

[03:04] So now, this re-evaluates, so it's restarting our server automatically. We have our import register client reference that we saw before. We have the call to register client reference for editable text, and then when we console log this, the editable text function is

[03:24] literally just the function that was passed here. Then the properties include things that are typical on functions, but also the type of and the ID, which if we bump this up a bit, you'll see we have our file colon slash slash users, can't see that, yada, yada, yada,

[03:43] all the way to our playground UI edit text.js with the editable text identifier or namespace export name. So this is how React identifies this as a client component or as a React component at all, and then this is how it converts

[04:02] that particular spot in the React tree into a client reference. So that's as far as we're going to get in this step of the exercise. We've got some console logs and stuff. We'll clean some of this stuff up, and then we'll get into the next step of the exercise where we can actually put this in our RSC payload properly.

[04:22] So let's get into that in the next one.

[00:00] So, to get started for this one, the first thing I want you to do is go into the package.json and update the dev script so that it actually evaluates this. The important part here being, or the difference, the change, being this dash dash import server register RSC loader.

[00:15] So, this is going to be the thing that allows us to convert the code that's being imported so that instead of importing the actual module, we're importing use client or the transformed module because of the use client directive.

[00:31] There's actually quite a lot that goes on in our node loader, and even some of it is implemented by the React server DOM ESM module. And like I said, it's not a node workshop or anything, so I'm going to give a lot of that to you. What I really want to try and give you in this experience is understanding of how all

[00:50] of these pieces work together, not necessarily how to implement the low-level pieces. So, you're going to get that out of this, so you're going to be uncommenting a bunch of stuff and adding some console logs to a couple of places to really understand things.

[01:07] When we're done with this exercise, you're not actually going to be able to load client components quite yet. We're going to have to get into the next step of the exercise to do that, but you should be able to console log things and see that things are working and the result is what

[01:27] we expect. So, that's what you're going to be looking at. You'll want to check your console logs that are in the server, not in the client because we're not actually sending anything to the client yet. Okay. Great. So, start with this and then follow the instructions from the emoji and you should have great success. See you when you're done.

React server components (RSCs) are experimental and only used by a few frameworks...

Until this workshop! 

We'll be building this framework without any build tools. This means no TypeScript, no JSX, no Vite, nothing. We're going to be writing plain JavaScript and using Node.js\/browser native APIs to build our framework.

**That's right, you'll be building your own framwork that supports RSCs.**

You'll get into the nitty-gritty detail by: 

- Serializing and streaming your UI on the server to the client yourself with `renderToPipeableStream`
-  Granularly streaming in your server components with Suspense
-  Using Node's `AsyncLocalStorage` to **get context on the server.**
-  Registering and using a Node loader to implement your own "use client" directive
-  Building a full client router with history and cache
-  Implementing server actions

**This workshop follows the pattern of React Fundamentals but it's taken up 10 notches.**

After working through this you'll truly understand React Server Components from the ground up.

## Warm Up

In this section you will warm up by wiring together a hono.js app so that it serves static assets and data from an API endpoint. 

Whatever your server-side architecture, every web application will have these bits!

## Server Components

The idea behind RSCs is conceptually simple. Instead of requesting JSON data and handing that off to our components to generate the UI, we request the UI itself.

You'll learn how to serialize the UI on the server, stream it to the client, and then convert it to React elements that can be rendered in the browser.


## Client Components

To provide a great user experience, we still want to have some client-side interactivity. 

Server and client components can be intermixed but there are nuances to how this is accomplished. Once you complete this section you'll understand why server components can render client components but not vice versa.

You'll also see why the `"use client"` directive is used, and implement the handling of those modules yourself.

## Client Router

Learn to build a client-side router that integrates with your React server components. 

You'll manage navigation without full page reloads, fetch and display updated UI content from the server, and create smooth transitions with pending UI states. You'll also handle browser history for back/forward button support and implement caching.


## Server Actions

This section starts off with implementing the `use server` directive to designate server action functions and manage their serialization process, which, unlike client components, doesn't require full module serialization.  

You'll then build the server-side request handling: extracting action identifiers from RSC headers, utilizing dynamic imports to load the corresponding server-side function, and finally, executing the action and returning the result to the client. 

Finally, you'll explore a couple strategies for revalidating your UI after a server action is executed.


Understand React Server Components and Server Actions by building a framework with them using just the Browser, Node.js, and React.

React Server Components

React Server Components

Transcript

Node.js Loader

Transcript