This tutorial extends the SSR explained on page. This tutorial fixes the content flash occurs on SSR write after page loads due to content refresh caused by data received through network requests. If you are crazy about PageSpeed/Web Vitals score as much as me, this will help you to improve: Server-side rendering (SSR) with Angular Universal Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) I have tested this on Angular 9 and 10. Before continuing, please make sure you have SSR set up as mentioned on angular.io. Our goal is to store data received from SSR and reuse them without making any network requests. Create a HttpInterceptor to intercept SSR HTP requests and store results on TransferState service Add interceptor to the app.server.module.ts* Create a HttpInterceptor to intercept HTP requests happen on the client-side and return result from state service instead of making a network request Add interceptor to the app.module.ts* *app.module is the module where you put modules required to render things on the browser. app.server.module is where you put things required for the rendering page on the server. Step 1: Interceptor for SSR to cache HTTP requests { HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } ; { Injectable } ; { makeStateKey, TransferState } ; { tap } ;

@Injectable() { (private transferState: TransferState) { }

    intercept(req: HttpRequest<any>, : HttpHandler) { next.handle(req).pipe(
            tap( { ((event HttpResponse && (event.status === || event.status === ))) { .transferState.set(makeStateKey(req.url), event.body);
                }
            }),
        );
    }
} import from '@angular/common/http' import from '@angular/core' import from '@angular/platform-browser' import from 'rxjs/operators' export class ServerStateInterceptor implements HttpInterceptor constructor next return => event if instanceof 200 202 this Here the transferState is the service that has the data store. This data store is serialized and passed to the client-side with the rendered page. is the method we have to implement from HttpInterceptor interface. intercept() Angular renderer waits for your asynchronous task to be executed before generating the HTML page. After we add this interceptor to the server module, all the HTTP requests you do will go through this interceptor. On the above example, I save all the successful HttpResponses on to the state store. Step 2: Register it with your server module { HTTP_INTERCEPTORS } ; { NgModule } ; { ServerModule, ServerTransferStateModule } ; { AppComponent } ; { AppModule } ; { ServerStateInterceptor } ;

@NgModule({ : [
        AppModule,
        ServerModule,
        ServerTransferStateModule,

    ], : [ { : HTTP_INTERCEPTORS, : ServerStateInterceptor, : }
    ], : [AppComponent],
}) { } import from '@angular/common/http' import from '@angular/core' import from '@angular/platform-server' import from './app.component' import from './app.module' import from './serverstate.interceptor' imports providers // Add universal-only providers here provide useClass multi true bootstrap export class AppServerModule This register the ServerStateInterceptor with the universal app. Step 3: Create a browser interceptor that will intercepts client-side requests and return data from the cache { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } ; { Injectable } ; { makeStateKey, TransferState } ; { Observable, of } ; ({
    providedIn: }) BrowserStateInterceptor HttpInterceptor { ( ) { }

    intercept(req: HttpRequest< >, next: HttpHandler): Observable<HttpEvent< >> { (req.method === ) { key = makeStateKey(req.url); storedResponse: = .transferState.get(key, ); (storedResponse) { response = HttpResponse({ body: storedResponse, status: }); of(response);
            }
        } next.handle(req);
    }
} import from '@angular/common/http' import from '@angular/core' import from '@angular/platform-browser' import from 'rxjs' @Injectable 'root' export class implements constructor transferState: TransferState, private any any if 'GET' const const string this null if const new 200 return return On my app, I only want to cache the HTTP GET requests, hence the if . This is pretty simple, once this interceptor is registered with the app.module, whenever we make a request, this interceptor checks if our transferState store has a value for the request URL and if it does it returns the cached value, else it let the Angular HTTP client handle the request. (req.method === 'GET') { Step 4: Add interceptor to the app.module.ts { HTTP_INTERCEPTORS, HttpClientModule } ; { NgModule } ; { ReactiveFormsModule } ; { BrowserModule, BrowserTransferStateModule } ; { NoopAnimationsModule } ; { RouterModule } ; { TransferHttpCacheModule } ; { AppComponent } ; { appRoutes } ; { BrowserStateInterceptor } ; ({
  declarations: [
    AppComponent,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: BrowserStateInterceptor,
      multi: },
  ],
  imports: [
    HttpClientModule,
    BrowserModule.withServerTransition({ appId: , }),
    NoopAnimationsModule,
    BrowserTransferStateModule,
    RouterModule.forRoot(appRoutes,
      {
        enableTracing: ,
        initialNavigation: ,
      },
    ),
    ReactiveFormsModule,
    TransferHttpCacheModule,
  ],
  exports: [

  ],
  bootstrap: [AppComponent],
}) AppModule {
} import from '@angular/common/http' import from '@angular/core' import from '@angular/forms' import from '@angular/platform-browser' import from '@angular/platform-browser/animations' import from '@angular/router' import from '@nguniversal/common' import from './app.component' import from './app.route' import from './browserstate.interceptor' @NgModule true 'my-app' false 'enabled' export class An important thing to mention on app.module is to set initialNavigation: 'enabled', because "When set to enabled, the initial navigation starts before the root component is created. The bootstrap is blocked until the initial navigation is complete. This value is required for server-side rendering to work. When set to disabled, the initial navigation is not performed. The location listener is set up before the root component gets created. Use if there is a reason to have more control over when the router starts its initial navigation due to some complex initialization logic." - Angular Team That is the first thing you need to prevent a major flicker or flash screen on an SSR app. Why is this important? On March, 4th there was a Google updated their search engine algo from which I got hit bad. I mean 70% reduction in one day. I started finding clues about what led to this issue. Not knowing the exact answer, I started and continue to improve my website speed and internal SEO. I am using this same implementation to improve speed on my page. It almost hits a 90 score on after the improvements. video compressor PageSpeed There were other improvements such as LazyLoading routes and reduce the use of getters on HTML templates, but what helped the most is to caching HTTP responses. I will write follow up article on a way to reduce TTFB and FCP by caching the rendered page on the server to avoid rendering multiple times. If you like to know about any technologies we use or have a suggestion for another article, please comment here. Cover photo credit: Photo by Marc-Olivier Jodoin on Unsplash

Too Long; Didn't Read

Making security fun one episode at a time

Angular Server Side Rendering State Transfer For HTTP Requests

Too Long; Didn't Read

Hari Ya

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Angular Server Side Rendering State Transfer For HTTP Requests

Too Long; Didn't Read

Hari Ya

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES