From 76eb4eaf62ac44c09ebcb05c9ca36258f14376da Mon Sep 17 00:00:00 2001 From: David Date: Tue, 7 May 2024 13:45:41 +0200 Subject: [PATCH] docs: improve data fetching wording and explanation (#27061) --- docs/1.getting-started/6.data-fetching.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md index 5a69126eab..3a26848aef 100644 --- a/docs/1.getting-started/6.data-fetching.md +++ b/docs/1.getting-started/6.data-fetching.md @@ -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. -## 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 @@ -76,7 +76,7 @@ async function addTodo() { ``` ::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. ::