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
- Integrate Google Analytics with Angular
- Dynamically Add Title and Meta Tags On Route Change in Angular
- Implement Angular Server Side Rendering
- Prerender Angular Application using Angular Universal Prerenderer
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.
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
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:4200 . you 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.
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.
