Fetch huge API response without blocking the rendering of the page in Nuxt?-CodePudding

I have a dynamic page in Nuxt where I use Fetch and Axios to get all the data I need like photos/text my problem is that the API is quite long (more than 3800 lines).
The page loads with nothing appearing during 11 seconds so I was wondering if it's possible to not wait the end of the fetch call and make appearing the first results while the other one continue loading.

I try chaining fetch call with no success. I hope someone could guide me for the solution.

Here is my fetch:

async fetch() {
  let path = this.$nuxt.context.route.path
  this.response = await axios.get(
    `/api${path}`, 
    {
      headers: {
        'X-AUTH-TOKEN': process.env.SECURE_TOKEN, 
        'Content-Type': 'application/json'
    }}
  ).then((res) => {
    this.models = res.data.content;
  })
},
fetchOnServer: true,

CodePudding user response：

At the end, you will not need to fetch all of them.
Pagination is still the way to go because loading 3800 elements on a webpage is not the way to go if you're display only 10 or even 100 of them (will be too heavy to handle JS-wise and not useful anyhow).

There are ways to achieve that with some advanced patterns but still, totally not needed here.

What you should do is look for some pagination on the API. If it's not available, I still recommend that you do that ahead of time rather than on client-side.
Also, using some infinite-scroll is quite a good idea to paginate 10 elements on each iteration.

Some solutions on how to implement that are available in my previous answers.
Otherwise, here are some useful packages for that purpose.