What is Angular Server Side Rendering?

Angular Server Side Rendering is rendering the initial view from the server side later on everything will be handled by the Browser. In, this blog we will try to implement SSR in Angularjs. In addition to that you will know what is Angular Universal?

Regular Angular Application

A normal Angular application executes in the browser. On User’s demand, It renders pages in the DOM. Initially, Browser receives empty index.html(common developer love to name it as).  similar to the code mentioned below.

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">
<header-directive />
<div ng-view></div>

<script src="custom.js"></script>
<script src="header-directive.js"></script>


If you observe we got absolutely no content initially. Now, the browser will download all JS, CSS files and it will generate DOM accordingly.  Having no content on the page means your page is irrelevant for any searching operation that uses google. wow, we got one limitation of the traditional angular application. 

Angular Universal OR Angular Server Side Rendering

Angular Universal generates static application pages on the server through a process called server-side rendering (SSR).

Generally, It can generate prerendered HTML pages which will be sent to the browser on a user’s request. It means User will always get something on an inital load of the page. Which is good for our SEO. After the initial Load Browser switch off the SSR mode as all files are downloaded. The client has everything to deal with.

Here on, Let me refer Server Side Rendering asAngular Universal.


Why Angular Universal?

  1. Better SEO
  2. Improved Performance on mobile devices.
  3. Loading pages quickly


Better SEO: Any Search Engine like Google, Bing does not read javascript. It gets an idea of what your pages are suggesting based on HTML that rendered. Although, how interactive your page is OR how efficient JS code(why are we talking about js code if web crawlers do not read them? oops, maybe I am just convincing you), Your page will never be highly indexed by them.

Angular Universal can generate a static version of your app that is easily searchable, linkable, and navigable without JavaScript. It also makes a site preview available since each URL returns a fully-rendered page.

Improved Performance on mobile devices:  
some small devices are so poor to Javascript, that initial loading is tough to handle. If they get prerendered markup, I mean HTML. User Experience will be better.


Loading pages quickly: 53% of the user leaves the website if it takes initial loading time greater than 3 sec.  To keep the user engaged you need to load your initial view quicker. When a user sees pages loaded he gets busy in looking into your app. Meanwhile, your all scripts get downloaded the and browser gets everything that is needed. Hereafter everything goes like a tracer bullet.


How It Works:

To implement Universal App, you need to install platform-server package. what does this package contain? This package has a server implementation of DOM, XMLHttpRequest, and some low-level features so that we don’t need the browser to generate the initial view.


Practical Implementation is here.

Looking for AngularJS Development Company, hire our dedicated developers!

Also, Read:

Server-Side Rendering JavaScript in React Js

Angular 6 Features