Server-Side Rendering

[00:00:00]
>> Alex Okrushko: So right now we're continuing our optimization and improvement process. We've already done a few things. We enabled zoneless. We did the lazy loading of the components that are not on the critical path, and we also improved our image loading process, right, through the ng-optimized image. We're getting pretty good, right, we're getting at 83, which is not bad, not bad, but we can do better.

[00:00:31]
Let's do better. And the next thing we're going to enable server-side rendering and hydration for the components. So right now, whenever we load the page, our initial page, what we get here, see a network, and the first page that we get. I can preview it. Let me just increase that in size, here you go, that's what we get. We're not getting much we're getting initial image and then we have this app root, and then we'll load Angular, and Angular kicks in and starts creating all the components for us, using the chunks that were used for it.

[00:01:23]
That's working, there is slight problem with search engines as well, right, because some of them not running JavaScript, a lot of them actually do now, but still it's not as fast, right? It's better to provide certain things immediately. So what we're going to do is we're going to introduce server-side rendering for our application.

[00:01:46]
And Angular makes it super easy to introduce it. Let me stop this, so you can just add and add Angular SSR. One thing, do the force flag as well, I'm going to do it with you here, force. The reason again we some packages, you might complain, but what it's going to do is going to scaffold certain things for us. Let's see what it does.

[00:02:15]
So once we run this, it would say, hey, we'll be installed, so this package will be installed, we'd like to proceed, and we, yes, we'd like to proceed. Yes, we'd like to proceed. So installing packages, and let's see, yes, it's still complain about certain things, fix. I mean just stumbled, run this again, installing, confirming installation.

[00:02:49]
Yes. All right, let's see if I did the change actually. It did the change, did the change, did it, did the change. No, OK, interesting. Let's see if we can manually do that. Yes. All right, I see to do the force, do the force, that should be fine. I can do quick thing is we can check in our package.json in our packages, let's remove these packages first, and then it should be able to add them.

[00:03:50]
Let's remove them. Let's clean. No modules. To trash. I'll do the npm install. I don't think we'll need the force anymore. I don't think we'll need the force. There you go, and then let's just add this package first. All right, proceed. I want the reason I'm doing this, yes, here you go, it did all the scaffolding for us, we're going to add those packages later.

[00:04:18]
I removed the index packages right now. It was proceeding before, but this time decided to not proceed, which is fine, we'll make it work. So what it did is you can see here, it created a few files for us. First of all, it's installed a few packages, let's just take a look at this first, it installed the platform server from Angular, it installed the SSR package, and it also installed the Express, which is a Node package to serve applications.

[00:05:01]
It also installed a few types for us. Let's see what it does here, so. What it said it did, it did create the main server file and some configs. So server is our Express application. We can get any APIs here if you want, now we have a Node on the back end running application. And what is interesting here is that it delegates for the Angular app to do, to handle most of the request responses, right?

[00:05:40]
If we want to have some again APIs, we can introduce the APIs here as well, and do, you know, connecting the database, fetching data from database and something like that here, it'll be basically serving those APIs now, which is very powerful. But it's basically an Express app. So that's the server file. Then we have the main server file, that's the one that will be bootstrapped when we have the server running.

[00:06:17]
And you can see it's using also config. And this config comes from the config server. Let's take a look at this. Our config server looks very much like our app config, right, like the structure, but here will provide server rendering and with some routes, so we have some server-side routes too. And then it also pulls in the app config from our app and merges them together as well for the server, so server is fully aware of all the providers that we have for the our client-side application as well.

[00:07:00]
And then basically this is the routes for the server-side, right now, everything is just pre-render, we're going to change this in a second. But this is where we can do a lot of cool stuff. All right, config server, those are all the files that it created for us. OK. Cool, now let's do some magic in our server routes. Right now, everything we try to pre-render.

[00:07:50]
What we're going to do is, we cannot prove and actually, it also updated our app config. Let's see what it did, it provided here for us, client hydration. What is client hydration? Typically, historically, if you were ever used like Angular Universal or other server-side rendered parts, it will create you HTML, the styles and everything on the server.

[00:08:24]
In your index file, you will get it all procreated. But then Angular uploads kicks in and it's destroys existing DOM and recreates the new one for you, so you would have that some call it flash, little flash too, it's like very fast, but it basically destroyed the existing DOM that you saw initially, that's also nonfunctional, and then it created a new one.

[00:08:58]
So with the new SSR approach, Angular no longer does this. So you have an existing DOM, existing HTML structure that is loaded from your server's side, and then it will go over and hydrate that DOM with functionality from Angular, so instead of destroying this, it'll basically start attaching all the functionality for for Angular itself, so the clicks, the buttons, the it's all I'll be fully aware that those are actually components.

[00:09:31]
What does event replay do? Well, say you have a DOM that's already there and users are super fast and starts clicking some of the buttons or does some turn things. Well, because the Angular is still bootstrapping that DOM, some of those could be missed. And we don't want that. So what Angular does instead is tracks where user clicked, and if things were not hydrated yet, meaning there's no JavaScript Angular functionality that wraps it yet, then once it wraps it, it will replay all the clicks to those components.

[00:10:12]
This is super cool stuff. And we're going to see it in a second. But we can do even more. We can, this is hydrates the entire application altogether. What we can do, let's actually do the full hydration first, and I'm going to do the partial hydration after.