Astro简介 #

┌─────────────────────────────────────────────────────┐
│                    Astro 核心理念                    │
├─────────────────────────────────────────────────────┤
│  1. 少即是多 - 默认零 JS，按需加载                    │
│  2. 内容为王 - 专为内容网站优化                       │
│  3. 灵活组合 - 支持多种 UI 框架混用                   │
│  4. 开发优先 - 简洁语法，快速开发                     │
└─────────────────────────────────────────────────────┘

传统 SPA（单页应用）：
┌────────────────────────────────────────┐
│                                        │
│    整个页面需要水合（Hydration）         │
│    ████████████████████████████████    │
│    大量 JS 需要加载和执行               │
│                                        │
└────────────────────────────────────────┘

Islands 架构：
┌────────────────────────────────────────┐
│                                        │
│    静态 HTML（无需 JS）                 │
│    ┌──────┐        ┌──────┐           │
│    │ 交互 │        │ 交互 │           │
│    │ 岛屿 │        │ 岛屿 │           │
│    └──────┘        └──────┘           │
│    只在需要的地方加载 JS                │
│                                        │
└────────────────────────────────────────┘

---
// 这个组件不会发送任何 JS 到客户端
const title = "Hello Astro";
---

<h1>{title}</h1>
<p>这是纯静态 HTML，零 JS</p>

---
import InteractiveCounter from './Counter.jsx';
---

<!-- 只在可见时加载 -->
<InteractiveCounter client:visible />

<!-- 立即加载 -->
<InteractiveCounter client:load />

<!-- 仅在客户端渲染 -->
<InteractiveCounter client:only="react" />

---
import ReactComponent from './ReactComponent.jsx';
import VueComponent from './VueComponent.vue';
import SvelteComponent from './SvelteComponent.svelte';
---

<ReactComponent client:visible />
<VueComponent client:visible />
<SvelteComponent client:visible />

src/pages/
├── index.astro        → /
├── about.astro        → /about
├── blog/
│   ├── index.astro    → /blog
│   └── [slug].astro   → /blog/:slug
└── 404.astro          → /404

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

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = {
  blog: blogCollection,
};

┌─────────────────────────────────────────────────────┐
│                  Astro 最佳应用场景                  │
├─────────────────────────────────────────────────────┤
│                                                     │
│  📝 博客网站      - 内容驱动，SEO 优先               │
│                                                     │
│  📚 文档站点      - 内置内容集合支持                 │
│                                                     │
│  🎨 作品集网站    - 快速加载，展示效果佳             │
│                                                     │
│  🏢 企业官网      - 静态页面，性能优秀               │
│                                                     │
│  🛒 营销落地页    - 极速加载，转化率高               │
│                                                     │
└─────────────────────────────────────────────────────┘

学习 Astro 的收益：

┌─────────────────────────────────────────┐
│  技术能力                               │
│  ├── 掌握现代前端架构思想               │
│  ├── 理解 Islands 架构                  │
│  └── 学习性能优化实践                   │
├─────────────────────────────────────────┤
│  开发效率                               │
│  ├── 快速搭建内容网站                   │
│  ├── 简化开发流程                       │
│  └── 提升项目性能                       │
├─────────────────────────────────────────┤
│  职业发展                               │
│  ├── 拓展技术栈                         │
│  ├── 提升竞争力                         │
│  └── 适应市场需求                       │
└─────────────────────────────────────────┘