SuperAPI AI 工具集

astro

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:Astro 适合构建快速站点,支持静态生成(SSG)、服务端渲染(SSR)及按页面混合渲染,并通过“群岛”架构实现局部水合,默认输出最少 JavaScript。适用于博客、文档、营销等内容型网站;不适合完整 SPA、需持续状态的客户端重应用,或依赖 WebSocket 的实时仪表盘。

主要能力:使用 .astro 组件默认渲染静态内容,仅为交互组件添加客户端指令(client:load、client:visible、client:idle)进行局部水合;客户端群岛示例使用 React(@astrojs/react),Vue、Svelte、Solid 只需替换组件,指令语法一致;支持 TypeScript;SSG 动态路由使用 getStaticPaths,SSR 页面用 export const prerender = false;可配合中间件、内容集合、Actions、客户端导航与环境变量。

使用方式:先检查 astro.config.mjs 判断项目类型。仅 SSG(无适配器)时用 output: 'static';SSR 用 output: 'server' 并安装适配器(node、vercel、netlify 等);混合模式用 output: 'hybrid',页面默认 SSG,个别页面设 prerender: false 转为 SSR。静态内容优先用 .astro 组件而非 React,避免不必要的水合;交互组件才加客户端指令。SSG 动态路由用 getStaticPaths 返回 params 与 props;SSR 页面可访问 Astro.locals。环境变量中 PUBLIC_ 前缀供客户端使用,无前缀供服务端。

限制与注意:SSG-only 项目使用 prerender: false、Astro.locals 或 POST 会导致构建失败;SSR 与混合模式必须先安装适配器;SSR 中 prerender: false 的路由不需要 getStaticPaths;客户端指令在 SSG 与 SSR 中均可用;从 SSG 迁移到 SSR 需安装适配器、设置 output 为 hybrid,并按页面添加 prerender: false。复杂服务端逻辑才考虑 Clean Architecture/SOLID。

资料还提到可参考 commands 与官方文档 https://docs.astro.build/ 及 https://docs.astro.build/en/guides/client-side-scripts/。