hydrateIslands
Hydrate every island marker under `options.root` (default: the whole document) into its own React root, loading each one's module through `options.load`.
Hydrate every island marker under options.root (default: the whole document)
into its own React root, loading each one’s module through options.load.
A marker carrying data-tr-island-frameless holds no server-rendered output, so its
island is mounted fresh rather than hydrated — there is nothing to hydrate against,
and asking React to try reports a mismatch on every such island.
A marker nested inside another marker is skipped — it belongs to the parent
island’s own render, so hydrating it separately would create a second root on
DOM the parent already owns. A marker whose props payload is missing, or that
shares its id with another payload, is refused rather than guessed at. A marker
that leaves the document while its module is still loading is silently skipped:
that is the host’s own re-render racing this call, not a failure. Every other
failure — a rejected load(), a thrown render — reaches options.onError
rather than throwing out of this call, so one bad island never blocks its
neighbors.
Islands hydrate by viewport priority: the returned promise covers what is visible at
first paint, and onHydrated reports the rest as the visitor approaches them or the
main thread goes idle. schedule: "eager" hydrates every island before this call
settles instead — see {@link HydrateIslandsOptions.schedule}.
WHICH islands this promise covers is the schedule’s business; WHETHER they have mounted is not. It settles once each covered island has a React root, which React commits a task later — so a caller that needs the islands’ DOM to EXIST (a capturer, a measuring pass) must await {@link IslandContext.mounted} on the handles, which is why every handle carries one.
Import from @homepages/template-kit/island-runtime.
Signature
Section titled “Signature”function hydrateIslands(options: HydrateIslandsOptions): Promise<IslandHandle[]>Parameters
Section titled “Parameters”| Name | Type | Required | Description |
|---|---|---|---|
options |
HydrateIslandsOptions |
required |
Returns
Section titled “Returns”Promise<IslandContext[]>