#useFetch not always passed to client

8 messages · Page 1 of 1 (latest)

vagrant bridge
#

I'm doing something like this:

const aaa = (await useFetch(...)).data;
const bbb = (await useFetch(...)).data;

The first request is fetched on the server and just passed to the client, but subsequent requests are always executed on the client, and I cannot figure out why. What's stranger is that if I reverse the order of the requests, the second request is still done on the client. It has nothing to do with the API itself, I even tried other APIs just to see. I also tried using useAsyncData with $fetch inside, but that yields the same result.

Any ideas?

vagrant bridge
#

I asked google's Bard, and though i'm not sure it's correct (I can't find that info in the Nuxt docs, and Bard won't link to a source) it does seem to be correct.

Bard's Answer:

The reason why the second request is executed on the client is because the useFetch composable only fetches data on the server if it is the first request in the chain. This is done to improve performance, as it prevents the server from having to make multiple API calls for the same data.

If you want to fetch data on the server for subsequent requests, you can use the useAsyncData composable. This composable will fetch data on the server and cache it in the browser, so that it can be reused for subsequent requests.

I did try using useAsyncData before without success, but maybe it was stuck in the cache or something. It does in fact work using useAsyncData & $fetch.

unreal anchor
#

as for bard, this feels like a typical case of hallucination, especially if the original message is what you passed into it as well

vagrant bridge
#

Yeah you're right, Bard's answer cannot be correct, because I was also unable to reproduce it on stackblitz yesterday. Forgot to mention that in the OP. I switched back to my original useFetch just now and now it suddenly works as it should. Honestly I have no clue what caused it, my only idea is maybe it was stuck in the nuxt cache? I did run nuxi clean recently, maybe that took care of it... but regardless i thought running build/generate would not read anything from the dev cache?

I will keep an eye on it and see if it happens again.

vagrant bridge
#

It came back. I think it had to do with the routing system I had set up; I was doing some custom stuff by using app.vue as catch-all and then watching useRoute().path for changes and rendering whatever component. I did that because I am fetching pages from a CMS and I need to render them at their respective route, and I couldn't figure out a better way. I now figured out a better solution though; I can use the pages:extend hook from a module to fetch and add the cms pages there. Since changing to that I haven't had the fetch issue anymore. Still have no clue why it was happening, but clearly Nuxt wasn't happy about something under the hood.

unreal anchor
#

Hmm that is odd to be honest

#

If you find a way to reproduce that I think that's very well worth investigation in a github issue