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

Angular Server-Side Rendering

Comments

Software

Add a date variable in a Slack Workflow

More from this blog

Introduction to programming for kids

How to run an SE Spectrum online?

A better way to discuss?

Modern dependency management

Street Epistemology

But first, why using SSR?

First how to add SSR support in your angular project

But then how to deploy it?

How does it work then?

So the server side rendering is not triggered on every page I visit?

What to consider after?

1. The time to render pages on your server

2. The content that gets flushed and then can be unpleasant while browsing

References

Command Palette

Comments

Software

Add a date variable in a Slack Workflow

More from this blog

But first, why using SSR?

First how to add SSR support in your angular project

But then how to deploy it?

How does it work then?

So the server side rendering is not triggered on every page I visit?

What to consider after?

1. The time to render pages on your server

2. The content that gets flushed and then can be unpleasant while browsing

References