Astro + Sass + 手刻 JS：零 runtime 潔癖型前端選型的取捨

## Threads 來源重點

• 作者把 React、Next.js、Vue、Nuxt、Angular、SvelteKit 等歸類為會帶 runtime 的技術棧。
• 作者偏好 Astro、Sass、手刻 JS，原因是輸出產物乾淨，心理上接受度高。
• 作者補充：現代框架的本質是一場交易——用最終產物純淨度換開發效率。

## 官方文件校正 | 技術 | 可驗證事實 | 解讀 | |---|---|---| | Astro | Astro 官方的 Islands architecture 強調只對需要互動的元件進行 client-side hydration；沒有使用 client directive 的元件可保留為靜態輸出。 | 適合把互動壓到最小，而不是整站 SPA 化。 | | Astro client:* | Astro 的 client directives 是明確的 hydration 入口。 | 「零 JS」成立的前提是不要對元件加 client:*。 | | Sass | Sass 官方說 Sass 會把 Sass/SCSS 編譯成一般 CSS 檔案供網站使用。 | Sass 本身不是前端 runtime；成本在 build time。 | | Tailwind CSS | Tailwind 的產物主要是 CSS utility class；但開發/建置鏈與 class 策略會影響維護性。 | 「純 CSS」和「是否適合團隊」是兩回事。 | ## 選型框架

1. 內容優先：文章、文件、行銷頁、產品介紹頁，可優先 Astro + Sass / CSS。
2. 互動有限：用 Astro island 把互動封在局部，不要整頁 hydrate。
3. 狀態複雜：若有大量 client state、即時協作、複雜表單與 dashboard，React/Vue/Svelte 的 runtime 多半值得。
4. 團隊維護：手刻 JS 不是免費午餐；若多人協作，測試、模組化與可讀性要補上。