Hydrating whole pages

[gustojs]

Hi. The documentation explains how to hydrate individual components imported to our pages, using client prop.

Is that possible to do on a page level, for example to use a button directly in the page component? Or should we rather abstract such functionality to non-page components, in order to atomically hydrate only what we need?

[ElMassimo]

@gustojs Because page components have access to the entire context (page, frontmatter, meta), allowing to hydrate them could potentially bloat the bundle, as that all that data would need to be included.

Also, the amount of JS needed to hydrate the page would negate the benefit of using islands.

I would recommend abstracting functionality in larger pieces, such as a <ShoppingCart>, or <UserAvatar/>.

---

An article that I will add to the docs soon talks about some limitations when using islands:

• Don't use usePage and useRoute, neither data nor vue-router will be available in the bundle
• Pass everything the component needs explicitly as props

---

Vitepress has a built-in optimization that provides a good balance if you need full-page hydration:

It creates two JS files per page, a full SSR hydration script which can render every single element on the page, and a lean one, which strips away some of the static elements and can render the non-static pieces

In a Vitepress app, the first navigation will receive HTML and use the lean JS script to hydrate the non-static pieces. Subsequent navigations use the full JS script for each visited page.

Have in mind that "static" is not fine-grained, if you are using v-if or any other directive the Vue compiler can't treat it as static, even if the conditions would never change.

[gustojs]

Thanks!