title: Difference between Asyncdata vs Fetch
body: <p>What is the exact difference between fetch and async data. The official documentation says the following:</p>
  <blockquote>
  <p><strong>asyncData</strong></p>
  <p>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.</p>
  <p><strong>asyncData</strong> 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.</p>
  </blockquote>
  <hr />
  <blockquote>
  <p><strong>Fetch</strong></p>
  <p>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.</p>
  <p>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.</p>
  </blockquote>
  <hr />
  <p>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.</p>
  <p>Both methods are running server-side on the initial load, after that when you navigate through the applicatie it runs client side.</p>
  <p>Can someone explain me the advantage of use these methods above the other?</p>
  <p>Thanks for help.</p>