Astro Server Islands: Keep Pages Fast Without Giving Up Interactivity

Most content sites do not need a full SPA. They need fast HTML first, then a small amount of JavaScript for carousels, comments, or filters. That is exactly what Astro Server Islands are for.

Astro ships static HTML by default. Interactive pieces become islands that hydrate only when you ask for it. The rest of the page stays light, which helps LCP, FCP, and Core Web Vitals.

How Server Islands work

Think of the page as mostly static zones plus a few interactive components:

• Static content is rendered on the server and delivered as HTML- Each island is an isolated interactive component- JavaScript loads only for those islands- Hydration timing is controlled with client directivesUseful directives:


• 
  client:load - hydrate after the page loads (chat, share, like)- client:idle - hydrate when the browser is idle- client:visible - hydrate when the component enters the viewport (carousels, below-the-fold widgets)- client:only - render only on the clientRule of thumb: use client:load for above-the-fold UI that must work immediately. Use client:visible for everything else.
  ## Pair Astro with a headless CMS
  Astro is great at delivery. A headless CMS is great at content ops. With BCMS you get templates (content types), entries (posts), media, and typed content your frontend can fetch without stuffing Markdown into the repo for every edit.
  That split matters: editors update content in a dashboard. Developers keep framework freedom. The site still ships mostly static HTML.
  ## Practical setup
  Start from a BCMS Astro starter:
  npx @thebcms/cli create astro starter simple-blog
  After login and project naming:
  cd your-project && npm install && npm run dev
  In BCMS:


• Templates define the shape of a blog post- Entries are the actual posts- Restart the Astro app after content model changes so types and data refresh## Add an island: image carousel
  A common pattern:


• Install a Vue carousel (Astro starters often already include Vue)- Add a media field on the Blog template in BCMS- Build a Vue component that accepts a media collection prop- Render it in the blog page with client:load or client:visibleConditionally fall back to a cover image when the carousel field is empty. That keeps the page useful even when editors skip optional media.
  ## Production mindset
  Use npm run build, then serve the dist output. Visitors get HTML without waiting on a database round trip for every page view. You keep interactivity where it earns its keep.
  ## Related reading


• 
  - .