If you’ve ever used Nuxt 3, you know there are a few ways to fetch data. But when should you use each one? The Nuxt documentation provides a detailed article about this. But if you’re still confused, here’s a simple way to understand it.

In Nuxt 3, you have three main options: the $fetch helper, and two composables: useFetch and useAsyncData. To simplify your life, just remember this: useFetch and useAsyncData are wrappers around $fetch and mean almost the same thing.

So most of the time, you just need to choose between $fetch or useFetch / useAsyncData.

Another simple rule is that this choice only matters on the frontend. If you fetch data in the backend (inside the server folder), you can only use $fetch.

Now, imagine you want to fetch data in a .vue file. What should you use? In general, you can use $fetch everywhere. It will work, and you won't see any errors in the console. But there's one case where using $fetch is not a good idea.

One of the main advantages of Nuxt 3 (compared to plain Vue) is that it uses server-side rendering (SSR) by default. This means the browser gets an HTML page already filled with content. The process of rendering is actually quite complex, but to put it simply: the Vue app runs twice - first on the server, and then again on the client (the browser).

If you use $fetch inside a Vue component, the app fetches the same data twice - once on the server and once on the client.

To fix this, Nuxt 3 provides useFetch and useAsyncData. Their main advantage is that they fetch the data only once - on the server.

Here is a simple rule to remember. If the data is needed for the server-rendered HTML (or if you see that the data is fetched twice), use useFetch or useAsyncData. For everything else, use $fetch.

For example, if you need to fetch data after a user clicks a button or scrolls the page - use $fetch. If you are fetching inside a lifecycle hook like onMounted - use $fetch. If you are working inside a client-side only component - again, use $fetch.

That's it. Simple and clear. Hope this makes it easier for you to choose the right way to fetch data in Nuxt 3!
This information is enough to fetch data properly in almost all cases.

But if you want to go a bit deeper, you can also learn about the difference between useFetch and useAsyncData. In short: useAsyncData is more flexible if you need to transform the data before using it, while useFetch is usually enough when you just want to fetch and display it.