Correct way to process data in nuxt?

Question

Vue.js

Hello!

Usually I make requests to asyncData, and process the data there. Each processing = a loop that puts flags in the array objects.
But now there are about 15 requests on the page and the page starts to delay loading.

Tell me, will it help if the data is received in asyncData, and the data processing takes place in the created hook? Or what is the best way?

Thank you very much in advance!

Answer 1

No, it won't help, it's not about where this data is processed.
general recommendation: if the next request does not depend on the previous one, do them at the same time
i.e. Here's how NOT to do it:

async fetch () {
  this.users = await this.$axios.get()
  this.otherData = await this.$axios.get()
}

instead do this:

async fetch() {
  const req = [
    this.$axios.get('/users')
    this.$axios.get('/otherData')
  ]
  const [users, otherData] = await Promise.all(req)
  this.users = users.data
  this.otherData = otherData.data
}

Answer 2

RokeAlvo 's advice is useful, but the browser also has a limit on the number of concurrent requests, so 14 is a lot. Think about how to combine these requests. I don't think they all go to completely different places for completely different data.
We will have to move away from direct requests by url and write an aggregator / cacher through which to access the data, but this is inevitable.

Answer 3

You set up connections to dsl on the tick, raise vpn, dstnat-ohm, we forward all requests to the "such and such" port to the server's IP.
And well, you set up DynDns, or you have a native Tikovsky one, it seems to have gone from the 6th version.

Answer 4

Can you provide more details on the task? Where are the modems, where is the Mikrotik, where is the database server, from where should I configure the vpn?