This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Server Side Rendering to Strings" Lesson
[00:00:00]
>> Brian Holt: Okay, finally, let's go write our node server.
>> Brian Holt: So because this is in babble, we can use import syntax. So we're gonna say import express from express.
>> Brian Holt: And the other thing you're gonna call this is,
>> Brian Holt: Where do I put this? And make a new directory here inside of this folder.
[00:00:28] Not inside the source and called server, because you generally want to keep your front end and back end code separate, and then I'm just going to call this index touch as.
>> Brian Holt: So import express from express, import react from react, import renderToString from react-don/server, import Server location from at each router.
[00:01:09] Import fs which is a file system, from fs to node module and import app from /src/App.
>> Brian Holt: Okay, first thing is you wanna identify what port this is gonna run on, so we're gonna say const PORT = process.env.PORT. So you can either have the port set an an environmental variable, and if they don't set anything, just set it to 3000.
[00:01:47] Just any random number above 1000 will work. Okay, we're going to say const html = fs.readFileSync. Dist/index.html.tostring, so this is going to go read the output html right, so that we could use that in our server side rendering
>> Brian Holt: Then you're gonna split it into two parts, right?
[00:02:24] So const parts = split. Well, let's go take a look at this first. If I go into my index.html, where do I want my markup to actually go? We want it to go here in route, right? So what I'm gonna do is kind of be a little tricky, because I just loaded this whole thing as a string and I'm going to split on not rendered, right.
[00:02:52] So the first part of it is going to be all of this, right. And the second part of it will be all of this, then I'll put my mark up here, and then I'll put the first part first, the rendered mark up, and then the second part. Does that make sense?
[00:03:11] So I'm gonna say html.split not rendered.
>> Brian Holt: So, now I'm gonna have an array of two parts, the first part and the second part.
>> Brian Holt: You could do this with something like EJS, or Handlebars, or you could even do it with React itself to render this together. This is really simple, and I think this is not a bad way of doing it either.
[00:03:39] I'm going to say const app = express, to start a new express server, I'm gonna say app.use/ dist as express.static dist. So, this is gonna statically serve everything in the dist directory, right? So, the HTML, CSS, JavaScript images, all that is gonna come from the dist directory. Here I'm gonna say app.use and then I'm gonna give it a middleware to run every single time that it gets requested, okay?
[00:04:17] Here I'm gonna say const reactMarkup = ServerLocation. So this is from Reach Router to do the server site rendering. url =rec.url. So, if someone requests details/200, that'll be the URL coming in from express and then you'll put app inside of that and then down here you're gonna say res.send.
[00:04:56] I'm going to do three parts here.
>> Brian Holt: You could say parts 0 plus render to string react markup. + parts[1], right? First part of the HTML, rendered markup, second part of the HTML. And then here, you're gonna say res.end();
>> Brian Holt: Okay, then you'll say console.log. Listening on PORT and say app.listen(PORT).
[00:05:44]
>> Brian Holt: So if you don't know too much about the nodes part of that, that's totally fine. There's plenty of courses on here about that but are there any questions about the React portions of this? This is kind of the core part of how to get this to work with react.
[00:05:59] You render it on the server, and you're gonna send it down to the client as complete markup. So let's give a shot, but you're gonna need two packages to do this. You're gonna need express, you're gonna say npm install. Express and then you're also gonna need @babel/node. So this one is a common js framework and this one is going to allow you to run all your node code through Babel as well.
[00:06:33] So
>> Brian Holt: Can delete that as well from that .js, that's not super important. One more thing to fix as well in package.json, remember we switch from client app to now being the browser entry. So we have to also do build, not build but in index.html that's what it is.
[00:07:04] Here instead of being client app, we're going to point this out ClientApp. Instead of it being app, we're going to point it at ClientApp.
>> Brian Holt: Now if we start and stop the server again, pm run start, now this should work.
>> Brian Holt: Okay so now all the JavaScript is working as well.
[00:07:47]
>> Brian Holt: But the point that I wanted to bring up here, if I look at this page again here in My view source. It's still loading like all the correct code here as well right? And so it's still doing service side rendering. It's doing the appropriate one per route because each router is taking in that url and rendering the correct page Right?
[00:08:09]
>> Brian Holt: So we get to define all of our routes inside of the browser client-side renderer, but notice still able to use all the same routes, which is cool.