What is the Astro framework, and what are its core features and working principles? - 面试题

Astro is a modern static site generator with the core philosophy of "zero JavaScript by default." This means Astro outputs pure HTML by default and doesn't send any client-side JavaScript to the browser unless you explicitly request it.

Core Features:

Islands Architecture: This is Astro's core concept. Each component on a page is an "island" that is static HTML by default. Only when you explicitly use the client:* directive does a component become an interactive JavaScript island.
Multi-Framework Support: Astro allows you to mix and match React, Vue, Svelte, Preact, SolidJS, and other frontend frameworks in the same project. You can use React in one Astro component and Vue in another.
Performance Optimization: By defaulting to pure HTML output, Astro websites have extremely fast load times and excellent SEO performance.
Content-First: Astro is particularly well-suited for content-driven websites like blogs, documentation, marketing sites, etc.

How It Works:

astro
---
// Server-side code area (runs only at build time)
const data = await fetch('https://api.example.com/data');
const posts = await data.json();
---

<!-- Client-side code area (output to HTML) -->
<h1>My Blog</h1>
<ul>
  {posts.map(post => (
    <li>{post.title}</li>
  ))}
</ul>

Astro uses the --- separator to divide components into server-side code and client-side templates. Server-side code executes at build time and can perform async operations, fetch data, etc.; client-side templates are compiled into HTML.

Differences from Other Frameworks:

Unlike Next.js, Astro doesn't perform client-side hydration by default unless you explicitly request it
Unlike traditional static site generators (like Jekyll, Hugo), Astro supports modern frontend frameworks and component-based development
Astro's build output is pure HTML, not applications containing lots of JavaScript

This design makes Astro an ideal choice for building high-performance, content-driven websites.