docs: distinguish between $fetch and fetch composables (#21228)

docs/1.getting-started/6.data-fetching.md

@@ -9,7 +9,9 @@ Nuxt comes with two composables and a built-in library to perform data-fetching
 
 Used together, they ensure cross-environment compatibility and efficient caching and avoid duplicate network calls.
 
-`useFetch` is the most straightforward way to perform API calls in Nuxt.
+`useFetch` is the most straightforward way to handle data fetching in a component setup function.
+
+On the other hand, when wanting to make a network request based on user interaction, `$fetch` is almost always the right handler to go for.
 
 If you need more fine-grained control, you can use `useAsyncData` and `$fetch` independently.
 
@@ -82,7 +84,7 @@ const users = await $fetch('/api/users').catch((error) => error.data)
 ```
 
 ::alert{type="warning"}
-Beware that using only `$fetch` will not provide the benefits described in [the first section of this page](#why-using-specific-composables). It is recommended to use `$fetch` when doing actions purely on client-side or combined with `useAsyncData`.
+Beware that using only `$fetch` will not provide the benefits described in [the first section of this page](#why-using-specific-composables). It is recommended to use `$fetch` when posting data to an event handler, when doing client-side only logic, or combined with `useAsyncData`.
 ::
 
 ::ReadMore{link="/docs/api/utils/dollarfetch"}

docs/3.api/1.composables/use-async-data.md

@@ -5,6 +5,10 @@ description: useAsyncData provides access to data that resolves asynchronously.
 
 Within your pages, components, and plugins you can use useAsyncData to get access to data that resolves asynchronously.
 
+::alert{type=warning}
+`useAsyncData` is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
+::
+
 ## Type
 
 ```ts [Signature]

docs/3.api/1.composables/use-fetch.md

@@ -1,9 +1,12 @@
 # `useFetch`
 
 This composable provides a convenient wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) and [`$fetch`](/docs/api/utils/dollarfetch).
-
 It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
 
+::alert{type=warning}
+`useFetch` is a composable meant to be called directly in a setup function, plugin, or route middleware. It returns reactive composables and handles adding responses to the Nuxt payload so they can be passed from server to client without re-fetching the data on client side when the page hydrates.
+::
+
 ## Type
 
 ```ts [Signature]