Doesnt support server side rendering with Angular Universal

[calibri87]

Doesnt support server side rendering with Angular Universal.

Is this correct? because I cant seem to get it rendering.

It works fine, but just doesnt work with angular universal. I know firestore supports ssr but does geofirestore?

[calibri87]

@MichaelSolati does geofirestore support server side rendering? I'm having trouble getting this working with angular universal

[MichaelSolati]

Hey @calibri87 I saw your issue on StackOverflow and I have a few suspicions as to why it doesn't work (either something with the setInterval or perhaps how I bundle the library...). Would you mind throwing together a super super basic app where it fails to work using SSR and I can work from there to resolve this?

[calibri87]

Hi @MichaelSolati,

Geofire definately not working with ssr.

It works fine with AngularFire (which I use for other firestore calls).

This is some of my GeoFire / Angular code:

import { GeoFirestore } from 'geofirestore';
import * as firebase from 'firebase/app';

this.geofirestore.collection('behired').near({ center: new firebase.firestore.GeoPoint(geo.lat, geo.lng), radius: parseInt(geo.radius) });

[MichaelSolati]

@calibri87 thank you for the implementation/code snippet, but me debugging this would be much easier if you could create a repository with the same issue, as I'd be able to test and develop on it.

[MichaelSolati]

Using the universal-starter I was able to quickly build and test geofirestore with SSR and didn't have any serious issues... I say that because get requests work just fine with SSR, but it'll be your onSnapshots that will not as they never resolve (as they are, well, constant listeners).

What you could do is a check to see if you're running on the server or not, and modify what you do based on that.

const geofirestore = new GeoFirestore(firebase.firestore());
const geocollection = geofirestore.collection('viewers');
const query = geocollection.near({ center: new firebase.firestore.GeoPoint(0, 0), radius: 10 });
const handler = snapshot => this.data = snapshot.docs;

if (typeof window === 'undefined') {
  query.get().then(handler.bind(this));
} else {
  query.onSnapshot(handler.bind(this));
}