Using cache data in Angular6 to optimize reloading time

Question

I have to display a table in my angular app. The table displays 10-15Mb JSON data. So to load this every time, it really slowing down my site. What I have thought of a possible solution-

After initial reload, store the data in as cache/session storage.
Until and unless the user is logged in, he/she should be able to reload the data from the cache without getting the data from the API.

Can anyone help me on implementing this(if this is the correct approach) or please suggest a better approach.

Better approach: use searching, pagination, to avoid loading 15MB in the first place. — JB Nizet, Jul 20 '18 at 06:38

score 0 · Answer 1 · answered Jul 20 '18 at 06:38

0

Yes, Indeed the best approach is to use pagination and searching. If can't then You can use Rxjs caching using shareReplay.

More details at: https://blog.thoughtram.io/angular/2018/03/05/advanced-caching-with-rxjs.html

answered Jul 20 '18 at 06:38

Gourishankar

906
1
7
14

score 0 · Answer 2 · answered Jul 20 '18 at 06:50

First off, 15mb of data from an api seems a lot, that's your first problem, do you need to load all that data at once. I'd suggest you filter the data while fetching it. Secondly, you should us compress data from the server when you do a get, that's done at the web server level, ngnix does this very well. If all this doesn't help then caching in the front end should work for you and in that case, use localStorage in Angular to store the data.

Using cache data in Angular6 to optimize reloading time

2 Answers2