How to do SSR for an Angular SEO-friendly app using Google Cloud Run and Firebase hosting.
When you do an Angular app, sooner or later you will think about SEO. Firstly I thought google anyway will parse my app because I heard it can. Days passed, but there was no result, so I started to think about what can I do. My goal was to be SEO-friendly with a high PageSpeed Insights score and do not spend all money in the world on servers. It looks like I found a way!
As a result, I have an approximately 80+ PageSpeed Insights score, it’s scalable, and it’s almost free to host it. Before achieving these results, I tried different choices:
Firstly I tried prerendering for the most important pages. In theory, it should provide the best performance, but I had lots of issues with the PWA feature (Progressive Web App). If you don’t need PWA support, probably it’s the best choice for you.
With this approach, my app worked for a long period. Social networks and crawlers can parse any page of the app and it supports perfectly the PWA. But it has a super huge issue with performance — cold start. Cloud functions are stateless, and the execution environment is often initialized from scratch, which is called a cold start. It can take approximately 3–5 seconds before starting execution + SSR time 300–600ms. It’s not acceptable in 2020 to ask users to wait so long.
With Google Cloud Run visitors don’t have to wait for a cold start. The app is SEO-friendly and supports the PWA feature. Also, Google provides quite large free tier limits, so probably it will cost nothing for you to host an app.
In this tutorial, I am going to share with you How to Deploy Angular 10/9 App to Production with Firebase Hosting?.
Create a student record management system app using Angular 7|8|9, Firebase 5|6 Database, Reactive Forms, Form Validation, NGX-Pagination and NGX-Toastr.
Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.
ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...
In this tutorial, We are going to learn How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We’ll be using AngularFire library for setting up Firebase database in the Angular web application.