Since you’re here, I’m sure you’re using angular universal for SEO support, but are you using it in a website where you have a huge amount of data to render on the page ? If your answer is Yes, You just landed in right Tab.

TL;DR~ Transfer state is a bad bitch, but you’ve to use it very judiciously.

What is Transfer State ?

A key value store that is transferred from the application on the server side to the application on the client side.

TransferState will be available as an injectable token. To use it import ServerTransferStateModule on the server and BrowserTransferStateModule on the client.

app.browser.module.ts

import { BrowserTransferStateModule } from ‘@angular/platform-browser’;

app.browser.module.ts app.server.module.ts

import { ServerTransferStateModule } from ‘@angular/platform-server’;

app.server.module.ts

The values in the store are serialized/deserialized using JSON.stringify/JSON.parse. So only boolean, number, string, null and non-class objects will be serialized and deserialzied in a non-lossy manner.

Transfer state is what makes Angular Universal awesome. But transfer state comes with its price, performance.

Data which you get from backend API calls, you make those calls in server, and transfer the data to client through transfer state, which has to be downloaded/parsed by the browser before the app can read. But if you have huge amount of data you can’t get a good performace.

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 causing flicker since we don’t know when the DOM would be ready to be used, it could be 5ms to 5s.

Another solution is transfer less data, where you would do everything normally but won’t tranfer data from server to client.

What happens in these cases is you’ll see a flicker in the screen, You can test ths kind of flickers in udacity website.

Here’s some results calculated from tests on my app which uses angular universal and tranfer state

size of index.html -> wait time 100KB -> 50–550ms (~250 average) 500KB -> 50–1000ms (~500 average) 2500KB -> 150–3100ms (~1000ms average)

According to me, it is not advised to use universal for application where you’ve huge amount of data to show on your web page. But if you still want to use, universal provides a great SEO score ( above 90% on google insights and lighthouse tool, if you follow the best practices of the language ), check this link out for performance of the app I work on.

Thanks, that’s all for today. Hit me up with your feedback and questions on Frontend.

This is my first post on medium, generally I write answers on stackoverflow, you can check it here => rakeschand

Happy Coding. @rcjs

Post originally posted on medium https://medium.com/@rcjs/angular-universal-when-youve-huge-amout-of-data-ca9a3a947bb3


91 0 0