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

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

Update for NuxtJS >= 2.12

Several points mentioned in the answer no longer apply when using newer NuxtJS versions (>= 2.12). Official RFC announcement here.

A good explanation of the new behaviour and differences between asyncData and the new fetch can be found in this post in the NuxtJS official blog.

As for choosing between both, I believe the original answer still applies:

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

Choosing asyncData or fetch totally depends on your architecture

Answer 2

TL;DR - use asyncData for stuff which must be loaded before rendering a page, use fetch for everything else.

Key differences:

Availability

• asyncData is only available on page components
• fetch can be used on any component (including page components)

Loading

• asyncData blocks the page transition until it resolves. This means the data properties returned are guaranteed to be available on the component. But it also means users may have to wait longer before seeing content.
• fetch exposes a $fetchState.pending property and it's up to you how to handle that

Error handling

• if an error is thrown in asyncData the page is not rendered
• fetch exposes a $fetchState.error property and it's up to you how to handle that

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>

Answer 4

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.