SEO / SSR: Ensure data is retrieved before rendering the view

[firstlinestudio]

I am struggling to get data to load before first render on the server side. I would like the data to be retrieved and in place before the initial SERVER-SIDE page is created -- either by direct link or page refresh. Currently, the server page will render the main template without data, then the CLIENT-SIDE will take over and load the data. I understand a lot of tasks are asyncronous and a big reason to use Angular is for fast second action responses; however, metadata and page content need to be rendered server-side so that web crawlers can properly view the page content.

I have tried resolvers, ngZone, re-writing the way data is retrieved. It all comes back to the same issue: the Observable never needs to "complete" in order for the server side page to be created. Really the only thing that does make it work is using a 1000-4000ms setTimeout() function (depending on content), but that obviously is a bad idea.

Any suggestions or ideas are appreciated. In the meantime, I will try to find a solution and share what I come up with. I have already read about the Universal gotchas in-regards to http / api requests. I am also aware that Angular 7 uses zone wrappers.

Current setup:
Angular 12.2.1
Angular/Fire 7.1.1
Firebase 9.1.3
Firebase-tools 9.21.0
Node 14@latest + Npm 6@latest

[jamesdaniels]

AngularFire should do most of this for you with our zone wrappers, which create a zone macrotask that keeps the page from rendering until the first emission from our observables or callbacks. If you're doing this manually yourself, you'll want to read up on how to keep Zone.js from "stablizing".

[firstlinestudio]

@jamesdaniels I currently am not attempting to detect Zone changes manually. I did run a few tests with ngRunOutsideAngular(), but it didn't seem to change much. I am using Angular Material, which seems to work fine with Universal, but maybe that is causing the page to render (detect a change) before data is received?

Below is an example component and html template. This is just one way I've tried to collect and render data. I've tried to remove the "page not found" and "loading" containers from the template, I've tried removing the pipes and subscribe from the component ts file. Not sure what the exact issue is.

I will include a second example where I try to use stateTransfer. The end result is always the same: page loads the base template before any data, therefore the SSR created page is not useful to search engines. If I set a timeout to create a MacroTask delay, then the data has enough time to load and the "view source" content appears as expected.

tag.component.ts

import { Component, OnInit } from '@angular/core';
import { DocumentData, Firestore, query, collection, where, collectionData, docData, doc } from '@angular/fire/firestore';
import { Storage, ref, getDownloadURL } from '@angular/fire/storage';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { forkJoin, from, Observable, Subscription } from 'rxjs';
import { map, switchMap, take, tap } from 'rxjs/operators';

@Component({
  selector: 'app-tag',
  templateUrl: './tag.component.html',
  styleUrls: ['./tag.component.scss']
})
export class TagComponent implements OnInit {

  tag: string = "";
  tagDetail: Observable<DocumentData>;
  lists: Observable<DocumentData[]>;
  tagExist: boolean = false;
  metaData: Subscription;
  loading: boolean = true;

  constructor(private route: ActivatedRoute, private firestore: Firestore, private storage: Storage, title: Title, meta: Meta) {

    // Get Lists
    const tagId = this.route.snapshot.paramMap.get('id');
    if(tagId != null){
      this.tag = tagId;
    }
    this.tagDetail = docData(doc(this.firestore, 'tags', this.tag));
    const q = query(collection(this.firestore, 'lists'), where('tags', 'array-contains', this.tagUrlToClean(this.tag)));
    const listCollection = collectionData(q, {idField: 'id'});

    this.lists = listCollection.pipe(
      map(lists => lists.map(list => {
      const imgRef = ref(this.storage, list.metaImage);
      return from(getDownloadURL(imgRef)).pipe(
        map(coverImg => ({...list, coverImg}))
      )
      })),
      switchMap(listCalls => forkJoin(listCalls))
    );

     // Metadata
     this.metaData = this.tagDetail.subscribe(res => {
      let metatitle = res.name + " | Tag | OMF";
      let metadesc = res.name;

      title.setTitle(metatitle);
      meta.addTags([
        {name: "description", content: metadesc},
        {property: "og:title", content: metatitle},
        {property: "og:description", content: metadesc},
        {property: "og:type", content: "website"}
      ]);

      this.tagExist = true;
      this.loading = false;
    });
  }

  tagUrlToClean(string: string): string {
    string = string.replace("-", " ");
    const words = string.split(" ");
    
    for (let i = 0; i < words.length; i++) {
        words[i] = words[i][0].toUpperCase() + words[i].substr(1);
    }
    
    let phrase = words.join(" ");

    return phrase;
  }

