Angular Universal

Technology has a way of raising expectations. With each advance in software development, there always seems to be another that builds upon the previous improvement. Take the example of Single-Page Applications (SPA). 

• SPAs improved the experience of web applications by utilizing HTML5 and JavaScript (JS) to deliver everything on one page. 
• SPAs dynamically update when users interact with it.  
• Users don’t have to wait for pages to refresh, even for complex applications. 

But when SPAs are rendered on web browsers, users see nothing but a blank screen until all the framework and application code are downloaded and put together. A solution to those problems emerged in the form of Angular Universal Server-Side Rendering (SSR), which makes the page look like it’s loading faster.

Why Use Angular Universal?  

The improved performance is really a matter of perception. Angular Universal sends information rapidly but in stages, which allows the user to receive a rendered view of the page more quickly.  

• It first sends a shell, which effectively is a static version of the landing page to hold the user's attention.  
• At the same time, the Angular app is getting loaded in the background.  
• The user perceives near-instant performance from the landing page and gets the full interactive experience after the full app loads.  

Angular believes displaying the first page quickly is critical for user engagement. Approximately 53% of mobile site visits are abandoned if pages take longer than three seconds to load. 

Key Benefits for SEO 

A primary benefit for using Angular Universal is that it improves web crawler support for enhanced Search Engine Optimization (SEO). With traditional client-side rendered SPAs, anything that is not in that shell of an .html is all rendered by the JavaScript. But meta tags, images and other specifics about the page that are important for SEO benefits are not present right away.  

Another big benefit is that Angular Universal allows social networks like Facebook and Twitter to read the page. That is not the case when pages are built with traditional SPAs since none of the page-specific data (image, title, desc) will show up on Facebook.

Web applications built using Angular Universal are also beneficial for users with lower-powered devices which is especially important for mobile users with slow devices.  However, even if a user has a slow device, but a fast internet speed, the device still must render all that JavaScript to make the app active

Potential Drawbacks 

There are potential drawbacks that have been encountered when using Angular Universal and should be taken into consideration when deciding to use it for projects. Some of the issues involve common elements of traditional client-side rendered applications that are absent in server-side rendered applications. 

JS is not immediately available

• Angular Universal can generate a static version of web apps without JavaScript.  
• Once the initial shell appears, developers who are dealing with large bundles may notice that it takes a long time for the application to load, which is especially true if they are not using practices like lazy loading that will keep the bundle size down.  
• If the app takes a long time to load and people start to interact, the site is not going to work. 

No Document Object Model (DOM)

• If application components use DOM, the app will not work as expected.  
• The app may not function at all when the user starts working with it. 

Angular Universal requires an actual server

• A static server will not work, which may or may not add complexity. 

Doubling-up on calls

• Developers must be careful to avoid redundant server calls that negatively impact performance and user experience. 

All these situations involve extra work for the developer. These factors can shift the way the original work on the project was set up.

To Recap 

The perceived performance benefits associated with Angular Universal for server-side rendering deliver an improved user experience along with SEO benefits. But as with any project, be sure to account for all aspects of the technology stack being considered so that the optimum result can be realized.