Astro 5

Astro

Islands 架构,默认零 JavaScript——构建极速内容网站、博客、文档,集成 React/Vue/Svelte

零 JS 默认
Islands 架构
内容集合
多框架集成
10 核心章节
Astro 5 最新版本
100分 Lighthouse 满分

为什么选择 Astro?

Astro 于 2021 年发布,由 Fred K. Schott 领导的团队打造。它提出了一个颠覆性理念:对于大多数内容网站(博客、文档、营销页面),根本不需要在浏览器中运行 JavaScript 框架——HTML 和 CSS 就足够了。

Astro 的 Islands 架构(群岛架构)将页面视为"大海中的孤岛"——绝大部分是静态 HTML(大海),只有真正需要交互的部分(购物车、搜索框、轮播图)才加载 JavaScript(孤岛)。这让 Astro 网站在 Google Lighthouse 上常常轻松获得满分。

同时,Astro 允许你继续使用熟悉的 React、Vue 或 Svelte 组件,享受组件化开发的便利——只是它们默认在服务端渲染,不向客户端输出 JS。

核心特性

Astro 重新定义了内容驱动网站的开发范式

🏝️

Islands 架构

页面默认输出静态 HTML,只有标记了 client: 指令的组件才会激活为交互岛屿。

📚

内容集合

用 Zod 定义 Markdown/MDX 内容的类型模式,getCollection() 提供完整的类型安全查询。

🎬

View Transitions

内置 View Transitions API 封装,无需 JS 框架即可实现流畅的页面切换动画。

🔗

多框架集成

同一项目可同时使用 React、Vue、Svelte、Solid 组件,框架无关,渐进迁移。

SSG + SSR + 混合

静态生成、服务端渲染、边缘渲染,乃至混合模式,一个框架全部覆盖。

🔷

TypeScript 原生

开箱即用的 TypeScript 支持,.astro 文件的 frontmatter 天然就是 TS/JS。

课程目录

10 章系统掌握 Astro,从零搭建到生产部署

Chapter 01

Astro 简介:Islands 架构与零 JS 哲学

Astro 诞生背景、Islands 架构原理、与 Next.js/Nuxt 的对比、MPA vs SPA、client: 指令详解、安装与项目创建。

Islands零JSMPA
Chapter 02

项目结构与文件路由

src/pages/ 文件路由规则、layouts/components/content 目录职责、public/ 静态资源、astro.config.mjs 配置、404 页面。

文件路由目录结构配置
Chapter 03

.astro 组件语法详解

frontmatter 代码块、模板表达式、Fragment、set:html 指令、class:list、Scoped <style>、Props 类型定义。

frontmatter组件语法Props
Chapter 04

内容集合:Markdown/MDX 管理

src/content/ 目录、config.ts 定义 Zod schema、getCollection()/getEntry()、render() 方法、Content Layer API。

内容集合ZodMDX
Chapter 05

集成其他框架:React/Vue/Svelte

@astrojs/react/vue/svelte 集成安装、client: 指令全解、混合组件、Nano Stores 共享状态、性能对比分析。

ReactVueSvelte
Chapter 06

数据获取与 SSR 模式

frontmatter 数据获取、output: 'server' 启用 SSR、Astro.request/response、API 路由、环境变量、混合渲染。

SSRAPI路由数据获取
Chapter 07

静态生成与动态路由

getStaticPaths() 生成静态路由、[slug].astro 动态路由、REST 参数 [...slug]、paginate() 分页、构建输出分析。

SSG动态路由分页
Chapter 08

样式方案:Scoped CSS 与 Tailwind

Scoped <style> 原理、:global() 选择器、@astrojs/tailwind 集成、CSS Modules、PostCSS、暗色模式实现。

Scoped CSSTailwind暗色模式
Chapter 09

SEO 优化:元数据与 Sitemap

Layout 中管理 <head>、meta 标签最佳实践、@astrojs/sitemap、@astrojs/rss、JSON-LD 结构化数据、Open Graph。

SEOSitemapOpen Graph
Chapter 10

部署:Vercel/Netlify/Cloudflare Pages

适配器安装与配置、adapter-node 自托管、静态模式 output: 'static'、<Image> 优化、CI/CD 配置、性能监控。

VercelNetlify部署