Intermediate React, v2 SSR Rationale & Initial Setup

Transcript from the "SSR Rationale & Initial Setup" Lesson

[00:00:00]
>> Brian Holt: So the next section we're going to do is server side rendering, which is going to get us into Node.js, which I love Node.js. That's literally my job is to work on Node.js at Azure. So I'm going to try and not cover a ton of Node.js, because this is not a Node.js workshop and there's plenty of good Node.js content on Frontend Masters.

[00:00:21] So we're gonna keep this as bare minimum as possible.
>> Brian Holt: So there's a couple things that we have to do to prepare for server side rendering. And, I guess, let's talk first about why you want to server side render. If you go to our app right now and you hit View Source, you can see here there's nothing here, right?

[00:00:42] There's absolutely nothing here. So that means we have to download all the JavaScript, and then have it render, and then it'll load, right? Wouldn't it be better if it could just download, and show the user something, and then in the background load JavaScript, right? So that's what server side render is going to do.

[00:00:58] It allows us to write all of our application in React, pre-render everything, and then send the user the complete markup. And then React will take over the page once it's finished loading. So we have to do a couple of things to prepare for that. The first thing that we're going to do is, we're going to make a new file called ClientApp.js,

[00:01:23]
>> Brian Holt: And this is gonna be all the code that runs only in the browser, right? So imagine if you're using things like Google Analytics, that doesn't work in Node.js, right? I'm sorry, it doesn't. But you could do that here. So here we're gonna say import React from react, import render from react-dom.

[00:01:46] Import, I'm sorry, not react, render, but we're actually going to import hydrate. Import app from ./app. And then we're going to say hydrate App at document.getElementById('root'));
>> Brian Holt: And then here you would say any other browser-only things. In other words, this part's not gonna get run in the browser.

[00:02:25] So hydrate is a special function. It's like render, but what it's saying is I expect there to be markup already in this place. Just take over what's there, don't re render, right? Whereas, if I said render here instead of hydrate it would say blow away whatever is there and re-render it.

[00:02:40] Like I don't care what's in there, right?
>> Brian Holt: Okay? Then we're gonna go to App.js here. And I'm going to delete this part at the end, and I'm just gonna say export default App. And then now, I can import this into Node and then render it there.
>> Brian Holt: Okay, now you have to go through your entire application, and make sure on the initial first render that there's no reference to documents.

[00:03:16] In this repo there is one, and it's in modal. Notice where it says document.getElementById? If you try to do this in node, it's gonna say no thank you, right? So what we're gonna do instead is we're gonna say, we're just gonna move this into the effect here. Okay?

[00:03:39] Now this will only happen in the effect, and that'll be fine.
>> Brian Holt: Next thing I want you to do, we're going to install two new things. We're going to say npm install babel-cli and express. Babel CLI, cuz we're gonna have to run our React code through Babel, right, because Node doesn't speak JSX.

[00:04:07] And then Express is just one of the many Node frameworks. We're just gonna use that one cuz it's the most popular one.
>> Brian Holt: Okay. Next thing that we're gonna do. Is we're gonna go and make inside of package.json. We're gonna make a build. So here in scripts, we're gonna say build.

[00:04:46] And this is how you build your application for production. We're gonna say build parcel build --public-url ./dist src/index.html.
>> Brian Holt: So this is gonna tell parcels, hey, build my code for production. And then this public-url part says that I'm going to be serving everything from /dist, so be aware of that.

[00:05:21]
>> Brian Holt: Okay, and then down here, we're also gonna put in a start. And that's gonna be npm run build && babel-node server/index.js. Now, I'm gonna use babel-node. This is typically not recommended for production use. But it's going to save us a lot of setting up. Typically what you would do is you'd pre compile your React code in such a way that Node could read it, and then use that code so that it doesn't have any JSX, right?

[00:05:57] But today, that would take a while. And that's not really that useful of an exercise. So just be aware that there's a better way to do this. We're just going to kind of shortcut it here.