useFetch triggers a request on the client side in nested components (using resolveComponent)

[darioferderber]

Environment

---

• Operating System: Linux
• Node Version: v18.12.1
• Nuxt Version: 3.4.2
• Nitro Version: 2.3.3
• Package Manager: [email protected]
• Builder: vite
• User Config: components
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-starter-6ejkfx?file=pages/variable.vue

Describe the bug

This issue happens when you use nested <component :is="component" />

If you resolve the parent component with the string - useFetch triggers a request only on the server side and the data is transferred to the client, which is fine.

const component = resolveComponent('Main');

If you resolve the parent component with the variable, everything renders well, but useFech triggers a request both on the server side and the client side

const name = 'Main';
const component = resolveComponent(name);

Components are registered as global components as it was mentioned here.

Additional context

There is an index.vue page in the stackblitz example where everything works fine, and variable.vue which is "broken".

Logs

No response

[darioferderber]

As I understand, "behind the scenes" you use defineAsyncComponent to register the component as an async component and it gets separated into its own chunk (here is an example replacing resolveComponent with defineAsyncComponent from the previous example).

When the chunk is loaded on the client, data from the useFetch somehow doesn't get transferred although it exists in the payload, and a new request is then triggered.

Here's a workaround, which doesn't seem right 😄

Do you have any other ideas or workarounds on how to achieve this without triggering the request on the client?

I know there are several ways to use a component, but none of them seem to work if you use them in the inner/nested component.

<component :is="component" />

<script setup>
  const component = resolveComponent('Main')
  // or 
  const component = defineAsyncComponent(() => import('../Main.vue'))
</script>

<Main />

<script setup>
  const component = 'Main'
  // or
  const Main = resolveComponent('Main')
  // or 
  const Main = defineAsyncComponent(() => import('../Main.vue'))
</script>

[darioferderber]

With further "investigation", I concluded that the inner/nested component somehow doesn't hydrate.
I've changed the asyncData.ts and removed nuxt.isHydrating just to return the payload and everything works as it should, but of course that's not a great idea to do.

const getCachedData = () => nuxt.payload.data[key] || nuxt.static.data[key]

Another "fix" would be to set isHydrating to true on the client just before useFetch is called from the inner/nested component (without changing the asyncData.ts), but again, I'm not sure if this is a good idea sure it's not a good idea.

useNuxtApp().isHydrating = process.client

At the end (after many edits of the comment 🙂), I think that all comes down to the Suspense from page.ts where onResolve is called too early (#13542), which can be a Vue issue (vuejs/router#626 (comment)), and not a Nuxt issue 🤔

[danielroe]

The root issue here is an upstream Vue bug with hydrating async components: vuejs/core#6638.

We can track within the Nuxt repository via #18405.