前端开发

Astro 入门指南

介绍 Astro 的基本概念和使用方法,帮助你快速上手这个优秀的静态站点生成器。

什么是 Astro?

Astro 是一个现代化的静态站点生成器,专注于内容网站的性能。

核心概念

群岛架构

Astro 的核心理念是「群岛架构」:

  1. 默认发送零 JavaScript
  2. 仅在需要时水化互动组件
  3. 支持多种 UI 框架

组件语法

---
// 这里是组件脚本(服务端运行)
const title = 'Hello, Astro!';
---

<!-- 这里是组件模板 -->
<h1>{title}</h1>

<style>
  /* 组件样式,作用域化 */
</style>

<script>
  // 客户端脚本
</script>

为什么选择 Astro?

特性说明
零 JS 默认默认不发送 JavaScript
框架无关支持 React/Vue/Svelte
优秀的 DX开发体验非常好
性能优秀构建产物性能极佳

总结

Astro 是一个非常优秀的静态站点生成器,特别适合内容网站。