Lazy Hydration: Possible to disable hydration entirely?

[michaelhthomas]

Vue 3.5 added support for lazy component hydration, which is very exciting! I was previously using vue3-lazy-hydration for this functionality, which provided a helper named hydrateNever which would entirely disable component loading / hydration. My understanding is that something similar could be achieved by passing a do-nothing function as the hydration helper, as shown below.

defineAsyncComponent({
  loader: () => import(...),
  hydrate: () => {}
});

Unfortunately, though I believe this does prevent the component from being hydrated, the component module is still loaded unnecessarily. Is I there any way to prevent the component from being loaded entirely (i.e. prevent the loader function from being called), matching the behavior of hydrateNever from vue3-lazy-hydration?

[kazvaggos]

I managed to do so by creating a wrapper component with this util

import {defineAsyncComponent, defineComponent, h, resolveComponent} from 'vue';

/**
 * A wrapper around async component in order to
 * lazily hydrate it, given a strategy. This way
 * the JS file of the component is only downloaded
 * when the hydration kicks in.
 *
 * Note: if no strategy is provided, then the
 * hydration never happens and the JS file is
 * not fetched at all.
 *
 * @param {Object} options
 * @param {string} options.name - The name of the component
 * @param {Function} options.loader - The loader function
 * @param {Function} [options.strategy] - The hydration strategy to use
 * @returns {VueComponent}
 */

const getLazilyHydratedComponent = ({name, loader, strategy = () => {}}) =>
  defineAsyncComponent({
    loader: () =>
      new Promise(resolve => {
        resolve(
          defineComponent({
            components: {
              [name]: defineAsyncComponent({
                loader
              })
            },
            render() {
              return h(resolveComponent(name));
            }
          })
        );
      }),
    hydrate: strategy
  });

export default getLazilyHydratedComponent;

You can just use it like this

getLazilyHydratedComponent({
    name: 'ComponentName',
    loader: () => import('path/to/ComponentName.vue'),
    strategy: hydrateOnVisible() // If no strategy provided, acts like hydrateNever
})