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. Single-Page Applications (SPA) for example improved the experience of web applications by utilizing HTML5 and JavaScript (JS) to deliver everything on one page, which dynamically updates when users interact with it. SPAs save a lot of time for users because they don’t have to wait for pages to refresh, even for complex applications.

But when single-page web applications are rendered on the client side, on whatever web browser they are using, the user sees nothing but a blank screen until all the framework and application code are downloaded and put together. Nothing is evident until the entire page appears; that includes preview snippets and search engine indexing capabilities.

A solution to those problems emerged in the form of Server-Side Rendering (SSR). Angular Universal addresses some of the issues by providing a different way to serve-up pages to the client. It does the same work that other methods used to build the page on the client-end.  But Angular Universal instead does the work on the server-end before sending it to the client.

“A server-side rendered single page app first renders what the page is supposed to look like.  It sends the html/css first and then loads the JS after that. Once the JS has been downloaded, it takes over and works essentially just like normal,” said Ephraim Schmitt, Senior Mobile Developer at TDK Technologies. “The page looks like it’s loading faster. So instead of staring at a blank screen, you are looking at the design of the page itself.”

Why Use Angular Universal

Schmitt said 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 has said that displaying the first page quickly can be critical for user engagement since 53 percent of mobile site visits are abandoned if pages take longer than three seconds to load.

“As far as the user is concerned, the page is up in a little over a second, even using a 3g connection,” Schmitt said. “But if you try to interact with the app before the page is loaded, you won’t get a response. It’s only a shell. There’s no JavaScript. So, if there are any buttons with click-handlers for example, they are not going to be interactive until the full page is built.”

A primary benefit for using Angular Universal is that it improves web crawler support. 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 search engine optimization 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.

“Since the full page is being rendered in its entirety, the metatags could be inserted dynamically with Angular Universal. So, when a web crawler ‘pings’ the page, it will be created with all the information and images the web crawler is looking for. That to me is probably one of the most important benefits,” Schmitt said.

Web applications built using Angular Universal are also beneficial for users with lower-powered devices.  Schmitt said that is especially important for mobile users with slow devices. He cautions though that 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.

Considerations

Schmitt noted several 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 available: Angular Universal can generate a static version of web apps without JavaScript. Schmitt said that 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. That 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. Schmitt said it may not function at all when the user starts working with it.
  • Angular Universal requires an actual server: A static server will not work. Schmitt said depending on the situation, this fact may or may not add complexity.
  • Doubling-up on calls: Schmitt said developers must be careful to avoid redundant server calls that negatively impact performance and user experience.

“All of these situations involve extra work for the developer. If they encounter any of these, they will need to come up with solutions to deal with them. These factors can shift the way the original work on the project was set up,” Schmitt said.

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.

Resources used in this article include:

An IT pro who'll take the time to learn my business. Is that too much to ask?