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.
“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.
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.
- 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: