Initial Load Taking Too Long

This may be a result of having too much content (1200 pages), but on the initial load of “The Latest” content - it can sometimes take several minutes, and a couple refreshes to actually see the newest content using content. Locally it happens in a matter of seconds, but in production (SSR full static) - it takes too long…

My current implementation:

    async fetch() {
      this.latestArticles = await this.$content('articles').sortBy('published', 'desc').limit(5).fetch()
      this.latestAnalyses = await this.$content('analysis').sortBy('published', 'desc').limit(5).fetch()
      this.latestBlog = await this.$content('blog').sortBy('published', 'desc').limit(10).fetch()
}

and then in a computed property, I mash them together like so:

      latestContent() {
        return this.latestArticles.concat(this.latestAnalyses,this.latestBlog).sort(function(a, b) {
          var keyA = new Date(a.published), keyB = new Date(b.published);
          // Compare the 2 dates
          if (keyA < keyB) return 1;
          if (keyA > keyB) return -1;
          return 0;
        })
      }

I’m pretty sure it’s not the latestContent, because my $fetchState.pending block runs throughout that entire time.

Again, this is for target: static, so I would assume even during the build process there should be something there at first, yes?

[azrikahar]

No worries. There’s nothing wrong with using fetch() to get the data on client side when they visit the page, and this is definitely a valid use case depending on situations. However, I do believe you will benefit more with using asyncData() without having to wait for the fetch() in this particular scenario 😃

And I’ve never really understood difference between asyncData and fetch. They seem the same, with the latter being the more modern up-to-date approach.

Rest assured I was not sure of their difference in the beginning as well haha. I might be oversimplifying here, but I think we can think asyncData() as being done before the page is served to the user. Which means what ever is done in there, won’t be done on the client side at all. Though this is true for SSR, it behave slightly different when you are using full static. When you run nuxt generate command, Nuxt have a crawler that will go through each pages/links and run the asyncData() once and generate the final HTML files.

As for fetch(), the default behaviour is running it once on the server unless you disable it using fetchOnServer: false (reference) in SSR. However in your case, you are using full static, so it means it will only ever run on client side. This means whenever someone visits the homepage, they will fetch from the built API that is served by your generated files, do 3 await calls then run sort over each item in the array which can be pretty taxing in terms of processing.

Do note that I mentioned *built API files, which means they are static and are baked in to your dist folder, and the fetch() are technically fetching from the built static files, not directly from your GitHub repo. So when you mentioned you want to upload one file change and not have to rebuild the entire site, it will not be possible with this approach. With that said, many static site hosting services like Netlify does provide github repo integration, so you don’t have to worry about manually rebuilding the site. You just need to push a commit and the rebuild is done automatically for you.

Sorry if the explanation is too much. Just try out the proposed solution below and see how it is for you.

---

Proposed solution

I am going to translate your existing code to asyncData() here, so I’ll try to mimic your code since I can’t truly see the whole source code. Hope it’s roughly accurate here.

Your current code

<template>
  <template v-if="$fetchState.pending">
    <!-- Show the spinner here -->
  </template>
  <template v-else>
    <!-- Loop through **latestContent** computed array here to show the articles -->
  </template>
</template>

<script>
export default {
  data() {
    return {
      latestArticles: [],
      latestAnalyses: [],
      latestBlog: [],
    }
  },
  async fetch() {
    // the 3 await $content calls here
  },
  computed: {
    latestContent() {
      // your sorting code here
    }
  }
}

Using asyncData() for full static without any fetching needed on client side

<template>
  <div>
    <!-- Loop through **latestPosts** data array here to show the articles -->
  </div>
</template>

<script>
export default {
  async asyncData({ $content }) {
    const results = await Promise.all([
                                     $content('articles').sortBy('published', 'desc').limit(5).fetch(),
                                     $content('analysis').sortBy('published', 'desc').limit(5).fetch(),
                                     $content('blog').sortBy('published', 'desc').limit(10).fetch()
                             ])
    const unsortedPosts = [].concat(...results)
    const sortedPosts = unsortedPosts.sort((a, b) => {
          const keyA = new Date(a.published), keyB = new Date(b.published);
          // Compare the 2 dates
          if (keyA < keyB) return 1;
          if (keyA > keyB) return -1;
          return 0;
        })
    return { latestPosts: sortedPosts }
  },
}

The latestPosts returned in asyncData will be added to the data() option, that’s why we don’t even need to specify data() like in fetch example anymore. And since you are doing the sorting during build process, your client side never needs to run any fetching or sorting and should be able to instantly see the posts in your homepage.

Further explanation:

• The 3 await calls are actually inefficient. Imagine each await call takes 1s to finish, having 3 awaits will mean a total of 3 seconds. But by using Promise.all(), this means we are starting the 3 calls at the same time, so we can effectively just take 1s to finish 3 calls. More info on this over here: https://stackoverflow.com/questions/45285129/any-difference-between-await-promise-all-and-multiple-await
• The promise.all() return an array of 3 arrays, so we need to use the spread operator( the 3 dots) and concat 3 arrays into 1 array. More info on this over here: https://stackoverflow.com/a/39058145

Would you mind giving this solution a try? Feel free to change the variable names I used to what you see fit.

[Tahul]

Hello 🙂

Has your issue been fixed?

I think this is still relevant for v2, so I’m keeping this open, would love to see performances benchmarks between v1 and v2!