useFetch and lazy option
Data fetching docs (https://nuxt.com/docs/getting-started/data-fetching#lazy) say:
By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the lazy option. In that case, you will have to manually handle loading state using the pending value.When I use
useFetch
like this:
should I expect a 3 seconds wait before navigation to the page containing this code?
I feel like I'm missing some piece of the puzzle here
I've created a simple example of this behaviours:
https://stackblitz.com/edit/github-7hutqh10 Replies
lazy: false is the default, you wouldn't need it
you should expect a 3s delay on client and on server navigation, yes
with "useLazyFetch" or lazy: true, you'd not have that delay on client-navigation but have
data: null
, eventually updating when the call was doneAwait it
The useFetch
Omg, so dumb! Thanks for your time Alex 🍺
No problem!
I was fooled by the example here: https://nuxt.com/docs/getting-started/data-fetching#lazy
As far as I understand if I use
lazy
option the presence of await
does not affect the navigation, does it?client-side navigation, yes
server-side no
pr welcome!
Can you give me some clarification? I'm not sure about what do you mean by "client-side" and "server-side" navigation
server-side = "initial request to the page", e.g. when you hard reload or when you come from another website/google/...
"client-side" = you are on the page already and do subsequent navigation
Thanks for your clarification! 👌 I think I got it now.
I've noticed that in some documentation examples (i.e. https://github.com/nuxt/nuxt/blob/4dbe748cfc3775aecb8fccc3bb2a4136241aa120/docs/1.getting-started/6.data-fetching.md?plain=1#L222) the
await
is missing when lazy: true
/ server: false
. is the lack of await
intentional?