CODEWITHSUNDEEP
databasevue.jsstoredata-persistence
mathnabit
mathnabit

Reputation: 370

A copy of database in the Front-End side (Store) to avoid fetching data multiple times

I have a large database, so I decided to create a copy of this database on the front-end side in my Store (I am using Vuex with Vuejs), i.e. each table in the database has a corresponding array in the Store, and every time I have an update I persist it to the real database and to my copy (which exists in the Store) at the same time to avoid fatch the data again after each update. Is it a good idea or not (in terms of performance) ?

Upvotes: 0

Views: 484

Answers (1)

Noy Gafni
Noy Gafni

Reputation: 1211

I think its totally fine to create a cache of your data in the client side, and it is even recommended. But you do need to be aware of some things:

  1. Make sure you update the client side only when the data has been successfully saved in the database. So the client will not see false information.

  2. If you have multiple users who can change the data, and you need to use the data in real time - make sure that you send the updated data to other users as well.

  3. Check which tables from the database you actually need at any time - maybe you need different tables at different views of the application, so you do not have to save all the database all the time. It can help to reduce memory usage

  4. Consider using lazy loading, which means that you load the tables only when you need them, and then save it in the cache. The next time you need to use this table you won`t load it from the server, but instead use the cached data.

  5. When you put the data in vuex store, vue will consider this data reactive, which can cause performance issues - especially if you have a lot of data. If you have data that you know will not be changed, or data that is rarely changed - consider using Object.freeze() which basically tells vue not to put any watchers on this object. This could help improve performance issues by much.

EDIT:

if you are concerned about performance issues I would implement the cache using lazy loading, and Object.freeze() which means you will not be able to change the data in the client side - so for every change you should send the update to the server and receive the full updated table in - so you will assign the new value to your cache with Object.freeze(). That way you don't have to request the table from the server for every usage, only for updates. This will help to keep good performance.

Upvotes: 1

Related Questions