docs(data-fetching): add note about difference between useFetch and useAsyncData (#4974)

docs/content/2.guide/2.features/5.data-fetching.md

@@ -6,60 +6,6 @@ Nuxt provides `useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData`
 **`useFetch`, `useLazyFetch`, `useAsyncData` and `useLazyAsyncData` only work during `setup` or `Lifecycle Hooks`**
 ::
 
-## `useAsyncData`
-
-Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
-
-::ReadMore{link="/api/composables/use-async-data"}
-::
-
-### Example
-
-```ts [server/api/count.ts]
-let counter = 0
-export default () => {
-  counter++
-  return JSON.stringify(counter)
-}
-```
-
-```vue [app.vue]
-<script setup>
-const { data } = await useAsyncData('count', () => $fetch('/api/count'))
-</script>
-
-<template>
-  Page visits: {{ data }}
-</template>
-```
-
-:LinkExample{link="/examples/composables/use-async-data"}
-
-## `useLazyAsyncData`
-
-This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
-
-::ReadMore{link="/api/composables/use-lazy-async-data"}
-::
-
-### Example
-
-```vue
-<template>
-  <div>
-    {{ pending ? 'Loading' : count }}
-  </div>
-</template>
-
-<script setup>
-const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
-watch(count, (newCount) => {
-  // Because count starts out null, you won't have access
-  // to its contents immediately, but you can watch it.
-})
-</script>
-```
-
 ## `useFetch`
 
 Within your pages, components and plugins you can use `useFetch` to universally fetch from any URL.
@@ -114,6 +60,66 @@ watch(posts, (newPosts) => {
 </script>
 ```
 
+## `useAsyncData`
+
+Within your pages, components and plugins you can use `useAsyncData` to get access to data that resolves asynchronously.
+
+::alert
+You might be asking yourself: what is the difference between `useFetch` and `useAsyncData`?
+
+In brief, `useFetch` receives a URL and gets that data, whereas `useAsyncData` might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case.
+::
+
+::ReadMore{link="/api/composables/use-async-data"}
+::
+
+### Example
+
+```ts [server/api/count.ts]
+let counter = 0
+export default () => {
+  counter++
+  return JSON.stringify(counter)
+}
+```
+
+```vue [app.vue]
+<script setup>
+const { data } = await useAsyncData('count', () => $fetch('/api/count'))
+</script>
+
+<template>
+  Page visits: {{ data }}
+</template>
+```
+
+:LinkExample{link="/examples/composables/use-async-data"}
+
+## `useLazyAsyncData`
+
+This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
+
+::ReadMore{link="/api/composables/use-lazy-async-data"}
+::
+
+### Example
+
+```vue
+<template>
+  <div>
+    {{ pending ? 'Loading' : count }}
+  </div>
+</template>
+
+<script setup>
+const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
+watch(count, (newCount) => {
+  // Because count starts out null, you won't have access
+  // to its contents immediately, but you can watch it.
+})
+</script>
+```
+
 ## Refreshing Data
 
 Sometimes throughout the course of your user's page visit, you may need to refresh the data loaded from the API. This can happen if the user chooses to paginate, filter results, search, etc.