Server Islands

Combine the speed of static sites with the power of dynamic content. The shell loads instantly while dynamic sections stream in.

i

What are Server Islands?

Server Islands let you embed dynamic, server-rendered components within static pages. The static shell loads immediately, then dynamic content streams in without blocking the initial render. Perfect for personalized dashboards, live data, and user-specific content.

Live Dashboard Demo

This dashboard demonstrates the concept. In production with server:defer, the skeleton would show first, then be replaced by real content.

User Profile Server Island
Alex Developer

Welcome back, Alex Developer!

Full Stack Engineer

Last login: 1:16:10 AM

Analytics Server Island

Live Statistics

Live

Active Users

1.7k

+12%

Page Views

48.6k

+8%

Bounce Rate

35.0 %

-3%

Avg. Session

4.1 m

+5%

Server time: 1:16:10 AM

Loading States

While server islands load, you can show skeleton placeholders. Here's what users see during the brief loading period:

User Profile (Loading)

Content (Loading)

Implementation

Server Island Syntax astro 
---
// Static page with server islands
import UserProfile from './UserProfile.astro';
import LiveStats from './LiveStats.astro';
---

<!-- Static content loads instantly -->
<h1>Dashboard</h1>

<!-- Dynamic content streams in -->
<UserProfile server:defer>
  <Skeleton slot="fallback" />
</UserProfile>

<LiveStats server:defer>
  <LoadingSpinner slot="fallback" />
</LiveStats>
Server Island Component astro 
---
// UserProfile.astro
// This runs on the server for each request

const user = await db.users.findOne({
  id: Astro.locals.userId
});

const stats = await analytics.getStats({
  userId: user.id,
  period: '7d'
});
---

<div class="profile-card">
  <img src={user.avatar} alt={user.name} />
  <h2>Welcome, {user.name}!</h2>
  <p>{stats.visits} visits this week</p>
</div>

Static vs Dynamic Content

⚡ Static Shell (Instant)

  • • Navigation and layout
  • • Page structure and styling
  • • Static content and images
  • • Loading skeletons
  • • SEO-critical content

🌊 Server Islands (Streamed)

  • • User-specific content
  • • Real-time data and stats
  • • Personalized recommendations
  • • Shopping cart contents
  • • Authentication state

When to Use Server Islands

Great For

  • • E-commerce (cart, pricing, inventory)
  • • Dashboards with live metrics
  • • Personalized content feeds
  • • A/B testing variations
  • • Geolocation-based content

Consider Alternatives

  • • Fully static content (use static rendering)
  • • Client-only interactions (use client islands)
  • • Data that rarely changes (use ISR/caching)
  • • Simple CRUD apps (use full SSR)