Astro 简介

Astro 是一个现代化的 Web 框架,专为构建快速、以内容为中心的网站而设计。它的核心理念是”默认零 JavaScript”,只在必要时才发送 JavaScript 到客户端。

为什么选择 Astro?

1. 卓越的性能

Astro 采用部分水合技术,只对需要交互的组件发送 JavaScript。这意味着你的网站加载速度极快,对 SEO 友好。

---
// 这部分代码只在构建时运行,不会发送到客户端
const posts = await fetchPosts();
---

<div>
  {posts.map(post => (
    <article>
      <h2>{post.title}</h2>
      <p>{post.description}</p>
    </article>
  ))}
</div>

2. 框架无关

Astro 支持多种前端框架,你可以在同一个项目中混用:

• React
• Vue
• Svelte
• Solid
• Preact

3. 内置 Markdown 支持

对于博客来说,Markdown 支持至关重要。Astro 提供了开箱即用的 MDX 支持:

---
title: "My Post"
date: 2024-12-17
---

# Hello World

这是一篇用 Markdown 写的文章!

4. 优秀的开发体验

• TypeScript 支持
• 热模块替换(HMR)
• 组件作用域样式
• 内置图片优化

5. 易于部署

Astro 支持多种部署平台:

• Cloudflare Pages
• Vercel
• Netlify
• GitHub Pages
• 任何静态主机

实战技巧

集合管理内容

使用 Astro Content Collections 管理博客文章:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    category: z.string(),
    tags: z.array(z.string()).optional(),
  }),
});

组件组合

创建可复用的组件:

---
// components/BlogCard.astro
const { title, description, url } = Astro.props;
---

<article class="blog-card">
  <h3>{title}</h3>
  <p>{description}</p>
  <a href={url}>阅读更多 →</a>
</article>

<style>
  .blog-card {
    padding: 1rem;
    border-radius: 8px;
    background: white;
  }
</style>

性能对比

与其他静态站点生成器相比,Astro 网站通常:

• 加载速度快 40%+
• JavaScript 体积小 90%+
• 首次内容绘制(FCP)更快

生态系统

Astro 拥有丰富的集成生态:

• @astrojs/tailwind - Tailwind CSS 支持
• @astrojs/sitemap - 自动生成站点地图
• @astrojs/rss - RSS 订阅支持
• @astrojs/image - 图片优化

适用场景

Astro 特别适合:

• 📝 博客和文档站点
• 🛒 营销页面和落地页
• 📰 新闻和内容网站
• 🎨 作品集网站

不太适合:

• 复杂的单页应用(SPA)
• 需要大量客户端交互的应用

总结

Astro 在性能、开发体验和灵活性之间取得了完美平衡。如果你正在构建一个内容驱动的网站,Astro 绝对值得尝试!

你可以访问 astro.build 了解更多信息,或者查看我的 GitHub 看看实际项目。