Multi-Framework Server Islands

Each NotificationBell is a different framework, server-rendered on demand, then hydrated on interaction (hover/click). The Preact one hydrates immediately for comparison.

Preact (server + on:client)

Hydrates immediately after server fetch.

Solid (server + on:interaction)

Hydrates on first hover/click.

Svelte (server + on:interaction)

Hydrates on first hover/click.

Vue (server + on:interaction)

Hydrates on first hover/click.

React (server + on:interaction)

Hydrates on first hover/click.

How to test: Each bell shows server-rendered HTML immediately. Hover or click a bell to trigger hydration — the component becomes interactive (toggle notifications, dismiss items). Check DevTools for data-hydrated="true" after interaction.