The concept of SSR can be confusing. It was especially for me, coming originally from PHP world where everything (or almost) is rendered by the server.
But first, why using SSR?
Here is a list of reasons:
- SEO
- SEO
- SEO
- Accessibility
Did I say SEO 3 times? Well yes, it is important. Crawling bots won't load your JavaScript angular app. So if your meta tags and microdata content is not there in your HTML content, they will never know about it.
It also increases accessibility to your website, as browsing without JavaScript is made possible. But then increasing accessibility is also going to increase your SEO!
First how to add SSR support in your angular project
ng add @nguniversal/express-engine
That's it...
But then how to deploy it?
This is where it becomes different from a client side build. With a client side build you can serve it very easily through a web server like Apache or NGINX.
With SSR, you need NodeJS.
First, you need to build:
npm run build:ssr
Then to run your app:
node dist/server/main.js
Note: Assuming your server build is located in dist/server/main.js
How does it work then?
If you carefully look into the dist folder, you will see your server build for SSR, and also the client build like before.
For SSR, you need both.
And below, the chart illustrates how it works when browsing your website.
In shorts, the server build will call your client build from its parent folder to render your app. Once it rendered the page, it will send back the HTML with its content prerendered.
During the time that the client build actually loads up in the client browser, it will continue to display the prerendered content. But as soon as the client is ready on your side, the prerender content is flushed and the client logic is triggered.
As long as we don't refresh the page we will continue using the client, the endpoint in the address bar will change each time we click on a link, but actually those don't trigger page loading. The Angular client intercepts the event and does its magic to only update what needs to be updated on your current window/document.
But if you do a refresh, then it will call again your distant server with SSR and repeat the process to prerender pages.
So the server side rendering is not triggered on every page I visit?
No it's not.
This is the cool part, which makes your server not too busy and your website browsing faster since everything needed is loaded up in your browser.
What to consider after?
Well, mostly two things:
1. The time to render pages on your server
In order to optimize the render time on server-side, you can use isPlatformBrowser or isPlatformServer in a condition to only request the essential data in your page. And by essential, I mean, anything important for your SEO.
2. The content that gets flushed and then can be unpleasant while browsing
To avoid the flushing to be visible to your visitor, you want your client to quickly get the content on his side too. So you should definitely avoid to big content. Use pagination, use a CDN, and optimize your data.
References
https://angular.io/guide/universal
https://angular.io/api/platform-browser/TransferState
Photo by Christina @ wocintechchat.com on Unsplash