astro-framework

Build fast content-driven websites with Astro islands by using component-level hydration strategies and selective hydration. This approach ships zero JavaScript by default, activating interactivity only when needed through client directives for optimal performance.

Set up type-safe content collections in Astro using Zod-based schemas. Define your frontmatter structure with these schemas to validate content locally and receive automatic TypeScript inference, preventing data shape errors across your blog or documentation entries.

Use client directives for selective hydration in Astro when a component requires interactivity. Directives like client:visible or client:idle control exactly when JavaScript loads, ensuring interactive islands load efficiently without impacting the page's initial performance.

Astro supports multi-framework integrations alongside hybrid SSR and SSG rendering. You can integrate React, Vue, or Svelte components into your content-driven site, applying islands architecture to hydrate only the necessary interactive components.

Astro islands architecture is optimized for content-driven sites like blogs and marketing pages. It is not suited for highly interactive single-page applications where client-side routing and constant state management are required, as selective hydration limits global interactivity.