Performace after using transfer state

Hi

Angular 4.4.6
Anhular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1

In Angular Universal application when server view sift to client view there is flicker of screen, because all the API’s which were called in server side rendering, also called in client side rendering, due to there was a flicker.

To remove this flicker I implemented Angular Universal Transfer Module, it stores data in a Map cache (private _map = new Map<string, any>()😉 while in server side rendering, and transfers it to client so client does not need to call the api again and imediately have the data from cache.

And the transfer was through this provider.

{
    provide: APP_BOOTSTRAP_LISTENER,
    useFactory: onBootstrap,
    multi: true,
    deps: [
        ApplicationRef,
        TransferState
    ]
}

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

This way the flicker has gone, but application performace has decreased, on load testing the app, the flickered result is more faster than non-flickered app, why is that ? On Browser non-flickered is fast, in page insights also non-flickered has more score.

May be because in case of load testing or in case of bots hitting the website there is no browser so the cache never get cleared and it just fill the server with cache memory and server gets slow, what could be the solution for that, either create different instace for bots and real user, by identifying request at nginx level, oe there is some other thing I’m missing in angular universal.

What needs to be done from universal side to increase performace or is it server issue or something else ?

[Toxicable]

This isn’t really a problem we can solve.

The issue is that you’re storing a huge amount of data in your index.html (via transfer state) which has to be downloaded/parsed by the browser before the app can read.

A solution for this we considered was to make the State Transfer api async, meaning the app could boot without waiting for the DOM to finish being parsed. However this would end up casuing flicker since we don’t know when the DOM would be ready to be used, it could be 5ms to 5s.

My suggestion: transfer less data. If you have any other ideas for how we could adjust State Transfer to better accommodate transferring large amounts of data im all ears

[imraqes]

Yes It’s kind of large data, I am working on a e commerce website so getting products to show on page, it’s quite large data, I am getting it (I can see in view source ) when using trasfer state, If I don’t use APP_BOOTSTRAP_LISTENER then I am not getting it in view source, because I am not injecting it and it result in flicker also.

But I hit 2000 user from jMeter or some load testing tool, application error percentage is too high even if backend is still responding, What could be the problem, is it angular universal limitations to serve so many requests per second or server issue or am i doing somehting wrong in universal configuration, I am using this modules folder from this repo https://github.com/wizardnet972/universal-seed , I followed what @wizardnet972 is doing there.