Difference between Asyncdata vs Fetch

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

Leave a Comment