Single Page Applications (SPA) have some of the best user experiences on the web. They are fast, work well with mobile, and force developers to create rich APIs. For all of these benefits it’s no wonder that we’ve seen an explosion of web frameworks that cater to this including React, Vue, Angular, Ember, and so on.
There are a handful of negatives however. For one, traditionally, the Search Engine Optimization (SEO) has been poor. That is to say that many search engines and social media platforms don’t know how to parse meta tags from the applications. As a result, search engines may not correctly display the information you’d like them to. Or you may be trying to impress someone by linking them to your website, only for the social media platform to completely fail loading the title and description.
While this is the primary concern, there are a few others such as when users disable JavaScript (this would kill your application) or the fact that SPAs tend to be quite heavy (they take a while to download at first, however after this initial loading they are more performant than traditional web applications).
The good news is that there have been significant strides to try and repair this problem. The key is something called Server Side Rendering (SSR). SSR renders the view server side first, and then transfers this to the client. This means that your clients will always have the HTML up front.
The result is that search engines can read all the meta tags, users aren’t required to be running JavaScript, and you get an initial performance improvement.
The Server Side Rendering implementation for the Angular framework is Angular Universal. Due to the fact that my personal website is written entirely in Angular, I have been suffering from poor SEO and bad social media integration. I took the time to implement my website in Angular Universal and I wanted to share some advice I gained from the process.
The documentation for Angular Universal is a bit sparse, and much of what exists online is quite old, so if any of this helps you I will be very happy.
How to Setup Angular 6 UniversalOne of the key things I’d need to point out right away is that the Angular CLI will do the heavy lifting for you.
Simply open up your project and run the following command.
ng generate universal –client-project PROJECT_NAMEIt is important that you use the project name that is in your package.json. This command will immediately make a lot of the changes for you.
You MUST use HttpClientThis issue really only applies to folks who are supporting an Angular project that has been around for a while (me). I originally wrote my website in Angular 4 and have been updating it ever since. That carried an extra issue because the old Http module from ‘@angular/http’ DOES NOT WORK with Angular Universal. I should mention that this is not mentioned anywhere in the official documentation for Angular Universal. Therefore, if you are having weird issues, this is likely a culprit.
You MUST use Absolute URLsYou won’t get around this one. In order for the prerendering to occur you must specify absolute URLs. This can be achieved by either injecting the APP_BASE_HREF token, or by specifying the base href.
Your Server CAN be Written in Regular JSThe official documentation uses TypeScript for this server side logic. If for whatever reason you want to use JavaScript you can. To fix this, simply change the file extension and modify the extension in your Webpack config.
I hope some of these tips helped someone in need. Angular Universal can be a very tricky technology to implement.