General Question: How to make efficient frontend caching layer

[omaratta212]

Overview

It's a general question about how you handle frontend data caching, I've googled this topic a lot and found many solutions but none of them is suitable for scalability.

Generally what I want to achieve is to not request backend data if I already have it. Which is easy for small applications we can just check if the data is there return it, if not then fetch. But what about pagination with multiple data types & relationships in a more complex app where the data can come from many sources.

I don't want to store the data in user's browser forever, as this seems a bit rude & adds the complexity of cache invalidation.

Possible solutions

• State managment: This is a vuex action where I fetch some events, it's good for this purpose. But, it got much more complicated and ugly after introducing events pagination, categories and categories pagination.

  export const actions = {
     async fetchEvents({ commit, state }) {
         if (state.events.length) return
  
         const { data } = await axios.get('/events')
         commit('SET_EVENTS', data.data)
     }
  }
  

• Local Storage: Takes a lot of time to handle parse/stringify json data and adds the complexity of cache invalidation.

Other options I looked into but didn't try includes IndexedDB, vue <keep-alive>, PWA. Just wanted to know your opinion & if there are other methods you use..