Angular Universal | Angular Server Side Rendering
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> <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>
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?
- Better SEO
- Improved Performance on mobile devices.
- Loading pages quickly
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!