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 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.
The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds.
Key Benefits for SEO
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.
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
- 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.
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.