useFetch and useAsyncData lazy variants
Nuxt 3 provides lazy variants of data fetching composables: useLazyAsyncData and useLazyFetch. These lazy variants do not block client-side navigation.
Nuxt · Getting started · all subjects
data-fetching
66 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
useFetch URL resolution examples
Correct useFetch calls use either relative paths (useFetch('/api/data')) or absolute URLs with explicit protocols (useFetch('https://api.example.com/data')).
useAsyncData correct usage with key
The correct way to call useAsyncData() is: const { data } = useAsyncData('users', () => $fetch('/api/users')). The first argument is the non-empty string key 'users', and the second argument is the async function that fetches the data.
useAsyncData requires a non-empty string key
The useAsyncData() composable must be called with a non-empty string as the first argument. This key is required so Nuxt can cache and deduplicate the request across components.
useAsyncData correct syntax with handler function
useAsyncData() takes a key as the first argument and a handler function as the second argument. The handler function performs the fetch operation. Example: const { data } = useAsyncData('users', () => $fetch('/api/users'))
Maintain data consistency between server and client for proper hydration
To ensure proper hydration, it is important to maintain consistency between the data on the server and the client. For API requests, it is recommended to use useAsyncData, useFetch, or other SSR-friendly composables. These methods ensure that the data fetched on the server side is reused during hydration, avoiding repeated requests. Any new requests should only be triggered after hydration to prevent hydration errors.