The Angular framework from Google is one of the most popular web frameworks in use today. It is a robust platform that allows developers to build responsive web apps and single-page apps (SPAs) very easily. However, there are some negative aspects to these types of web apps. Primarily, search engines have a hard time indexing these types of web apps. Web scrapers (used for things such as Facebook sharing previews) cannot scrape dynamic data that may be displayed with different pages/views. So what can you do if you love working with Angular and love the benefits of Angular SPAs, but want the benefits of SEO and social previews? Welcome, Angular Universal!
Features
Angular Universal brings the ability to render your Angular apps on the server-side similar to most other dynamic web frameworks. But wait, isn’t that the main reason we use Angular? So that we don’t have to depend on servers and have the latency of refreshing pages between different web pages? Well yes, but Angular Universal brings you the best of both worlds!
Angular Universal allows for a precompiled initial view to be sent from the server. This keeps the initial page load time shorter for the end-user compared to a normal Angular web app. Normal Angular web apps take a few seconds to load on the initial request before the user can even view or interact with the page. After the initial request, the majority of all subsequent requests are handled directly in the browser.
Another benefit of using Angular Universal is for web apps that will be viewed on mobile devices. Normal Angular web apps are quite slow to load on mobile devices; especially with low data speeds. This is due to the fact that the Angular SPA has to load all JavaScript libraries it needs before it can even render the page. When using Angular Universal, the initial page returned is just a precompiled static page. This will not take much time to load before the user can see the page. Behind the scenes, the extra libraries and other resources needed are continuing to load. This gives the user the impression of a fast page load. Most interactions require these extra JavaScript libraries need to be loaded before they can be used.
Sharing Via Social Media
One of the most frustrating things about normal Angular web apps is the inability to share page URLs on social media. It does not show a proper preview of that particular webpage or item. It always uses the base metadata hardcoded in your index.html template. This is due to the fact that the HTML <head> metadata is not dynamically generated on the server. Social media web scrapers do not parse JavaScript or take “Actions” on a web page that trigger a re-rendering of the page. No matter what URL from your web app you try to share to social media, the preview will show the same every time. Angular Universal allows for these different URLs to show the proper preview for each page/view.
Conclusion
Hopefully, you can now see what Angular Universal is all about and all the benefits it brings when coupled together with a traditional Angular web app! Have you used Angular Universal in any of your web apps? If so, what did you find was the biggest benefit for your apps? Let me know in the comments!
