Implement Angular Server Side Rendering

In this article, we will see, 

  • How to implement angular server-side rendering with just one command using angular universal schematic.
  • Deploy Angular Universal Project as a Firebase Cloud function

Before we start with the implementation of server-side rendering in Angular with Angular Universal, let’s see why server-side rendering and what is Angular Universal?

Loading the first-page quickly is a critical part of any web application.

Normal Angular applications get loaded only when it loads the required main.js, vendor.js, pollyfills.js and runtime.js. As your main.js size increases initial loading time also increases. 

According to 2018 research by Google, 53% of mobile users leave a site that takes longer than three seconds to load.

As Page Load time goes from | Loading external libraries from CDN in Angular
Source : Google/SOASTA Research, 2017.

We can optimize the initial loading time of angular application using angular universal (server-side rendering).

Angular Universal, a technology that renders Angular applications on the server.

Server rendering generates the full HTML for a page on the server in response to navigation. This avoids additional round-trips for data fetching and templating on the client since it’s handled before the browser gets a response.

– Source

This will quickly load the initial page, which will give the user a chance to quickly view the initial layout until a complete angular application becomes fully interactive.

Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices.

In Angular 9 release, Angular Universal Team came up with a ng add schematic to implement SSR in angular application. 

ng add @nguniversal/express-engine
Implement Angular Server Side Rendering : ng add @nguniversal/express-engine
Implement Angular Server Side Rendering : ng add @nguniversal/express-engine

This schematic will add and update all required files to implement server-side rendering in angular application. 

This will add the following files : 

  • src/main.server.ts 
  • src/app/app.server.module.ts
  • tsconfig.server.json
  • server.ts

and update the following files :

  • angular.json
  • package.json
  • src/main.ts
  • src/app/app.module.ts

@nguniversal/express-engine schematic also add the CLI builders to start server-side rendering on the local system and generating production build with SSR.

This schematic adds the following scripts in package.json.

"dev:ssr": "ng run [project_name]:serve-ssr",
"serve:ssr": "node dist/[project_name]/server/main.js",
"build:ssr": "ng build --prod && ng run [project_name]:server:production",
"prerender": "ng run [project_name]:prerender"

Using the following command, We can start rendering our app with Universal on the local system.

npm run dev:ssr

This will serve the angular application with server-side rendered pages on localhost:4200you can confirm angular universal implementation by looking into the page source. 

If you find rendered HTML in the page source, Great !!! angular universal implementation is done ✨✨✨

Angular Firebase Team also has added a new feature in ng add @angular/fire

While you add the @angular/fire using ng add, it will check whether the current project is an angular universal project, if yes it will ask the following question.

We detected the Angular Universal Project, Do you want to deploy it as a Firebase Function?

If you enter y/yes here, it will install some more packages to implement firebase cloud functions to deploy angular universal project.

Deploy Angular Universal as a Firebase Cloud Function : ng add @angular/fire
Deploy Angular Universal as a Firebase Cloud Function : ng add @angular/fire

Once Firebase installation is done we can deploy our angular universal project to firebase using just ng deploy command.

Once the application is hosted on the server, it will give you the running URL. Open this URL in a browser, and verify whether Server Side Rendering is done or not.

If all the above steps are successfully executed, Great!!! You have successfully deployed your angular universal app to firebase.✨✨✨

In this article, We have seen the power of angular schematics. 

We have implemented angular server-side rendering with just one angular universal schematic command and deployed this on firebase.

I hope you like this article, please provide your valuable feedback and suggestions in below comment section🙂.

For more updates, Follow us 👍 on NgDevelop Facebook page.


If you like this article and find it interesting or useful - share it