🌟 Core Identity

• Astro: Web framework optimized for content-driven sites (blogs, docs, e-commerce, portfolios).
• Pioneered Islands Architecture → reduces JavaScript overhead compared to SPAs.

⚙️ Key Features

• Islands Architecture: Selective hydration of interactive components; rest of page is static HTML rendered on server. Uses MPA, unlike SPAs that hydrate everything client-side.
• UI-agnostic: Supports React, Vue
• Content collections: Type-safe Markdown management with validation.
• Integrations: MDX, Partytown, hundreds of APIs/hooks for customization.

🇮🇲 Island Architecture

• a frontend design pattern where most of the page is delivered as static HTML, while small, isolated sections (“islands”) are hydrated with JavaScript for interactivity.
• Astro popularized this approach by making it a first-class feature, allowing developers to mix multiple frameworks in one project.
• Traditional SPAs hydrate the entire page → heavy JS bundles, slower initial load. Islands hydrate only what’s necessary, hence better TTFB and LCP
• Best Fit: Sites with mostly static content and selective interactivity (blogs, docs, e-commerce).

🏝️ Client Islands

• Hydrated on the client side. Examples: carousels, dropdown menus, search bars.
• Astro directives:
  • client:load → hydrate immediately.
  • client:idle → hydrate when browser is idle.
  • client:visible → hydrate only when scrolled into view.
• Benefit: Fine-grained control over when JS runs.