Server Side Rendering
What is Angular Universal?
Angular Universal is a pre-rendering solution for angular applications. For example, a non-SSR single page application works by sending the data to the client side and then building the HTML that represents it. However we may want to do ahead of time instead. For example on the server side or at the moment when application build time. That’s possible with Angular Universal.
How Angular Universal Works?
When using Angular Universal HTML and CSS are already prepared. This can be done at compile time or when the user calls the page. HTML and CSS will be presented to user for see something on screen quickly. Again everything will look like a normal single page application works.
Why do we need Angular Universal?
Facilitate Web Crawlers!
Web Crawler is a generic name given to bots that index all sites, pages, content, so that the user can find the searched word when a person searches in a search engine. Google, Bing, Facebook, Twitter use web crawler for making its application content searchable. Angular Universal creates the static version of your application to make your application linkable, searchable, navigable without JavaScript easily.
Display First Page Immediately!
There can be many reasons to choose Angular Universal but the most important reason is to effect the performance. It is a critical point to display the first page quickly for user experience. With Angular Universal, you can create a opening page that is exactly like your application. Pages are HTML and can run without JavaScript. Pages do not process browser events, but they support navigation within the site using routerLink.
“53 percent of mobile site visits are abandoned if pages take longer than 3 seconds to load.”
Improve performance on mobile and low-powered devices!
Some devices do not support JavaScript or run JavaScript too low. In these cases, you may need a server-generated, non-JavaScript version of the application.
Actually the thing that i want to show you is the experience when i compare an application which is SSR or not. I have made a performance test of these applications with Chrome Dev Tools. The first experience that i have had with a blank page application. (Network: Fast 3G)
If we consider the Non-SSR blank page application it took 28892 ms to render the page.
On the other hand with the SSR blank page application it took 6208 ms to render it.
It is obvious that is huge different.
