Shipping interactive islands with Astro + Solid
How I use Solid islands to keep bundles small while delivering dynamic UI.
Astro lets me choose the right rendering mode per component. On marketing-style pages, I default to static HTML and sprinkle Solid islands only where live state matters: theme toggles, live playgrounds, or data viewers.
Key habits:
- Stateless first — ship server-rendered markup and hydrate later only if required.
- Single owner per concern — wrap multiple tiny interactions into one island to avoid hydration overhead.
- Move data to props — serialize the minimum JSON the island needs; everything else stays server-side.
I keep an eye on the island boundary: anything that can be a derived prop should be computed in Astro so Solid only handles interaction. The result is predictable Lighthouse scores and a calm user experience.