Difference between Asyncdata vs Fetch

Question

What is the exact difference between fetch and async data. The official documentation says the following:

asyncData

You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method that lets you handle async operations before setting the component data.

asyncData is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route. This method receives the context object as the first argument, you can use it to fetch some data and return the component data.

---

Fetch

The fetch method is used to fill the store before rendering the page, it's like the asyncData method except it doesn't set the component data. The fetch method, if set, is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route.

The fetch method receives the context object as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, return a Promise, nuxt.js will wait for the promise to be resolved before rendering the component.

---

Fetch is been used to fill the store with data? But in asyncData is this also possible to commit trough a store? I don't understand why there are two methods for.

Both methods are running server-side on the initial load, after that when you navigate through the applicatie it runs client side.

Can someone explain me the advantage of use these methods above the other?

Thanks for help.

Answer 1

Let me re-iterate few points as a pretext to what i'm going to say

• asyncData can set component level objects and access vuex store
• fetch cannot set component level objects but has access to vuex store
• Both asyncData & fetch will be triggered in server side during initial load
• After initial load, asyncData and fetch will be triggered when the corresponding page routes are invoked

1) if your design is

• Use vuex store as a central repository
• Access data from the vuex store for the entire application

then use fetch

2) if your design is

• Use vuex store as a central repository
• Have options to set component level objects
• Data fetched in a particular route is used only by a single component
• Need flexibility to have permission to either vuex store or set component level object

then use asyncData

Can someone explain me the advantage of use these methods above the other?

i don't see any drawbacks in using asyncData or fetch

Choosing asyncData or fetch totally depends on your architecture

Answer 2

One point I'd like to make that I don't see mentioned above (at least, not clearly). asyncData automatically MERGES the data into your page's data() object. Fetch does not. With fetch, it's up to you to do with the data as you please.

Answer 3

I. fetch and asyncData are processed on the server-side.

II. can see the difference in the way to use them:

a) fetch: change store data

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

b) asyncData: change context (component data)

<script>
export default {
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
</script>