React SSR from Scratch

[00:00:00]
>> Brian Holt: Let's write some SSR by hand, because that seems to be the thing that I like to do, mutual torture essentially I'm just kidding. This I actually didn't really do enjoy writing this stuff. Okay, so we're gonna make a new directory here, SSR.
>> Brian Holt: Okay, and I'm gonna open this in code, we're gonna do another npm init -y.

[00:00:29]
We're gonna npm install fastify. I don't really care what node server you're gonna use, you could just do node HTTP as well, we'll do that again later. I generally default to fastify, it's just the one that I know the best. But you could do this with Express, you could do this with Koa, all those are totally fine.

[00:00:50]
React, react-dom, and vite, we're gonna need all of those. Point of caution for those people watching this later, just be careful of versions. So let's just take a look at this uh-oh, we need them completed there we go, okay. In SSR, in package.json, sometimes these drift by the time I'd say you watch these, and when I create them.

[00:01:19]
So these are the versions that I'm using now, if you see weird errors that I'm not seeing here, then just try and going back and installing the versions that I had them at. All of these, like fastify and fastify static, don't change too much from release to release I wouldn't worry too much about it.

[00:01:34]
But if there's a new major release, you might be suspicious.
>> Brian Holt: In fact, a really easy thing to do would just be grab this, paste this is your package.json, and say npm install. In fact, maybe that's just what I'll do right now.
>> Brian Holt: Package.json, blah, save that and then just say npm install, and that'll guarantee you that you get the right versions.

[00:02:06]
>> Brian Holt: There you go, easy peasy.
>> Brian Holt: I was gonna have you put in here as well, build and start, so vite build, right? That's actually going to build your project. Do we need that? I don't actually remember. But start, that's the part that I really care about, is node, and it'll run server.js, yep.

[00:02:30]
And then we also did put in here as well type of module. So if you didn't put that in there, make sure you have that in there let's make that a bit bigger.
>> Brian Holt: Okay, let's go make a index.html. This is gonna look eerily similar to what you've written before, and we're gonna say this is react SSR example.

[00:03:03]
And I'm gonna have an id "root" here, and I'm just gonna put.
>> Brian Holt: There we go. The one thing I'm gonna say before we get too much further into this server-side rendering, and then client side hydration, which we're about to do in just a second, is extremely sensitive to white space.

[00:03:25]
So just be suspicious of that in your head here, if you see anything about hydration errors, it's probably white space. So in other words, don't have this, or you're gonna have a bad time.
>> Speaker 2: Can you explain why that is, why is this in the DOI space?
>> Brian Holt: So what's gonna happen is you're going to put your app in here and you're gonna ship a complete markup, and then it's gonna have a hash on it, on the server setting.

[00:03:58]
I hash it to this and then it's gonna happen on the client side and the client's gonna say, I hash it to this, and if they don't match it says, I give up, I'm gonna render it myself, right, does that make sense?
>> Speaker 2: So you just lose the benefit of the SSR content, is that?

[00:04:11]
>> Brian Holt: Yeah, you get all the downside and none of the upside. Okay, so we talked about hydration errors, we'll get there, cuz I guarantee you somebody's gonna see it. We're gonna do just vanilla, no JSX, react, again, this would be actually pretty easy to do with vite, you could just do the --SSR.

[00:04:31]
It actually has a feature built into it for server-side rendering apps. We're just gonna keep things as simple as possible here cuz the client-side reactor is not the interesting part of this. So we're gonna do app.js here and we're gonna say import createelement as h, and then we're also gonna put a useState in here.

[00:04:54]
I wanna show you that this actually does translate to a interactive client-side app. And then we're gonna do a function app. This is gonna look really similar, we're just gonna add additional button that does count because it's reacting, we love counting things. So const count, setcount = usestate 0 or 1, or whatever you wanna put there, and then we're gonna say return h, put a "div", null, h "h1", null, "Hello Frontend Master".

[00:05:40]
>> Brian Holt: H("p", null, "this is SSR"). And then one more, for good measure, we're gonna put a button.
>> Brian Holt: Hopefully, this is making you grateful for JSX, cuz it gets a bit tedious to write, doesn't it? Onclick.
>> Brian Holt: SetCount(count +1), and then we'll put 'Count: '). Notice these are back ticks, so I'm doing a template string count to count, and then down here export default app.

[00:06:33]
I will save at this time, it's only once. Actually it's the first time I've done, that's finally the first time I've done it today, if we're being really honest. So, a div, inside of it there's an h1 there's a paragraph, and there's a button, and the button allows you to change the text on the button.

[00:06:54]
Truly, miraculous work here, changing lives, that's what I like to tell myself I'm up here changing lives.