Astro Server Islands use the server:defer directive to asynchronously render components server-side after the initial page load. Learn vocabulary for the defer request mechanism, fallback slot loading states, required SSR output modes, prop serialization in URLs, and the fundamental difference from client-side hydration islands.
0 / 5 completed
1 / 5
An Astro Server Island component is marked with the server:defer directive. How is this component rendered?
server:defer marks a Server Island: the initial page response includes a placeholder (or fallback), and the component is fetched asynchronously via a separate HTTP request to the Astro server after the page loads. This enables personalized content (e.g., user dashboards) without blocking the initial page delivery.
2 / 5
A developer specifies a fallback slot in a Server Island. When is this fallback content displayed?
The fallback slot content is shown as a loading placeholder while the Server Island request is pending. Once the server responds with the rendered HTML, Astro replaces the fallback with the actual content. This is analogous to the Suspense fallback pattern in React.
3 / 5
Which Astro output mode is required for Server Islands to function?
Server Islands require an Astro adapter and output: 'server' or output: 'hybrid'. A pure static build (output: 'static') cannot serve the async island requests at runtime because there is no server to process them. The adapter handles the island endpoint routing.
4 / 5
Props passed to a Server Island component are transmitted how from the client to the server?
Server Island props are encoded into the URL of the island's async request (as query parameters or path segments, depending on the implementation). This means props must be serializable and should not contain sensitive data, since they appear in the request URL and could be logged or cached.
5 / 5
How do Server Islands differ from Astro's existing client-side islands (client:load, client:idle, etc.)?
Client islands send component code to the browser for hydration — they execute JavaScript on the client. Server Islands execute entirely on the server per-request and return only HTML. They can access server-only resources (databases, cookies, secrets) and require zero client JavaScript for the island itself, making them ideal for personalization without JS overhead.