Day1 - Astro Series: Preflight Check List

Astro 系列文第一日：起飛前置準備

#系列文

前言

根據 State of JS 2022🔗，有一款在 2021 年推出的新框架騰空而出，獲得了眾開發者極高的關注與興趣，依靠最少的負評與極高的評價吸引了所有人的注意……沒錯，它就是本篇鐵人賽的主題 —— Astro.js。與其無腦的直接跳進無止盡的技術熱潮之中，本系列文章會從頭分析問題並讓讀者知道什麼場合下應該留意這項技術。

學習 Astro 將會成為前端開發的一股新氣象，事實上也被前端社群評價為：「最喜愛的」、「最期待的」新技術之一，憑藉著它極為平緩的學習曲線、活耀的社群、踩到痛點的定位和極高的擴充性，它可以輕易上手成為前端的主力生產力工具之一。

來看看社群是如何評價 Astro 的：

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 不是什麼？

我需要那些前置知識？

我是誰？

延伸閱讀