Reactjs with large DB

Question

I am working with a very large SQL database through a frontend reactjs application with a node server intermediary using an ORM for query sanitation. However due to the size of the DB it takes some time to search through, sometimes up to 15-25 seconds which makes my react app incredibly slow for the initial load.

I have a spinner component to let the user know its working and am working on optimizing the DB itself but it is a collaborative effort so I was hoping to find something from the frontend perspective to try and alleviate the intense loading times. Are there any standard practices that would let me keep portions of the data off database so that I don't have to wait for the entire query to finish that wouldn't severely risk user data?

Answer 1

Ignoring the fact that you're querying from a React app, here's a couple of things to check that would be common for any kind of web app:

1. Depending on the type of database, find out if appropriate indexes exist for the queries that you're running. Work with your DBAs to find out how to optimize your queries. It may be that your queries are table scanning row by row to find the data you're looking for and can be improved with adding appropriate indexes

2. Is your current query one large query that retrieves everything in one go? If the data is retrieved from multiple tables would it be possible to split it into multiple api calls to your backend to retrieves parts of the data separately? If that approach would work then your app could incrementally display data as it's returned which could improve the user experience instead of waiting for everything to complete and watching a spinner for several seconds.

3. Investigate whether a caching layer would be appropriate between your web app and the database. If there's commonly retrieved data but it's expensive to retrieve, this could help with performance.