How to minimize data traffic in vuejs

Question

At work, we think about using Vuejs with Vuex for our frontend. I have already used it for private projects.

One of our big questions is the traffic. Our platform needs a lot of data, sometimes in large packages. Some of them are really big and it would be more expensive to load them more than once.

I've seen many examples of vue with vuex, but for me it looked like all the samples would request the same (already loaded) data every time they paged.

My real question is: Is there a way in vuejs or general to avoid or solve this problem? The only helpful thing I have found so far was this.

score 1 · Accepted Answer · answered Jul 24 '19 at 20:09

As far as I know, you can use this library https://github.com/kuitos/axios-extensions

An example here

import Axios from 'Axios';

import { throttleAdapterEnhancer } from 'axios-extensions';

const http = axios.create({
    baseURL: '/',
    headers: { 'Cache-Control': 'no-cache' },
    adapter: throttleAdapterEnhancer(axios.defaults.adapter, { threshold: 2 * 1000 })
});

http.get('/users'); // make real http request
http.get('/users'); // responsed from the cache
http.get('/users'); // responsed from the cache

setTimeout(() => {
    http.get('/users'); // after 2s, the real request makes again
}, 2 * 1000)

As you can see, you can create an adaptor and custom what you want. For example here, you keep the cache for only 2 seconds. So the first request to /users is a real one. The second and thirst request are cache, and the last one is after the two seconds, so it's a real one.

Can you be more specific about the context of how you will keep the cache. When do you need to reload the cache, after how many times, after which event, ...?

Thanks, helped me a lot! Was a great inspiration. So know i have an idea! :) — Lueton, Jul 24 '19 at 20:48

score 1 · Answer 2 · answered Jul 25 '19 at 16:34

The strategy I use is to store the value on the Vuex state.

I write all my request in Vuex actions. In every action, I check if the data already exists on the Vuex state. If it does, I simply bypass the request and return the data from the state (saving requests from being called multiple times). If it doesn't exist, I'll make the request, then store the result on the Vuex state, and return the value.

Vuex Action:

getLists({ state, commit }) {
  return new Promise((resolve, reject) => {
    if (state.isSetLists === false) {
      getListsFromServer((error, data) => {
        if (error) {
          reject(error);
        } else {
          console.log('call to getLists successful:', data);
          commit('setLists', data.lists);
          resolve(data.lists);
        }
      });
    } else {
      resolve(state.lists);
    }
  });
},

Then, the setLists mutation handles it like so:

setLists(state, lists) {
  state.isSetLists = true;
  state.lists = lists;
},

This way, the user can page around all they want, and only ever call each request once.

how would you handle changes from other app session with this solution? — Andrei Maieras, Jul 22 '21 at 16:56
It depends on the nature of the situation. First off, you could choose to not cache the results if it's likely to change in other sessions and it's important for the user to always see the latest. Alternatively, you could provide a refresh button that the user can click, or a short-lived TTL that you can check periodically. If you have control of the server code, you could even use websockets. Sometimes it's important for some requests to bypass the cache to always fetch the latest, so you could provide the method with a boolean to optionally force it to fetch from the server. — Josh, Jul 23 '21 at 01:19

How to minimize data traffic in vuejs

2 Answers2