Nevermind

Exploring Astro: Built for Content-Driven Websites

3 min

1. Do We Really Need That Much JavaScript?

Modern frontend frameworks such as React, Vue, and Svelte have greatly improved the developer experience of building complex web applications. But when we use them to build blogs, portfolios, documentation, or marketing websites, a question follows: do these websites, whose main purpose is presenting content, really need to load the entire page as a single-page application (SPA)?

The answer is usually “no.” For these websites, the user’s primary need is to access content quickly. Too much JavaScript instead slows down Time to Interactive (TTI), harming both user experience and SEO.

Astro was created precisely to solve this problem.

2. Astro’s Core Idea: Content First, Zero JS by Default

Astro is a modern static site generator (SSG) whose core idea is content first. It aims to do as much work as possible at build time and send as little JavaScript as possible to the browser.

To achieve this, Astro introduced two major innovations:

  • Zero-JS by Default: Astro renders all your UI components—whether written in React, Vue, or Svelte—into plain HTML at build time. The browser therefore receives a static page and does not need to load any framework’s JS runtime, making it extremely fast to load.
  • Islands Architecture: This is the essence of Astro. In an “ocean” of static HTML, any component that needs client-side interaction can be marked as an “island.” Astro independently bundles and loads the JavaScript required by those islands, while the rest of the page remains completely static.

3. How Do “Islands” Work?

In Astro, you can mark a component as an interactive island by adding a client:* directive.

For example, suppose we have a counter component written in React called Counter.jsx. We can use it in an Astro page like this:

---
// src/pages/index.astro
import Counter from '../components/Counter.jsx';
---
<html>
  <body>
    <h1>Astro 示例</h1>
    <p>这是一个静态的段落，它不会加载任何 JS。</p>

    {/* 这个组件是一个交互式岛屿 */}
    <Counter client:load />

    <p>这是另一个静态段落。</p>
  </body>
</html>

The client:load directive tells Astro:

  1. Render the initial HTML for the Counter component on the server.
  2. Create a separate JS bundle for the Counter component.
  3. Automatically load this JS bundle when the page loads and “activate” (hydrate) the component so that it becomes interactive.

Astro also provides more precise loading directives, such as client:idle (load when the browser is idle) and client:visible (load when the component enters the viewport), taking performance optimization even further.

4. Framework Agnosticism

Another major attraction of Astro is its openness to UI frameworks. In the same Astro project, you can use components from different frameworks such as React, Vue, Svelte, SolidJS, and Lit at the same time. This gives teams tremendous flexibility in collaboration and technology choices.

Conclusion

Astro is not intended to replace React or Vue; it offers a better solution for specific scenarios. If your project is a content-centered website with extremely high requirements for performance and SEO—this blog itself is built with Astro, for example—then Astro is undoubtedly an excellent choice worth exploring in depth. It perfectly combines the performance advantages of static sites with the developer experience of modern frameworks.

Astro Jamstack Performance SSG