Angular is designed to build powerful single-page web applications. In a Single-page application, normally we first bring the data to the client and then build the HTML that represents the data on the client side.
Angular Universal allows us to run the Angular app on the server, thus enabling us to serve static HTML to the user.
Reasons for choosing Angular Universal
Before going in-depth into the concepts of Angular Universal, let’s look into why we need it in building our application.
The following are the primary reasons why Angular Universal should be preferred:
1. Performance
A Single page application initially loads an empty index.html file with almost no content. This means when the HTML file gets initially rendered in the browser, all that the user will see is a completely blank screen.
Using Angular Universal, instead of the blank index.html page, we will be able to display something interactive to the user, by rendering the HTML on the server and sending that on the first request.
Thus the user can then view some initial content much faster, which directly improves the user experience (especially on mobile), giving us an important use case for server-side rendering.
2. Search Engine Optimization (SEO)
The second reason for preferring a server-side rendering is to make an application SEO friendly. Most search engines take the title and description shown in search results. They extract it from metadata tags present in the header section of a page. So search engine crawlers expect these important SEO meta tags to be present on the HTML content returned by the server, and not to be modified at runtime. Hence having a page server-side rendered with the essential metadata tags is important for ranking correctly in different search engines.
However, this is not the case for the Google search engine.
Because, the Google search engine indexes most Javascript pages correctly, and a good proof of that is the Angular Docs site, which in itself is a Single Page Application built with Angular. But if we need to target all the search engines like Bing, then server-side rendering is a must.
3. Social Media Crawlers
Another reason for using Angular Universal is to improve the social media presence of our application. Social media crawlers from different platforms work similarly to the search engines that crawl an application looking for titles and descriptions.
How to Implement Angular Universal in an existing application?
Angular Universal was once a standalone project. But with version 4.0, angular universal got merged into the main framework. It now ships together with the core angular packages. In Angular Universal, the server will pre-render the pages and displays them to the users. Angular Universal with Server Side Rendering(SSR) requires some changes in both the server stack and client application.
Assume that we are having an Angular application (version greater than 7), and we are going to implement Angular Universal in that application.
In this example, the Angular CLI compiles and bundles the Universal version of the app with the Ahead-of-Time (AOT) compiler. A Node Express web server compiles HTML pages with Universal based on client requests.
To create the server-side app module, app.server.module.ts, run the following CLI command.
$ ng add @nguniversal/express-engine –clientProject {{project name}}
To start rendering our app with Universal on a local system, use the following command.
$ npm run build:ssr && npm run serve:ssr
open the browser to http://localhost:3000 (or whatever port is configured ),
we can see our Universal app works!
Initially, we might not notice any difference, however, the first page of the application should load much faster than the previous Angular application. We can ensure it by looking into the Chrome Dev tools.
Also, the page source (right-click on the page and select “View Page Source” or Ctrl+U) shows all the normal HTML in the <body> tag that matches the content that is being displayed on the screen.
Since our HTML is rendered from the server we are able to set the title and metatags into the app for the SEO implementation.
Things to remember
An Angular Universal application runs on the server and not in a browser, so we should take care of some of our browser-specific implementations.
- Browser-specific objects such as documents, windows, and locations won’t be available on the server. If their usage is a must, then we need to conditionally bind those in such a way that it works only in the browser. This can be done by injecting isPlatformBrowser or isPlatformServer from @angular/common.
- Browser event handling is not going to work. The app won’t respond to click events or other browser events when running on the server. But, any link generated from a router link will work for navigation.
- Try to limit the use of setTimeout, wherever possible.
- Data requests from relative URLs will fail when running from the server, even if the server can handle relative URLs.
- We have to make sure to use only (component) libraries that support the technology. Also, make sure to test server-side rendering right from the beginning.
- Similarly, security around HTTP requests issued from a server isn’t the same as those issued from a browser. Server requests may have different security requirements and features.
