`useFetch` not reactive after redirection when SSR is disabled and used in a layout
Do you have any idea what might be causing this issue? https://github.com/nuxt/nuxt/issues/31875
GitHub
useFetch not reactive after redirection when SSR is disabled and ...Environment Operating System: Darwin Node Version: v20.18.0 Nuxt Version: 3.16.2 CLI Version: 3.24.1 Nitro Version: 2.11.9 Package Manager: pnpm@9.12.3 Builder: - User Config: ssr, modules, devtool...
4 Replies
Hi @maximepvrt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, I can see several issues related to
useFetch reactivity in Nuxt, though none specifically address the exact issue in the GitHub link you shared.
The reactivity issues with useFetch can occur for several reasons:
1. Reactivity loss during SSR: There was a fix in PR #27542 for a regression where reactive payloads were being overridden with non-reactive ones when ssr: false was set.
2. Caching behavior: useFetch caches responses, which can cause issues when navigating between pages. As mentioned in a Stack Overflow post, adding a unique key parameter to useFetch options (like using Date.now()) can force it to re-fetch data instead of using cached values.
3. Layout-related issues: There's a documented issue where useAsyncData and useFetch run twice if a page uses a layout, as noted in GitHub issue #13369.
4. Reactivity with refs: According to GitHub issue #15359, useFetch might not properly update when using reactive values in the URL. The recommendation is to pass the ref directly rather than destructuring it.
For your specific issue with useFetch not being reactive after redirection when SSR is disabled and used in a layout, it could be related to the fix mentioned in PR #27542, but without seeing the specific details of issue #31875, I can't provide a definitive answer.
Some potential solutions to try:
1. Use a unique key in your useFetch call to prevent caching
2. Try using useLazyFetch instead of useFetch
3. Ensure you're passing reactive references properly
4. Consider using useAsyncData with a custom fetch function as an alternative
If these don't resolve your issue, it might be a specific bug that needs to be addressed by the Nuxt team.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1048723743033274408> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Layouts are complicated. Have you checked if it reproduces in production build? There is special case for dev mode in layout component: https://github.com/nuxt/nuxt/blob/08d653433dce6f1090f392fe9ad44a4001cbc7b8/packages/nuxt/src/app/components/nuxt-layout.ts#L155-L163
Okay I tested myself, it is not it
It's weird. I tried moving the code from the layout file to the page, but the issue was the same.