Angular 11 Firebase Server-side rendering infinite loading / pending

Angular: 11

Firebase: 8.2.1

AngularFire: 6.1.4

How to reproduce these conditions

This works as expected in NON-SSR mode, to query once a given collection:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .get()
    .pipe(
      map((qs: firebase.firestore.QuerySnapshot) => qs.empty ? [] : qs.docs.map(d => d.data() as T)),
    );

When switching to SSR, the above code leads to the express server hanging, and the client see a ‘pending’ query that never completes, or hits a timeout and leaves the page partially rendered (i.e. without the results of that query).

This is the best workaround I found:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .valueChanges()   <<<<
    .pipe(
      take(2),        <<<<
    );

Though this more sane workaround also fails:

this.firestore.collection<T>('collection', ref => ref.limit(5))
    .valueChanges()
    .pipe(
      take(1),      <<<<
    );

More details about exact version used here: https://stackoverflow.com/questions/65388261/angular-11-firebase-server-side-rendering-infinite-loading-pending/65388376#65388376

Expected behavior

The first version should work without the workaround, without and with SSR.

Actual behavior

Without the workaround, the express server hangs indefinitely.

Related issues: https://github.com/firebase/firebase-js-sdk/issues/3541 https://github.com/firebase/firebase-js-sdk/issues/3542 https://github.com/angular/universal/issues/1711

[Idrimi]

Ran into the same issue. SSR function Timeout on some routes in cloud functions. All pages that triggered a function with a .take(1) operator caused the issue. Changing it to .take(2) solved the problem. Not sure if this should be considered a bug or expected behavior. My thesis: The observable is triggered twice. Once from the SSR, once CSR. Does this make sense?

🚨This doesn’t work:

getProduct(id: string): Observable<Product> {
    const collection = this.afs.collection<Product>("Products");    
    return collection.doc<Product>(id).valueChanges().pipe(
      take(1),
      map(product => {
        product.id = id;
        return product;
      })
    );
  }

🥦This works:

getProduct(id: string): Observable<Product> {
    const collection = this.afs.collection<Product>("Products");    
    return collection.doc<Product>(id).valueChanges().pipe(
      take(2),
      map(product => {
        product.id = id;
        return product;
      })
    );
  }

[deadlymustard]

Just to bump this topic, I’m experiencing similar issues. I’ve read through all of these threads and tried nearly all of the workarounds suggested. None of them seem to work. I’ve been struggling with this for a couple of weeks.

In my use-case I’m using a resolver to fetch data from firebase before a page load. I’ve noticed very inconsistent results. Occasionally it’ll start working locally - but then the deployed version won’t work.

What’s interesting is the routes don’t hang if I load into the app and then navigate to them; as opposed to linking to them directly. Another thing, it seems like at times the first request to the page I’m attempting to load will work, but then all subsequent requests will fail until I clear my browser cache and try again. Very odd behavior.

Things I’ve tried:

• Running firebase queries outside of Angular
• Downgrading angularfire/firebase
• Loading page content in ngOnInit instead of a resolver
• Removing all pipes
• Using snapshotChanges/valuesChanges
• Adding my own AuthGuard and attaching them to the failing routes.

I’m pretty well stuck here. This is pretty frustrating, as I’m maintaining a user-facing app.

If it helps, this is the error I’m seeing in my deployed environment: Timed out while waiting on cache-bos4679-BOS