Server Islands
Render isolated server components on demand — personalized content without sacrificing static page speed.
What are Server Islands?
Server Islands are Astro components that are deferred — the surrounding page is served as fast static HTML while the server island is fetched and injected afterwards. This gives you the best of both worlds: CDN-level page delivery speed, plus fresh server-rendered content (like a user greeting or live stock ticker) without a full SSR page.
The values below are rendered on the server at request time — they change on every page load, proving this is live SSR, not cached HTML.
Server Time
10:14:32 PM
Server Date
Thursday, May 7, 2026
Random Token
#498,891
Build Timestamp
2025-01-01 · 00:00:00
This value never changes until you rebuild. Refresh the page — only the server island updates.
How it works
Mark the component with server:defer
Add the server:defer directive to any Astro component. Astro will serve the page
immediately with a placeholder, then stream in the real component.
<UserGreeting server:defer />Provide a loading fallback (optional)
Use the fallback slot to show a skeleton while the island loads.
<UserGreeting server:defer>
<div slot="fallback" class="skeleton h-8 w-40 rounded" />
</UserGreeting>Write the island as a normal Astro component
The component’s frontmatter runs on the server — you can fetch from a database, read cookies, or call any Node API.
---
// UserGreeting.astro
import { getUser } from '../lib/auth'
const user = await getUser(Astro.cookies.get('session')?.value)
---
<span>Hello, {user?.name ?? 'Guest'}!</span>When to use Server Islands
| Use case | Recommended |
|---|---|
| Personalised greetings | ✓ Server Island |
| Live cart item count | ✓ Server Island |
| Marketing hero section | Static HTML |
| Blog article body | Static HTML |
| Real-time dashboard | Full SSR page |
Server Islands require output: 'server' or output: 'hybrid' in astro.config.mjs.
They are not available in fully static (output: 'static') builds.
Combine Server Islands with Incremental Static Regeneration (ISR) for the best performance: most of the page is cached, only the island is always fresh.