Confusing useFetch behavior
The line calling useFetch doesn't always run. I've noticed it doesn't talk to my backend on starting the project and on refreshing it. But when I make a edit and save it then it runs. Whats going on? I think this is a async issue but I am unsure of where to go from here.
4 Replies
Hi @clownshark5503. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your observation is correct: the line calling useFetch doesn't always trigger a backend request, especially on project start or page refresh. This is expected Nuxt behavior due to how useFetch works with SSR (Server-Side Rendering) and data hydration.
Key points from the knowledge sources:
- useFetch is designed to be called in the setup function, and it fetches data both on the server and client. However, on initial load (SSR), the data is fetched on the server, and the result is sent to the client as part of the Nuxt payload. This means the client does not re-fetch the data after hydration; it uses the server-fetched data instead. That's why you don't see a network request to your backend on page refresh or initial load—the data is already present in the payload and doesn't need to be fetched again on the client side [Nuxt useFetch docs].
- If you make a code edit and save (triggering HMR or a rebuild), Nuxt may invalidate the cache or re-run the fetch logic, which is why you see the backend request in that scenario.
- If you want to force useFetch to always make a request (for example, to avoid caching or to ensure fresh data), you can use the key option with a unique value each time, or use $fetch for client-only, event-based fetching [Stack Overflow: Nuxt website shows old data when refreshing a page that uses useFetch].
- useFetch is meant to be called at the top level of setup or in plugins/middleware, not inside event handlers or functions. For programmatic or event-based fetching, use $fetch instead [Github Issue: My useFetch to my server/api not executing].
Summary:
The behavior you're seeing is by design: useFetch fetches data on the server during SSR, and the client uses that data after hydration, so no additional client-side request is made on refresh or initial load. If you need different behavior (like always fetching on the client), consider using $fetch or adjusting the useFetch options as described above. If you need more control over when the fetch happens, you can use options like lazy, immediate, or server: false, depending on your use case [Nuxt useFetch: Client-only fetching]. If you have a specific scenario in mind, let me know and I can suggest a more tailored solution! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
The behavior you're seeing is by design: useFetch fetches data on the server during SSR, and the client uses that data after hydration, so no additional client-side request is made on refresh or initial load. If you need different behavior (like always fetching on the client), consider using $fetch or adjusting the useFetch options as described above. If you need more control over when the fetch happens, you can use options like lazy, immediate, or server: false, depending on your use case [Nuxt useFetch: Client-only fetching]. If you have a specific scenario in mind, let me know and I can suggest a more tailored solution! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@220663714020327434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I think you may be confused by SSR. If your project runs in SSR mode (the default for Nuxt), the fetch happens on the server and therefore is not visible in dev tools. However, the data should be available to you nonetheless, as it is transferred to the client within nuxt server render payload.
Otherwise a broader context, eg. a minimal reproduction would go a long way to help others understand your issue better
Solution: I set useFetch to run client side only.
Thank you!