Halite pioneered a pattern called islands: a page of static HTML with small, independent interactive regions.
What is an island?
An island is one interactive component on an otherwise static page. Each island loads its own JavaScript, in isolation, when it is needed.
---
import Header from '../components/Header.hal';
import Carousel from '../components/Carousel.jsx';
---
<Header />
<!-- only this component ships JavaScript -->
<Carousel client:visible />Client directives
Directive | Hydrates |
|---|---|
| Immediately on page load |
| Once the main thread is free |
| When it scrolls into view |
| When a media query matches |
Directives only work on components from a UI framework. A .hal component is HTML and never hydrates.