🏝
vite-plugin-island Vite plugin that provides virtual modules to support partial hydration.
Plugin options
-
hydrate: string: a resolvable module path pointing to a file that exports a framework specific hydration module.
-
islandGlobPattern?: string: A glob pattern to find all island components. Defaults to
src/**/*.island.*
Hydration modules
To hydrate component you have to provide a module that exports a hydrate
function. For React such a module would look lie this:
import { hydrateRoot } from "react-dom/client";
export function hydrate(element, container) {
return hydrateRoot(container, element);
}
Usage
Once everything is set up, you can use the plugin like this:
import { island } from "virtual:island";
function Component() {
return <div>The time is {new Date().toLocaleTimeString()}</div>;
}
const IslandComponent = island(Component);
NOTE: The island function will only have an effect when Vite is run in SSR mode. For regular client builds, the island function is a no-op and returns the component verbatim.
Finally, in your page's bootstrapping code, import virtual:island-hydration
to run the hydration script.