Is data fetched in top level <script setup> supposed to fetch twice?

[mbrodt]

Hey, thanks for the awesome framework!

It seems to me like fetching data in <script setup> will fetch the data initially on the server, but then make the same request again on the client.

This can cause UX issues where the page looks to be done loading, but if the user starts scrolling down the page, they will be automatically moved to the top when the client side data has finished fetching.

I dont think Nuxt 2 worked this way (on SSR you couldn't see any fetch requests in the network tab). So I was wondering if the new behaviour is intended and/or there's a way to disable it? I understand that universal mode will hydrate the page, but I wasn't aware it would also refetch data like this.

Reproduction: https://stackblitz.com/edit/nuxt-starter-x9kb1p?file=pages%2F[...slug].vue

You can see in the console that the data is logged multiple times. And if you scroll down quickly after the initial render, you can see the scroll position being reset when the client-side render is done.

Appreciate any help on this!

[manniL]

Short answer: If you use $fetch - yes. If you use useAsyncData or useFetch - no.

Long answer:

You need to transfer state from the server to the client. $fetch does not do that by default because it is just a fetching utility. Thus, the fetch will be executed on both sides because the client has to get the data somehow again.

useFetch (using $fetch under the hood) and useAsyncData (more flexible/low-level) both use useState to ensure that the content is correctly serialized and deserialized (transferred from server to client) so you do not have to refetch again.

[mbrodt]

Thanks for the response! That makes sense - but if I change the reproduction case to useFetch, it still has the same issues from what I can see 🤔

Also, in my actual project I'm passing a fetcher to another library (custom) that then does the actual fetching. And if I use useFetch in that constellation, the client side re-render seems to have different behaviour than the SSR version. Any idea what that might be caused by? Hard to say with this minimal context of course, but just curious :)

[manniL]

Regarding the custom fetch library, that's where you can use useAsyncData for and call the library there 😋
Will check the sandbox with useFetch in a sec and answer below.

[manniL]

That's because it is running on StackBlitz and has no "actual server" (both SSR and CSR running in browser).
If you replace $fetch with useFetch and do a hard reload, you see only 1 request in the console instead of 2.
Also don't forget that the script setup will be executed twice anyway, but the fetch from useFetch won't.

[mbrodt]

Ahh, that makes sense - thanks @manniL! I've switched to the following and now it seems to only make the API call on the server 👌 Is it correct that the first parameter to useAsyncData is just a key used internally to keep track of the state to avoid refetching on the client?

Appreciate your help!

[manniL]

The key is used so the call can be differentiated from other calls - it should be unique "per same request", so you best take route and device into it as well 😋