Implement Angular Server Side Rendering with One Command

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?

Angular SEO Series Articles

Note: For this series of articles, We are using Angular 9.

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.

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

Concept Visualization : Server Side Rendering

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

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

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.

Give your 🤎 with Like and Share.


Disqus Comments Loading...

Recent Posts

Awesome Charts in Angular 13 with ng2-charts

Charts help us to visualize large amounts of data in an easy-to-understand and interactive way.  …

2 years ago

Client-Side PDF Generation In Angular 13 With PDFMake

Generating reports, invoices, blog content, documents, guidelines, forms, etc in PDF form is a common…

2 years ago

Dynamically Add Title and Meta Tags on Route Change in Angular

Web Page title, description, and other meta tags are very important for the Search Engine…

3 years ago

Integrate Google Analytics with Angular | Angular SEO

Google Analytics is a popular analytical tool for web and mobile applications from Google. It…

3 years ago

16 Best Chrome DevTools Tips and Tricks

Chrome DevTools provides amazing features to debug source code, capture element state, update and test…

3 years ago

Data Visualization with ECharts in Angular using ngx-echarts

Angular Charts Series Articles Best Angular Chart Libraries How to use ngx-charts in angular application…

3 years ago