用途:这是一份 Astro 5.x 框架实践资料,用于指导构建快速、以内容为中心的网站,采用 Islands Architecture,默认不发送 JavaScript。
主要能力与核心概念:默认零 JavaScript,只有显式添加 client 指令的组件才会加载 JS。client 指令包括 client:load(页面加载即水合,适合关键交互)、client:idle(浏览器空闲时水合,适合非关键交互)、client:visible(滚动进入视口时水合,适合首屏以下内容)、client:media="(query)"(媒体查询匹配时水合,适合响应式组件)、client:only="framework"(跳过 SSR,仅客户端渲染,适合 SSR 会出错的组件)。选择逻辑:需立即交互用 load,非关键用 idle,首屏以下用 visible,仅某端显示用 media,SSR 会报错用 only。
支持在同一项目中混用 React、Vue、Svelte,可用 npx astro add react vue svelte 添加集成。
快速开始:npm create astro@latest my-project 创建项目,cd my-project 后可用 npx astro add tailwind react 添加集成,npm run dev 启动开发。常用命令:npm run dev(开发服务器,localhost:4321)、npm run build(生产构建)、npm run preview(预览构建)、npx astro check(TypeScript 检查)。
项目结构包含 src/components、layouts、pages(基于文件的路由)、content(内容集合)、styles 以及 Astro 5+ 的 content.config.ts。配置在 astro.config.mjs 中通过 defineConfig 设置 site、output、integrations。输出模式有 static(默认,博客、文档、营销页)与 server(全页 SSR,需要适配器);Astro 5 移除了 output: 'hybrid',其行为已成为 static 模式的默认。视图过渡可通过在 head 中引入 ClientRouter(来自 astro:transitions)实现类 SPA 导航;Astro 5 中 ViewTransitions 已更名为 ClientRouter。
适用场景:博客、文档、营销网站、内容型站点,以及需要局部交互的页面。核心模式还覆盖内容集合、图片优化、SSR、API 端点、中间件、分页、环境与配置、自定义集成等。
限制:部分细节(如具体性能指标、收费与价格、支持平台)资料暂未提供;使用 client:only 会跳过服务端渲染,server 模式需要适配器。