前言
根据 State of JS 2022，有一款在 2021 年推出的新框架腾空而出，获得了众开发者极高的关注与兴趣，依靠最少的负评与极高的评价吸引了所有人的注意……没错，它就是本篇铁人赛的主题 —— Astro.js。与其无脑的直接跳进无止尽的技术热潮之中，本系列文章会从头分析问题并让读者知道什么场合下应该留意这项技术。
学习 Astro 将会成为前端开发的一股新气象，事实上也被前端社群评价为：「最喜爱的」、「最期待的」新技术之一，凭借着它极为平缓的学习曲线、活耀的社群、踩到痛点的定位和极高的扩充性，它可以轻易上手成为前端的主力生产力工具之一。
来看看社群是如何评价 Astro 的：
- Astro just Launched… Could it be the ultimate web framework? - Fireship
- Astro makes websites faster & easier to build - Kevin Powell
- I Tried Astro Build and I LOVE IT - 5 Reasons You Will TOO! - James Q Quick
- Why I Switched To Astro But You Probably Shouldn’t - Web Dev Simplified
- Astro’s New Features Have Me Rethinking Everything - Theo - t3․ gg
Astro 是什么？
一款以静态内容为主的多合一框架，透过实践选择性 Hydration 渲染模式让 JavaScript 只在必要时被运输执行，轻易打造极为良好 SEO 与效能的网站。另外也可以从社群主题、插件来扩充其功能，或是选择整合你喜爱的 UI Component 语言（React、Preact、Svelte、Vue、Solid、Lit）来撰写 Astro。还有像是……
- MDX 与 Markdown 支援
- 资料夹基准路由（File-based Router）
- 图片自动最佳化
- CMS 整合
- 部属整合
- View Transitions API
- ……等更多功能
皆有被官方正式支援维护，帮你省下许多时间。
Astro 不是什么？
由于 Astro 设计架构上就适合用于打造静态内容为主的网站像是：行销、文件、部落格、作品集以及某些类型的线上商城，如果希望制作更接近于网页应用而非静态内容为主轴的网站，建议应当尝试其他采取不同渲染策略为主的框架（像是 Next、Nuxt）而不是 Astro。关于 Astro 在渲染网站的方式上的突出之处，将会在下一章节更详细的说明。
我需要那些前置知识？
Astro.js 是一款「选择性加入复杂度的框架」，门槛极低，只需具备基本的 HTML、CSS、JavaScript 基础即可，但如果有以下经验会更好：
- JSX
- Markdown、MDX
- 其他静态生产器、模板语言、SSR 框架
- Vite
我是谁？
我是前六角学院前端助教 Rice，可以来逛逛我的技术部落格与作品集（都是基于 Astro 制作的网站！），在从正式版还没推出之前就使用着它来创建网页，到目前算是小有心得，加上也有许多人询问过，于是就写下该系列文章来分享一下。在这之前使用过许多不同的框架，像是 Next、Nuxt、Gatsby、Jekyll、HUGO，它们都是很棒的框架，但一直没有戳中我对于创建静态页面的需求，使用下来或多或少都感觉别扭与遗憾，实验下来 Astro.js 完美的解决了我想建构静态网页的痛点，因此有极大的动力想要推广这款好用的框架！
延伸阅读
- Astro - 官方網站
- Astro DOCS - 官方文件網站
- Astro - 官方 VSCode 插件
- Houston AI - 課程線上 AI 助教
- Introducing Astro: Ship Less JavaScript - Astro Blog - 官方介紹 Astro 文章
- Day1 - 起飛前置準備 - 相同文章同步發布於 iThome 鐵人賽中