Astro Island Architecture

A guide to building blazing-fast websites using Astro's island architecture and partial hydration model.

Usage

Ask about Astro islands, client directives, multi-framework integration, or static site optimization.

Examples

• "Add an interactive React component to an Astro page"
• "When should I use client:load vs client:visible?"
• "Set up content collections for a blog"

Guidelines

• Default to zero client-side JavaScript
• Use client:visible for below-the-fold interactive components
• Use client:load only for immediately needed interactivity
• Leverage content collections for type-safe markdown content
• Mix frameworks only when each adds unique value