Islands 架构,默认零 JavaScript——构建极速内容网站、博客、文档,集成 React/Vue/Svelte
Astro 于 2021 年发布,由 Fred K. Schott 领导的团队打造。它提出了一个颠覆性理念:对于大多数内容网站(博客、文档、营销页面),根本不需要在浏览器中运行 JavaScript 框架——HTML 和 CSS 就足够了。
Astro 的 Islands 架构(群岛架构)将页面视为"大海中的孤岛"——绝大部分是静态 HTML(大海),只有真正需要交互的部分(购物车、搜索框、轮播图)才加载 JavaScript(孤岛)。这让 Astro 网站在 Google Lighthouse 上常常轻松获得满分。
同时,Astro 允许你继续使用熟悉的 React、Vue 或 Svelte 组件,享受组件化开发的便利——只是它们默认在服务端渲染,不向客户端输出 JS。
Astro 重新定义了内容驱动网站的开发范式
页面默认输出静态 HTML,只有标记了 client: 指令的组件才会激活为交互岛屿。
用 Zod 定义 Markdown/MDX 内容的类型模式,getCollection() 提供完整的类型安全查询。
内置 View Transitions API 封装,无需 JS 框架即可实现流畅的页面切换动画。
同一项目可同时使用 React、Vue、Svelte、Solid 组件,框架无关,渐进迁移。
静态生成、服务端渲染、边缘渲染,乃至混合模式,一个框架全部覆盖。
开箱即用的 TypeScript 支持,.astro 文件的 frontmatter 天然就是 TS/JS。
10 章系统掌握 Astro,从零搭建到生产部署
Astro 诞生背景、Islands 架构原理、与 Next.js/Nuxt 的对比、MPA vs SPA、client: 指令详解、安装与项目创建。
src/pages/ 文件路由规则、layouts/components/content 目录职责、public/ 静态资源、astro.config.mjs 配置、404 页面。
frontmatter 代码块、模板表达式、Fragment、set:html 指令、class:list、Scoped <style>、Props 类型定义。
src/content/ 目录、config.ts 定义 Zod schema、getCollection()/getEntry()、render() 方法、Content Layer API。
@astrojs/react/vue/svelte 集成安装、client: 指令全解、混合组件、Nano Stores 共享状态、性能对比分析。
frontmatter 数据获取、output: 'server' 启用 SSR、Astro.request/response、API 路由、环境变量、混合渲染。
getStaticPaths() 生成静态路由、[slug].astro 动态路由、REST 参数 [...slug]、paginate() 分页、构建输出分析。
Scoped <style> 原理、:global() 选择器、@astrojs/tailwind 集成、CSS Modules、PostCSS、暗色模式实现。
Layout 中管理 <head>、meta 标签最佳实践、@astrojs/sitemap、@astrojs/rss、JSON-LD 结构化数据、Open Graph。
适配器安装与配置、adapter-node 自托管、静态模式 output: 'static'、<Image> 优化、CI/CD 配置、性能监控。