AvalonAvalon
GitHub

Server Islands

Server islands render on-demand after the initial page load. The page can be fully cached or prerendered while personalized content is fetched separately from the server. A fallback skeleton is shown until the server response arrives.

Pure Server Island

This component renders the current server time. It ships zero client JavaScript — the HTML is fetched from the server and injected into the page.

Combined Server + Client Island

This component is first fetched from the server (personalized notification count), then hydrated client-side for interactivity. Click the bell to toggle notifications and dismiss them individually.

How it works: During the initial page render, the server island is replaced with the fallback skeleton. An inline script then fetches the component's HTML from /_server-islands/{id} and swaps it in. Props are encrypted so the client cannot tamper with them. For combined islands, the response also includes a hydration script that makes the component interactive after injection.