SSR Q&A

[00:00:00]
>> Speaker 1: Do you run into issues withauto formatters, prettier or anything like that, where it'll just create white space on its own?
>> Brian Holt: It certainly would be possible you just make sure that your
>> Speaker 1: Okay.
>> Brian Holt: Yeah.I suppose in this one if, like, we had a really long line here, that it would make difference.

[00:00:21]
Yeah, right imagine this was long enough that it would we would just ha That's, I mean, valid, though, right.
>> Brian Holt: Cool, yeah, great questions, yeah other questions?
>> Speaker 3: How would you inject a different number for starting the counter, the counter starts at five or something like that
>> Brian Holt: Yeah, you would just come in here to client, sorry, app, rather you put five here.

[00:00:50]
Now, keep in mind, we're not keeping our build process running the background, so we still have to rebuild it every time. So NPM run build. NPM runs start my service probably still running over here, yeah, so then you have to restart your server as well, because, again, nothing is in death mode, right?

[00:01:11]
But you can see here count 5, so if we look over here now it's starting at 5.
>> Brian Holt: Yeah, I imagine, people are probably trying to play with things like, why isn't anything changing? It's because you have to rebuild it first, and then you have to run your server.

[00:01:32]
Normally, we would have dev modes and when we get to like next and some of those things, we will have dev modes, but not yet
>> Brian Holt: Other questions? Make sense?
>> Speaker 4: I just want to make sure I understand, is it across all files you don't wanna have white space changes or like where specifically?

[00:01:53]
>> Brian Holt: It's specifically your index.html file.
>> Speaker 4: The index, okay, got you.
>> Brian Holt: No, this won't matter, like what the only thing that it cares about is the actual output. The difference between what it gets back from react on its initial render and what it sees what the server gave it to hydrate.

[00:02:15]
And it's just a hash, right? So if you add more white space to a hash, it changes the hash, right? But,I mean, you could save this, it doesn't care about the actual code or anything like that, my gosh.
>> Speaker 4: And can you talk a little bit more about the splitting side of with the root div that you're using?

[00:02:36]
>> Brian Holt: Sure.
>> Speaker 4: Are there cases where you'd want to split it differently.
>> Brian Holt: Let's look at server.js so that the question is about this piece, particularly right here of the split. And then we write this part, we do the app, and then we do this part. So let's look at the actual index.html.

[00:02:54]
This is part one that we send to the user immediately. Critically, the script tag is in here so that the browser can say, I have stuff to download right? And so it will go and download all that stuff. The async and defer is important here because it'll stop here, which means that the user will not see anything even though the use server side render.

[00:03:16]
So the async defer is critical for any sort of meaningful games here. But essentially, you wanna get everything down to where the app is about to be rendered to, and then you wanna fill whatever you're rendering out here to be here. And then you just need to close out the document, right?

[00:03:36]
Is there other places to split it? I mean, it's always up until where the app is to be rendered, right? I suppose if you're doing multiple islands, right? You have some sort of like, what's it called? Micro front ends kind of thing. One, good luck, right? But two, I suppose you would render up to the first one, you would output that, then you would end up to the second one, output that one, right?

[00:04:02]
He would do something of that nature. Does that make sense?
>> Speaker 4: Yeah. That's exactly what I was wondering is just like as you sometimes you'll see a bunch of pieces start loading. And I was trying to understand what you should be pulling down before you're splitting up.
>> Brian Holt: This is broken again.

[00:04:20]
No, that's correct, yeah, just what I said there. Yeah, just more or less you want to get them up to this point. Other questions?
>> Brian Holt: Yeah, as a note here's just going back to my notes. Here, we did render To String, which is just a one shot. Hey, React give me your entire rendering and then when you're done, return it to me.

[00:05:03]
That's what render to string does. So it says, like, wait until you're totally done. You can do render to pipe able stream which react with its new reconciler. I call it new, how old is it? It's seven years old, it's new to me, never mind. But yeah, so with the Reconciler, it can output like, chunks of like, hey, I did the first part first, I did the second.

[00:05:30]
I'll finish the nav first, and then I'll finish the block first, and it'll give you pieces. And you can output those to the user directly, so that they're getting markup as it renders. So Generally speaking, you would wanna do render to pipeable stream. In our app, render to string and render pipeable stream, sorry, render to string and render pipeable stream are going to be equivalent, this is only going to come out in one chunk, right?

[00:05:55]
So doing it with rendered pipeline stream is a no gain and all it does is make the code more complex. But I'm gonna argue probably that if that's the case, then you shouldn't be doing service side rendering at all, right? Because you need some level of complexity for this to maybe any sort of meaningful.