Angular Universal - Only for crawler bots

Question

I'm using Angular Universal with my app, but I have some strange flickering when the page load (transition between server version and the actual app. And it does'nt work well with my route having Guards (user account pages for ex).

I only need SSR for SEO... So maybe there is a way to use SSR only for crawler bots ? And serve the classic Angular app for users ?

For now, I'm using the same server.ts from the Angular Universal repository.

Thank you !

Answer 1

I'll tell you what, you need to use Transfer State in your app.

Here https://github.com/wizardnet972/universal-seed see this repo, trasfer state is being used there,

You need to copy the shared/tranfer-state folder in your app, do changes to the following files:

app.browser.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { BrowserTransferStateModule } from '../shared/transfer-state/browser-transfer-state.module';

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'universal-seed'
    }),
    BrowserTransferStateModule,
    AppModule
  ]
})
export class BrowserAppModule { }

app.server.module.ts

import { NgModule, APP_BOOTSTRAP_LISTENER, ApplicationRef } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerTransferStateModule } from '../shared/transfer-state/server-transfer-state.module';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { TransferState } from '../shared/transfer-state/transfer-state';
import { BrowserModule } from '@angular/platform-browser';

export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
  return () => {
    appRef.isStable
      .filter(stable => stable)
      .first()
      .subscribe(() => {
        transferState.inject();
      });
  };
}

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({
      appId: 'universal-seed'
    }),
    ServerModule,
    ServerTransferStateModule,
    AppModule
  ],
  providers: [
    {
      provide: APP_BOOTSTRAP_LISTENER,
      useFactory: onBootstrap,
      multi: true,
      deps: [
        ApplicationRef,
        TransferState
      ]
    }
  ]
})
export class ServerAppModule {

}

For more about trasfer-state, also check this out https://github.com/AngularClass/angular-universal-transfer-state

If you;re using angular4, above solution will work but if you looking for angular5 solution, checkout answer of this question.

angular universal app performance, APP_BOOTSTRAP_LISTENER, flicker