  ngOnInit(): void {
  }

}

tag.component.html

<div class="omf-container margin-l-all">
    <div class="omf-column-main">
        <ng-container *ngIf="(tagDetail | async) != null; else notFound">
            <h1>{{ (tagDetail | async)?.name }}</h1>
            <ng-container *ngIf="!loading; else Loading">
                <ng-container *ngFor="let list of lists | async; let last = last">
                    <div class="omf-card padding-none margin-none">
                        <div class="omf-card-image-cover" *ngIf="list.coverImg != null">
                            <img [src]="list.coverImg" />
                        </div>
                        <h2 class="omf-card-title-lower padding-l-all margin-none">
                            <a [routerLink]="['/list', list.id]">{{ list.title }}</a>
                        </h2>
                    </div>
                    <div class="margin-m-v">
                        <mat-divider *ngIf="!last" class="omf-divider"></mat-divider>
                    </div>
                </ng-container>
            </ng-container>
            <ng-template #Loading>
                <mat-spinner></mat-spinner>
            </ng-template>
        </ng-container>
        <ng-template #notFound>
            <h2>Tag Not Found</h2>
            <p>Oops! It appears this tag doesn't exist.</p>
        </ng-template>
    </div>
</div>

Load List Page

const docu = doc(this.firestore, 'lists', docID);
const key = makeStateKey<unknown>('FIRESTORE');
const existing = this.state.get(key, undefined);
const page = of(existing).pipe(
  switchMap(() => docData(docu)),
  map(a => {
    // List
    const list = of({
      "title": a.title,
      "description": a.description,
      "tags": a.tags
    });

    // Images
    const coverImgRef = ref(this.storage, a.image);
    const metaImgRef = ref(this.storage, a.metaImage);
    let coverImageURL = from(getDownloadURL(coverImgRef)).pipe(take(1));
    let metaImageURL = from(getDownloadURL(metaImgRef)).pipe(take(1));

    // Related lists
    const q2 = query(collection(this.firestore, 'lists'), where('tags', 'array-contains-any', a.tags), limit(5));
    const relatedLists = collectionData(q2, {idField: 'id'});

    // Items
    const q = query(collection(this.firestore, 'lists', docID, 'items'), orderBy('rank'), limit(5));
    const items = collectionData(q);

    return {coverImageURL, metaImageURL, relatedLists, items, list}
  }),
  switchMap(allData => combineLatest(allData)),
  tap(a => this.state.set(key, a))
);

page.pipe(take(2)).subscribe(val => {
  // Hide loader
  this.loading = false;

  // List
  this.list = val;

  // Get data
  const list = val.list;

  // Set metadata
  let metatitle = list.title + " | List | OMF";
  let metadesc = list.description;
  let metaimgsrc = val.metaImageURL;

  this.title.setTitle(metatitle);
  this.meta.addTags([
    {name: "description", content: metadesc.substring(0, 192)},
    {property: "og:title", content: metatitle},
    {property: "og:description", content: metadesc.substring(0, 192)},
    {property: "og:type", content: "article"},
    {property: "og:image", content: metaimgsrc}
  ]);
});

[firstlinestudio]

I created a blank project with only Angular Fire and Universal. I ran into the same issue with data not rendering before the template. That was while using docData. When I switched to docSnapshots I was able to see the data generated in "view source", which means the data is rendered before the template. I will use snapshots on the other project tomorrow and see if that makes a difference.

[firstlinestudio]

I suppose making a resolver to get the data before the component loads is the best way to make an SEO friendly SSR page. 🙃 I made the resolver async so that we can use await with getDoc. Using docSnapshots or docData the Observable can be returned using pipe map and take(1).

import { Injectable } from '@angular/core';
import { doc, docSnapshots, DocumentData, Firestore, getDoc } from '@angular/fire/firestore';
import {
  Router, Resolve,
  RouterStateSnapshot,
  ActivatedRouteSnapshot
} from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ListResolver implements Resolve<Promise<any>> {
  constructor(private firestore: Firestore){}

  async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<any> {
    const docIDParam = route.params.id;
    let docID = "";

    if(docIDParam != null){
      docID = docIDParam;
    }

    const docu = doc(this.firestore, 'lists', docID);
    const listData = await getDoc(docu);
    return listData.data();

  }
}

[firstlinestudio]

NOTE: If using Angular/PWA and a service worker, be sure to change the ngsw-config.json file to reflect the proper index root. Change "index": "/index.html" to "index": "/",.