What is the most efficient method for handling data from client-side storage to facilitate page rendering with a flexible abstract architecture that allows changes on the backend to reflect on the frontend?
For example, I receive deeply nested JSON on the frontend with a basic structure including available services and attributes. My goal is to parse this into a plain array, use it for rendering the page with appropriate widgets for different service types, and store it in client-side storage for future use. When a user revisits the page, I aim to use the cached data for rendering if no new services have been added on the server side. The technologies I plan to utilize are AngularJS, localForage, and angular-localforage library.
I have the following questions:
- What is the best approach for processing data? Should I retrieve the entire array (specific to the page) from client storage in one transaction, inject it into the Angular app, and use it for rendering? Or would it be more appropriate to fetch data in smaller transactions, service by service? The same question applies to caching data to client storage.
- If handling a large transaction, are there risks of slowing down other processes, or does the storage architecture neutralize these risks?
- Is there information available on migrating data if a user changes the storage type, such as from localStorage to indexeddb? If not, would I need to check the storage type each time and recache data from the server if it has changed?
- Are there any issues or drawbacks with the selected architecture/technologies? Any recommendations for modifications or additions?
- What is the best way to search for specific data elements in the key-value structure provided by localForage, such as finding items with a parent_id of 42? Is it better to bring all the necessary data to the app, organize it, and then perform queries within the app? Or is there a more efficient approach?