Difference between Asyncdata vs Fetch
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 componentsfetch
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
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 storefetch
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
andfetch
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
orfetch
Choosing
asyncData
orfetch
totally depends on your architecture