How to make a fast Angular SEO-friendly app

How to make a fast Angular SEO-friendly app

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:

1-st try: Prerendering

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.

2-nd try: SSR with Google cloud functions

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.

3-rd and last try: SSR with Google cloud Run

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.

seo angular firebase

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Deploy Angular 10/9 App to Production with Firebase Hosting

In this tutorial, I am going to share with you How to Deploy Angular 10/9 App to Production with Firebase Hosting?.

Angular 10/9/8 Firebase CRUD Operations with Reactive Forms

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 - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

What is firebase,firebase bangla tutorial.

LIKE | COMMENT | SHARE | SUBSCRIBE The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

How to Connect Firebase Database with Angular App from Scratch?

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.