VueJS: Best way to Cache http response data

Question

I'm finding a best way to Cache http response data in VueJS, Now I use Vuex Store to my Blog. I want to cache all response data when it requested into server.

Specifically, this is my blog:

When I request data by router to blog detail with 1, 3, 4, I have response data. How can I cache it and then I re-route to 1, 3, 4 in the same session, it not re-fetch data and get data cache to display?

Now I use Vuex and I think it slow if has to store too many data.

Lydell

Vuex is not slow. Slow is fetching the data from API again and again. Do you use <keep-alive><router-view /></keep-alive>? – Mudpack

Answer 1

Service Workers were built for this. They can intercept and cache all requests made on your page. With a little extra work, you can easily add offline capabilities.

You can also use the Cache API with window.caches, mind the browser support though.

Another way is to use LocalStorage/IndexedDB to manually store your responses, but that's more work.

Karsten

Does Instagram use service workers, bro? Can we checked it? – Lydell

Redis is an option. – Paraldehyde

@Eric can you elaborate your 3rd option of doing this? I know it is resolved question but i have same kind of situation. How do you achieve it? Please help me on same situation. Here is my open thread [#64297462 – Categorize

@Wayne Redis is not a front-end/client-side option. – Cofsky

Answer 2

You can try swrv to cache your response. swrv use Vue Composition API hooks for remote data fetching. if you got vue2, then need @vue/composition-api to make them work. Hope this helps.

Bobseine

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Norinenorita

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Ow