[SOLVED] angular 2 : possible to combine app shell together with universal rendering

angular 2 : possible to combine app shell together with universal rendering

I have a standard angular-cli generated project. Does it make sense to create both an app shell for it and, also combine it with ng-universal's server rendering technique ?

If so , then what's the best way to go about it ?

Solution

Angular Universal is just additional server-side rendering, done 99% same way as in the browser (there is few differences, ie animations). So for sure it is possible to implement it on existing Angular App (even if it contain AppShell).

In my opinion, there is only small pros of doing that.

Let's take a look at this that way:

Standard Angular app comes to the end user as a "empty" HTML page (in most cases the HTML is just:

<html>
  <head>
    <script type="text/javascript" src="yourapp.js" />
  </head>
  <body>
    <app></app>
  </body>
</html>

with JavaScript bundle. JavaScript is generating all code on the client-side. This approach is definitely not SEO friendly (and in many cases not user-friendly).

AppShell gives You ability to pre-rerender some elements which are not changing in the view, at the compile time - the response for customer request is for example:

<html>
  <head>
    <script type="text/javascript" src="yourapp.js" />
  </head>
  <body>
    <app>
      <nav> <a href=""> some element</a> <a href=""> another element</a></nav>
      <component>dynamic content goes here</component>
    </app>
  <body>
</html>

Finally, we are coming to the Angular Universal. What this technique is doing is rendering the complete page (based on request), sends rendered HTML to the customer, and after the browser will render view, JavaScript comes to the action and makes changes in it (it is swapping the "static" page with your Single Page App). That was causing the blink of the page at the early times of Angular Universal. The other problem was that some events performed on the "static" site could not be transferred to the view rendered by angular. As far as I know, at this moment we can solve this problem by using withServerTransition() method from BrowserModule.

Your proposal could speed up the server-side rendering process. Of course, if a website can be load faster, we should do that. But, from the other hand, server-side rendering in Angular works really fast. For example, my boilerplate of the Angular Universal app (https://www.angular-universal-serverless.maciejtreder.com/) is ready on the customer end after ~1-2 seconds (after clearing cache etc). Because it is a PWA, every next visit is done offline, so load time is under 0.5 sec.

So in my particular case and many others (I guess) there is no much sense to get that additional 0,0001 sec. Of course, everything depends on your needs.