• React

Introduction To Server Side Rendering

From the class:  Understanding React

I'd like to give you a sense of how you can use React on a node server. And that'll allow you to render React components on the server. Now, we're not going to do a full-blown implementation here, but I want to give you a sense of it, so that you know what's possible.

So I've opened up the app JSX file. And the first thing I want to do is to take this list class and move it into its own file. And that way, we can access it on the server without having to render it-- make this render call-- like we're doing here.

So I'm going to create a new file called list.jsx. And we'll paste in the list code into that file. And then I'm going to do a little trick at the bottom. And we'll say, if the type of module is defined or if it's not undefined, then that means we're running in Node.js.

And so we can say, module.exports is equal to list. And that way we can require this file and have access to our list class. There's probably better ways to do this, but this will get us close enough so that you can see how this works.

Now in the HTML file, I'm going to add another script tag up here that references the new list.js file that we'll create, so that it can be used in the app.js file.

Now, normally, all of this again would be done with a build script or some kind of automation. But we're just trying to do the bare minimum required so that you can see the server-side rendering in action.

Next up, I'll set up the JSX compiler to watch the app folder and to send the resulting build files into the build folder, like we were doing before.

Next up, we want to install a few node modules. First, install React itself, so just say NPM install react. And that'll put the node module for React into the node module's folder.

And then you can also install React tools. We're not going to use those directly in this video. But that will give you the ability to do compiling inside of a node script.

So from there, let's fire up Node.js directly. And we'll just start playing with the scripts live. So the first thing to do is to require the React SDK itself.

And next step, we can grab our list. So I'll require our list from the build folder. And remember, by using that export statement, we get the list back. And you can see that the type of the list should be a function.

Now, this is the same list component that we were using in the browser, but we're running in a node process now on the server. Now, what I want to do is to get the element form of this list.

So I'll create a variable called list element and assign it to React.createElement. And then we can render this element to a string instead of to the DOM by using the render to string method of react.

And now, we get our HTML but in string format. So we can send it over the wire from the server to the client just like we would a regular HTML page. And then the browser can take this HTML and render it to the page.

The thing I want to point out is this data-react-checksum attribute that gets added to the unordered list, the top level element. This checksum is a value that's encoding this entire string.

So that way on the client, we can produce this string again, run the checksum, and see whether or not they're equal. And if they are, we know that nothing has changed. And so this part of the DOM doesn't need to be re-rendered.

And so this is how React is able to render some HTML as a string on the server. And then once that gets down to the browser, the browser will render it.

And on the client, the React library can see whether it needs to re-render this component again based on whether or not this value here has changed-- the react-checksum.

So I hope that this gives you a sense of how server-side rendering works with React. And in another class, we can work through building a complete server-side and client-side rendering system with React together. Let me know if that's something that you're interested in.