很多开发者默认用 React + Vite 搭建一切，但面对个人作品集这类以内容为主的静态网站，React 的 hydration 机制显得过重。浏览器需要下载、解析并执行整个 JavaScript 包，用户才能交互，而作品集多数时候只是展示信息。
Astro.js 采用不同哲学：默认不加载 JavaScript，只对真正需要交互的组件注入脚本。通过岛屿架构和客户端指令（client:load、client:visible），开发者可以精确控制哪些部分需要 hydration，其余全输出静态 HTML，显著减小 JS 体积、提升加载速度和 Core Web Vitals，同时对 SEO 友好，搜索引擎可直接读取页面内容。
典型 React 应用从 hydration 开始，整个应用变成一个大型 JS 应用。对于仪表盘、管理面板，这一 trade-off 合理；但对作品集，多数访客只想浏览你的项目、博客和 GitHub，全量 hydration 显得浪费。
Astro 页面构建后输出纯 HTML，访问者无需等待 JS 即可看到内容。例如：npm run build 直接生成静态文件。
岛屿架构中，只有标记了 client:load 或 client:visible 的组件（如主题切换、轮播）才会下载并执行 JS，其余保持静态。这减少了带宽消耗和浏览器工作量。
由于默认输出 HTML，搜索引擎能立即抓取页面标题、描述、标题、内容链接，无需等待 JS 执行完毕，在博客和作品集场景下是明显优势。
适用场景：开发者作品集、个人博客、文档网站、公司落地页、营销页面、电商首页等以内容为核心的网站。
这不是说 React 不好——对于交互密集型应用（表单、图表、实时更新），React 仍是优秀选择。但选工具要匹配问题本身。对于作品集和博客，Astro 的静态先行加上按需加载 JS 的策略更合理。
#开发者 #工具 #Astro #React #Vite #前端 #性能优化 #SEO #岛屿架构
@DevToolboxHub