Difference between Asyncdata vs Fetch

Difference between Asyncdata vs Fetch

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

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.

nuxt-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Nuxt.js Content Tutorial, Nuxt.js Auto-Import Tutorial

Nuxt.js Content is a Git-based Headless CMS that allows you to fetch Markdown, JSON, YAML and CSV! in this video we look at how easy it is to setup. We also look at Nuxt auto-import components!

Responsive ecommerce template built with Vue.js and Nuxt.js

Responsive ecommerce template built with Vue.js and Nuxt.js

Nuxt js Laravel Authentication Tutorial With Example

Nuxt js Laravel Authentication Tutorial Example. We use third-party package called Tymon to create json web token and sent back to the client for an auth.

Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps

In this article, you'll learn how we can take advantage of Nuxt.js to build server-rendered JavaScript applications with Vue.js. Learn how to use its generate command to generate static files for our pages, and deploy them quickly via a service like Firebase Hosting.

How to load third-party scripts in Nuxt.js

In this article, Alexander Lichter (core Nuxt.js member) teaches you how to load third-party scripts in your Nuxt.js application. Both globally and on individual pages.