There are three main components for implementing data fetching in Nuxt.js:

• useFetch - go to for data fetching. A wrapper of useAsyncData and $fetch .
• useAsyncData - wrapping async logic and return once resolved.
• $fetch - Under the hood is ofetch.

useFetch

• Use this in setup components, plugins, or route middleware.

• useFetch is server-side rendered by default but also automatically switches to client-side fetching when needed.

• You can force useFetch to execute client-side by using the key option.

  const { data, error } = useFetch('/api/endpoint', {
    credentials: 'include',
    key: 'client-fetch',
  });
  

$fetch

• For client-side interaction.
• Care for network calls de-duplication and navigation prevention.
• Supports cookies and headers in client-side contexts

<aside> ✅

In my case, I need to include credentials along with my requests, which credentials(cookies) only live in the browser (client-side environment), so I had to use $fetch to implement the queries correctly. (more straightforward)

</aside>

useAsyncData

• useAsyncData allows greater control over how the data is fetched asynchronously.
• It's best suited for complex scenarios, such as handling multiple requests, custom loading/error states, retry logic, or chaining dependent requests.

  • When you want multiple $fetch in a composable.

    • Concurrent example:

  • Sometimes, API requests might fail, and you'd want to retry the request a certain number of times before giving up.

  • When a CMS or a third party provides their own query layer.

    • Explanation (by Claude Sonnet 3.5)
• You have full control over the lifecycle of the request (fetching, loading, errors), which provides flexibility beyond what useFetch offers.

<aside> ✅

Can also use useAsyncData for sending requests with client-side only credentials(cookies). Include the condition for process.client should do the work.

</aside>