This article will guide you through how Server-side rendering (SSR) with Angular Universal is better for performance as well as other factors. Angular Universal is a technology that renders the application on the server.
In a normal scenario, the application executes in the browser and render pages in DOM. While in Angular universal static pages gets from the server and that gets bootstrapped into the client. This means the initial page will be rendered very quickly and it will improve the performance of the application.
Why Server-side rendering ?
There are 3 main reasons,
1) Better Search engine optimization visibility for web crawlers
2) Improve performance on mobile devices and other platforms
3) First contentful paint (FCP) ā Show the first page quickly
Web Crawlers (Search Engine Optimization)
Social media sites like Facebook, Google, Bing, twitter etc. rely on web crawlers to index your application content and that will be visible on search.
Angular Univeral helps us to create a static version of the application and that will be easily searchable. Each URL of the application returns the rendered pages.
Improve performance on mobile devices and other platforms
Some of the devices do not support javascript and some of them doesnāt work properly and that is bad for user experience. In this case, you may need server-side rendering in place to resolve all those issues and that will help to improve performance.
First contentful paint (FCP) ā Show the first page quickly
It is very important to show the first page very quickly for the user who lands to that page. Pages that load faster perform better, it should load the first page around 100ms and that can engage the user to stay on-site longer.
With Angular Universal, you can generate landing pages for the app that look like the complete app. In practice, youāll serve a static version of the landing page to hold the userās attention. At the same time, youāll load the full Angular app behind it.
Installation
Letās start with the installation of Angular Universal in your application,
To create the server-side app module, app.server.module.ts, run the following CLI command.
ng add @nguniversal/express-engine
Once your run above command this will generate a couple of new file along with the changes in the existing one. as shown below,
src/
index.html app web page
main.ts bootstrapper for client app
main.server.ts * bootstrapper for server app
style.css styles for the app
app/ ... application code
app.server.module.ts * server-side application module
server.ts * express web server
tsconfig.json TypeScript base configuration
tsconfig.app.json TypeScript browser application configuration
tsconfig.server.json TypeScript server application configuration
tsconfig.spec.json TypeScript tests configuration
In the above structure file showing with the * mark is he newly generated file for the server-side rendering.
Angular Universal in Action
To start rendering your app with Universal on your local system, use the following command.
npm run dev:ssr
Now your application will be running on local with angular universal.
The transition into the app you will see it runs very quickly but you should also test this app on real-world scenarios for better clarifications.
We can also play around with application on local with slow network speed to validate different scenarios. You can exactly follow as shown below to test.
- Open the Chrome Dev Tools and go to the Network tab.
- Find the Network Throttling dropdown on the far right of the menu bar.
- Try one of the ā3Gā speeds.
The server-side rendering app still launches quickly but the full client app may take seconds to load.
To get some of the more insights of the code and each function about web servers, Universal template engine, Serving static files all you can find that in below specified important links of Server-side rendering (SSR).
Important Links
Angular Universal Official Link ā https://angular.io/guide/universal