JS is eagerly loaded for lazy hydrated components

[danielroe]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/github-kozduzwy?file=src/App.vue,src/components/HelloWorld.vue,src/entry-client.ts,src/entry-server.ts,index.html&terminal=dev

Steps to reproduce

Load the site. Click the button to confirm the component is not hydrated.

Open the network tab and see that the JS code has been loaded by the async component.

What is expected?

defineAsyncComponent should not immediately load the JS for a component if there is a custom hydration strategy

What is actually happening?

defineAsyncComponent immediately triggers loading of JS chunk, regardless of hydration strategy being present

System Info

Any additional comments?

Context: implementing lazy hydration in Nuxt: nuxt/nuxt#26468.

I've shipped a temporary workaround involving double layer of wrapping defineAsyncComponent but ideally defineAsyncComponent should wait to load the component until hydrate is called, if there is a custom hydration strategy.

[edison1105]

This issue is not related to whether the JS chunk is immediately triggered for loading. Even if load executes earlier, it will still first execute hydrate and then render the resolvedComp, as rendering is asynchronous.

The root cause of the problem is that the custom lazy hydration strategy provided is incorrect. At the very least, the hydrate option should be implemented as follows:

hydrate: (doHydrate) => { doHydrate() }

doHydrate must be called. The purpose of a custom hydration strategy is to allow users to invoke doHydrate at an appropriate time. If doHydrate is not called, it means that the resolvedComp will not be rendered. see hydrateSubTree

If we want to support skipping hydration, we should introduce a new option instead of repurposing the hydrate option for this functionality.

misread.

[danielroe]

that's merely an example. it also occurs with any other hydration strategy.

the reported bug is that the js is eagerly loaded immediately regardless of the hydration strategy. that is, it does not wait for hydrate to be called

imagine you have hydrate on interaction. my expectation is that the module is not imported until hydration (ie when interaction happens).

but the current behaviour is that the module is immediately loaded and only executed on hydration

this removes any perf benefit from reduced network payloads