Module Resolution

[00:00] Let's start on the server side. We're going to go to our server app. Right in here, we've got rendered a pipeable stream. We need to tell rendered pipeable stream, hey, when you come up to a client reference, I want you to take that ID of the client reference,

[00:13] which is the file name with the pound sign and the named export. I want you to convert that into a client reference that doesn't have the full file path and all that stuff. We're going to create a module base path that is set to new URL dot dot slash UI.

[00:32] We're just saying, hey, here's where our UI directory is. You could console log this if you'd like to. Then we'll pass that right here. In fact, I'll console log this. Whoops, console log module base path. We'll see what that actually looks like. Now, if we come over here to our RSE endpoint,

[00:51] we're no longer going to get that error because it's not having an error. We can look for edit text in here. There it is. We are properly converting that the component or your client component ID into its serialized form. Now, the browser can take over from there.

[01:11] If we take a look at our logs over here, then we'll see module base path is just the path to where all of our modules are. Super. A bundler is going to do this. It's with its own mechanisms and everything, but we're using native ESM, so that's pretty sweet. Coming back on the client side now,

[01:29] if we go to our UI index file, all we need to do is say, hey, how do you convert this slash edit text into the URL where this lives? Well, actually, if we go to slash ui slash edit text.js, and here, there it is. Our server is going to serve that file.

[01:49] We just need to update it so that it will go HTTP localhost 4000, UI edit text. So to do that and to make sure we are also not dependent on localhost because you don't want to ship that to production, we'll use window location origin slash UI. It will add our slash edit text.js to that,

[02:08] and we will be in business. So let's try this out. Oh snap, it totally works. I can click on this and oh wow, it's actually focusing and we can do our fast Galaxy Cruiser. So yeah, we've got UI stuff going on here. This is awesome, super into this.

[02:26] Well done. It just was two steps. First, we had to update our back-end code and then our UI code for handling this module resolution, and now with all the other work that we've done before, we can now use client components all over the code base.

[02:45] Like I said, a bit of a mind bend, but now that we've got it, then our client components are really, really powerful. The composition is just so good. So good job.

[00:00] At this point, we've actually broken our UI entirely. If you go to the main page right here, everything seems to work, but if you try to navigate to one of the specific ships, then it totally blows up on us and it gives us this error attempted to load a client module outside the hosted route. Now, the interesting thing here is that this

[00:19] actually was thrown on the server side, but React sticks that error in our RSC payload so that we can see it on the client, which is interesting. If we go over to our client logs, then we'll see that error attempted to load a client module outside the hosted route. What does that even mean?

[00:38] What this means is we don't have a hosted route. We haven't configured one yet. We don't know where to resolve these module locations, like where did these modules come from? We need to configure that both in our render to pipeable stream as well as

[00:56] on the client side with create from fetch, how to resolve these modules. Once we have that done, then we'll be able to serialize client components in the RSC payload, and then on the client side in the browser, we'll be able to take those modules and resolve them to

[01:13] the proper server endpoint for getting those modules. That is your job in this exercise, just actually two small changes to make all of this work. Let's go.

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

Module Resolution

Transcript