Unlock the Power of Lazy Hydration in Vue 3

The Limitations of Partial Hydration

As web applications continue to grow in complexity and size, performance concerns become a major issue. One way to tackle this is by adopting server-side rendering (SSR) to offload some of the rendering processes from the client. However, even with SSR, site performance can still suffer due to the process of hydration – making the app interactive on the client-side.

Partial hydration, where only certain parts of the app are hydrated, is a step in the right direction. This approach is particularly useful when implementing “islands architecture,” where different app sections are considered separate entities. By hydrating only the interactive parts, you can improve performance and user experience.

Enter Lazy Hydration

Lazy hydration takes partial hydration to the next level. Instead of just deciding what parts of the app to hydrate, you can also control when hydration occurs. This allows you to hydrate components only when they’re needed, resulting in significant performance improvements.

Implementing Lazy Hydration in Vue 3

Implementing lazy hydration in Vue 3 is relatively straightforward. You’ll need a wrapper component that renders your component on the server while using conditional rendering on the client-side to delay hydration until certain conditions are met.

Configuring the Lazy Hydration Component

Our lazy hydration component will accept a range of config props, including:

• SSR-only static components
• Hydrating when the browser is idle
• Hydrating when the component is visible
• Hydrating after a Promise resolves
• Hydrating on user interaction
• A callback after the component’s hydrated

Setting Up the Component

export default {
  setup() {
    const wrapperTemplateRef = ref(null);
    const hydrated = ref(false);
    const hydrate = () => {
      hydrated.value = true;
    };
    //...
  }
}

Handling Hydration

export default {
  //...
  mounted() {
    onMounted(() => {
      // Handle didHydrate callback
    });
  },
  watch: {
    options: {
      handler(newVal) {
        // Handle options and set hydrated ref appropriately
      },
      deep: true,
    },
  },
}

Visibility-Based Hydration

if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      hydrate();
    }
  }, options);
  observer.observe(wrapperTemplateRef.value);
} else {
  hydrate();
}

Browser Idle-Based Hydration

if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    hydrate();
  });
} else {
  setTimeout(hydrate, 0);
}

User Interaction-Based Hydration

const events = ['click', 'ouseover', 'touchstart'];
events.forEach((event) => {
  document.addEventListener(event, () => {
    hydrate();
  });
});

Using the Lazy Hydration Component

With our lazy hydration component ready, we can test it out in a Vue 3 SSR app. We’ll scaffold a new app using vite-plugin-ssr and set up the lazy hydration component.

Combining Lazy Hydration with Async Components

To further improve performance, we can combine lazy hydration with async components. This will split our app into smaller chunks, ready to be loaded on-demand.

import { defineAsyncComponent } from 'vue';

const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

export default {
  components: { MyComponent },
};