Lets take a look, nowadays, how a modern web app is displayed in browser. A typical response sent by an Angular app looks like this,
main.jsfile, which is the life for that app.
Browsers take this
Well, he will see this - an empty and dead page -
well, search engine crawlers are dumb. They will. When they want to index our webpage for search results, they will find a plain old HTML file who has nothing, and a big
What’s the solution?
we can use a quick 3rd party-based solution, prerender.io . It checks the person who requested your webpage, is a bot or human? If it’s a human, it sends the regular response - a plain HTML with a main.js file. But if it’s a bot, prerender.io opens a browser in itself, renders the app there and then sends the contentful html files.
So the SEO problem can be solved. But-
First meaningful paint measures when the primary content of a page is visible to the user. In the picture bellow we can see user had to wait for 8 seconds to see anything meaningful.
A big portion of this 8 seconds time used to -
main.jsfile, if user’s internet is slow - this time will increase.
And user didn’t see anything meaningful in screen, recent study shows that user leaves any webpage that takes more than 3 seconds to load.
Server side rendering solves both problems. Instead of sending the a dead blank html file, it renders our app in the server ( blessings of Node.js), and sends the html to browser. Now user don’t have to wait for downloading that big
main.js file. It can show the server rendered HTML immediately. So user will able see some meaningful content very fast.
Now lets see how this SSR works:
As meaningful HTML is served to user immediately, So first meaningful paint time improves significantly with SSR.
In the next post, we will learn how to implement Server Side Rendering with Angular, stay tuned.
Hey there, I am Saadnoor Salehin Shwapneel, a software engineer working at Cefalo AS, ISee more..
Subscribe to our newsletter and stay updated.