mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 23:22:02 +00:00
docs: improve data fetching wording and explanation (#27061)
This commit is contained in:
parent
b330a296b8
commit
76eb4eaf62
@ -16,9 +16,9 @@ Both `useFetch` and `useAsyncData` share a common set of options and patterns th
|
|||||||
|
|
||||||
Before that, it's imperative to know why these composables exist in the first place.
|
Before that, it's imperative to know why these composables exist in the first place.
|
||||||
|
|
||||||
## Why using specific composables?
|
## Why use specific composables for data fetching?
|
||||||
|
|
||||||
When using a framework like Nuxt that can perform calls and render pages on both client and server environments, some challenges must be addressed. This is why Nuxt provides composables to wrap your queries, instead of letting the developer rely on [`$fetch`](/docs/api/utils/dollarfetch) calls alone.
|
Nuxt is a framework which can run isomorphic (or universal) code in both server and client environments. If the [`$fetch` function](/docs/api/utils/dollarfetch) is used to perform data fetching in the setup function of a Vue component, this may cause data to be fetched twice, once on the server (to render the HTML) and once again on the client (when the HTML is hydrated). This is why Nuxt offers specific data fetching composables so data is fetched only once.
|
||||||
|
|
||||||
### Network calls duplication
|
### Network calls duplication
|
||||||
|
|
||||||
@ -76,7 +76,7 @@ async function addTodo() {
|
|||||||
```
|
```
|
||||||
|
|
||||||
::warning
|
::warning
|
||||||
Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#why-using-specific-composables). :br
|
Beware that using only `$fetch` will not provide [network calls de-duplication and navigation prevention](#why-use-specific-composables-for-data-fetching). :br
|
||||||
It is recommended to use `$fetch` for client-side interactions (event based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
|
It is recommended to use `$fetch` for client-side interactions (event based) or combined with [`useAsyncData`](#useasyncdata) when fetching the initial component data.
|
||||||
::
|
::
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user