Performace after using transfer state

[imraqes]

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 ?

[MarkPieszak]

Is the amount of data your transferring extremely large?
Remember this data is being brought down (as json) in the HTML result itself, you can see it at the bottom when you do View Source.

[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.

[mario-merino]

Hi, I'm just starting to use SSR with Angular 5.0 and I would love to implement your solution to cache the data ...yet I'm quite new to Angular so I'm not sure where and how I should implement the solution you propose.

Many thanks in advance

[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

[patrickmichalina]

@Toxicable Great summary of the issue. As awesome as State Transfer is, you have to use is judiciously, there is no free lunch.

[RobinDullens]

State Transfer is really great. But i dont understand why it gets so slow.
I have made some tests on my own with different sizes of my index.html and the wait time time before the file was send.
Test setup: Angular 5.2.10, node 8.9.4
This was tested locally with 30 parallel requests, there were no external calls just static cached data.

size of index.html -> wait time
18KB -> 50 - 250ms (~150 average)
400KB -> 50 - 800ms (~400 average)
2500KB -> 150 - 3100ms (~1000ms average)

without StateTransfer constant ~40ms
Maybe my setup isnt optimal but in my case it seems like its faster to load the data externally on client site instead of cache them on server site and use it in state transfer. Maybe the dom wirting is to slow? There is a big variation in my test data i am not sure if there are some other side effects in my code.
I will provide a simple test setup in the next days if interested.

[Gorniv]

@RobinDullens can you write:

        const resultResponceString= JSON.stringify(resultResponce);
        const resultResponceObject= JSON.parse(resultResponceString);

for each request without transferState?
Can you add example at fork of https://github.com/Angular-RU/angular-universal-starter/blob/master/src/app/transfer-back/transfer-back.component.ts ?

[kmturley]

I'm encountering the same issue. It seems that TransferState is ideal to share small amounts of data between all pages, but it starts to reach limits when you are building a larger site (1.5MB per .html page for a simple wordpress site with posts).

Of course the solution is to break up the TransferState calls, and only store that data needed for that one page. But when statically generated, only the data from the first page is available, before html5 pushStates handle the view. This means, if I put the posts data in the posts page, but the user loads the homepage first, they don't get the data loaded!

I've fully summarized the issue here:
https://stackoverflow.com/questions/50958193/angular-universal-ssr-transferstate-only-first-page-data-available

But essentially we need a solution so that when you load any static page, then navigate to a second page (using html5 pushstate), TransferState needs to loads the second index.html and parse the <script id="my-app-state" type="application/json"> tag to get the data for that page.

[lucaswxp]

Having the same problem here.

Transfer state takes a long time to read the JSON from the DOM. The payload is large, but is necessary for the view to load.

Any workarounds? There's no network call, doesn't make sense taking a couple seconds to read a JSON string from the DOM. Reducing the payload is not a solution.

[ibrahimAboelsuod]

Having the same issue in 2021 with only 116KB of data.

[Abdulrrahman]

same issue in 2022, without transferstate constent 40ms response time, to solve this issue I had to cash data on the server to prevent double api call for every request, and whenever angular initiate on client side I start api calls normally.