Server side rendering(SSR) in Angular

08 Jul 2017

Single Page Applications(SPA) have gained a lot of momentum in recent times. More and more high profile websites are adopting this design strategy, as it provides attractive benefits for both users and webmasters

  1. It loads the main HTML & scripts once, and for further navigation or user request it loads just the required data thus providing smooth/fluid & faster user experience.
  2. No page reloads & bulk transfer of data to & fro the server.
  3. It offsets most of the processing to client side, maintaining "state" and also reducing latency of each user request as it transfers just the required data. This allows the server to serve more clients efficiently.

There are various SPA frameworks like Angular, Ember, Vuejs etc., that helps developers to build excellent single page apps. But these application comes with certain challenges like

  1. Getting all pages indexed properly: As the requested page HTML will not contain the relevant meta tags, title etc., so making a pages SEO friendly is a big challenge.
  2. Social sharing platforms like Facebook, Google+  requires proper Open Graph tags so that proper content or media can be pulled & shared.
  3. The initial page elements are rendered empty and it jumps up & down as the content are loaded dynamically affecting the user experience.
  4. Though search engine like Google, Bing can crawl through the content fetched through ajax. Indexing proper or expected content becomes a major challenge.

So a reliable way to ensure SEO is to render the required HTML tags for required page on the server side. This has become a must-have feature for the SPA frameworks.

There are two ways to render the HTML in server

1) Approach 1 : To use a headless browser like phantomJs on server or services like pre-render.io and run tasks to pre-render or generate the static HTML for each page and save that to public CDN. Though this approach is more performant and scalable it is not flexible compared to next approach.

2) Approach 2 : To dynamically re-render the content first on server side and then run the same code again on client side & boot the application to current state properly. With proper caching of the server generated HTML and re-using the server generated content/injected JSON data, this approach is also equally scalable and performant like the first one and in addition offers more FLEXIBLILITY. 

Angular has introduced server side rendering (using approach 2) for its app from Angular 2+, through "Angular Universal" project. The benefits are

  1. Better perceived performance - as the page loads instantly with all required contents & progressively loads the required data.
  2. Reliable, flexible and efficient way to ensure all search engines can crawl and index contents.
  3. Ensures all the social platform shares a proper content as per the end user expectation.
  4. Removes dependency on using other complex rendering platforms.

Angular Universal can be considered as a middle-ware between Angular app and Node.js server, which does all the magic to offer best of both words SEO + SPA. This project was build for node.js platform, but through adapters it can be run on Asp.Net core. The Angular Universal team has promised to extend the adapter development for platforms like Java, PHP and phython. 

For quick start in node.js environment you can follow up this page which will guide you in setting-up the required developer stack and integrate universal within few minutes : https://universal.angular.io/quickstart/

For ASP.Net  - Angular Universal starter pack, I would recommend using either

  1. Yeoman generator templates, which allows you to create .net core project with frameworks like Angular / React / Vue / Aurelia / Knockout / etc. 
    npm install -g yo generator-aspnetcore-spa
    more information on the setup can be found here -> JavaScriptServices

  2. If you directly want to use Angular Universal with ASP.Net core, you can clone this active Github Angular4 universal starter repo which has all required technologies integrated that makes it easier to develop/kickstart project with IDEs like Visual Studio code Or Visual Studio. 
    https://github.com/MarkPieszak/aspnetcore-angular2-universal?

What makes Angular Universal + Asp .net core work ?

  1. Microsoft.AspNetCore.NodeServices - Enables communication and invoking node scripts from .net core apps
  2. Microsoft.AspNetCore.SpaServices - Enables Server side rendering for frameworks like Angular, React etc., Offers support for Webpack middleware, Hot Reloading & routing
  3. Microsoft.AspNetCore.AngularServices - Services more specific to Angular development.

Related Posts