3. Server Islands (SSG + SSR)

The page is static, but one component uses server:defer to render dynamically on every request. Best of both worlds.

šŸ”· Pre-Rendered (SSG)

Rendering: Build Time

Build Time: 2026-05-12T13:44:46.206Z

Random Number: 421

This value is frozen at build time. Refresh to see it doesn't change.

ā³ Loading server islandā€¦

Streaming in from the server

src/pages/rendering-demo-islands.astro 
---
// Page itself is static (SSG)
import BaseLayout from '../layouts/BaseLayout.astro';
import PreRendered from '../components/PreRendered.astro';
import ServerRendered from '../components/ServerRendered.astro';
---

<BaseLayout title="Server Islands Demo">
  <PreRendered />                  // built once
  <ServerRendered server:defer />  // per-request island
</BaseLayout>

What to notice

  1. The blue (SSG) card is frozen - same values on every refresh
  2. The green (server island) card changes on every refresh - it ran on the server just now
  3. The static HTML is served instantly from the CDN; only the island hits the server
  4. You may briefly see the fallback before the island streams in

When to use in WordPress

  • Static blog post + live comment count from the WP REST API
  • Static product page + live stock / price from WooCommerce
  • Static layout + personalized greeting ("Hi, {user.name}")
  • Cached page + live "related posts" pulled per visitor
  • Keeps the page CDN-cacheable while still showing fresh WP data where it matters