從 SPA 到群島架構：我為何選擇 Astro 5 + Vue 3 打造高性能活動引擎

 從 SPA 到群島架構：我為何選擇 Astro 5 + Vue 3 打造高性能活動引擎

前言：技術選型的「避坑」哲學

身為工程師，我們常被教導要追求新技術。但在商業開發中，**「穩定」與「效能」**永遠優先於「酷炫」。面對一個需要精準行銷、SEO 權重與極速加載的活動官網，我並沒有選擇目前主流的 Next.js 或純 Vue SPA，而是採用了 Astro 5 + Vue 3 的混合架構。

您可以透過以下 GitHub 連結檢閱本專案的原始碼：https://github.com/BpsEason/astro-event-pro.git

---

一、 SPA 的陷阱：你真的需要那麼多 JavaScript 嗎？

傳統的 Vue/React 專案採用客戶端渲染（CSR），這意味著使用者必須下載並執行數百 KB 的 JS 才能看到內容。對於活動頁來說，這會導致：

1. FCP (首次內容渲染) 過慢：使用者看著白屏超過 2 秒，轉化率直接減半。

2. SEO 劣勢：搜尋引擎爬蟲雖然進步，但對純 JS 渲染的內容仍不夠友善。

我的對策： 使用 Astro 的 零 JS 預設 (Zero-JS by Default)。90% 的靜態 HTML 在伺服器端就決定好了，瀏覽器拿到的就是乾淨、飛快的代碼。

---

二、 核心架構：Islands Architecture (群島架構)

這是本專案的靈魂。想像一下，網頁是一片大海（靜態 HTML），而互動組件是漂浮在海上的島嶼（Vue Islands）。

1. 局部水合 (Partial Hydration)

在專案中，我只針對「倒數計時」和「報名表單」進行水合。

程式碼片段

<HeroSection /> 

<RegistrationForm client:visible />

這種精確到組件等級的加載策略，讓我的 TBT (Total Blocking Time) 壓低至 0ms。

2. 為什麼是 Astro 5 而非 6？

身為架構師，我選擇留在 Astro 5.x 穩定版。理由很務實：

• 生態系相容性：Astro 6 雖好，但許多官方 Integration 仍處於初期適配階段。在需要快速交付的專案中，穩定性 (Reliability) 高於一切。

• Tailwind 3 的長尾價值：在 v4 徹底改變編譯邏輯的陣痛期，v3 提供最可預測的樣式輸出。

---

三、 技術細節：資深工程師的肌肉展現

1. 防禦性編程 (Defensive Programming)

在 Vue 組件中，我實作了嚴格的生命週期管理。例如倒數計時器在卸載時，必須確保 clearInterval 被執行，防止在 Astro 的 SPA 導覽模式下產生內存洩漏。

2. 樣式管道優化

透過 Tailwind CSS 3.4，我將關鍵路徑 CSS (Critical CSS) 最小化。在渲染 HTML 的同時，樣式表已經同步到達，完全消除了佈局偏移 (CLS)。

---

四、 商業價值的轉化

技術最終是為業務服務的。這套架構為業主帶來了直接的益處：

• 廣告成本降低：Lighthouse 100 分代表更高的 Google Ads 品質得分，降低單次點擊成本。

• 轉換率提升：秒開的網頁，能大幅降低使用者的跳出率 (Bounce Rate)。

---

結語：架構師的自我修養

技術選型不應該是「選我喜歡的」，而是「選最適合的」。

Astro 5 + Vue 3 的組合，是我在「開發體驗」與「執行效能」之間找到的黃金平衡點。如果你也在開發以內容驅動、追求 SEO 的專案，或許「群島架構」才是你該考慮的終極方案。

---

Astro 5 + Vue 3 開發注意事項

在使用 Astro 5 搭配 Vue 3 進行前端開發時，有一些環境與架構上的細節需要特別留意。以下整理成部落格文章，方便開發者快速掌握重點。

---

🖥️ 環境設定

• Node.js 版本：建議使用 LTS 18+，確保 SSR 與套件相容。

• Astro 設定：在 astro.config.mjs 中設定 output: 'server'，並加上 @astrojs/node adapter。

• Vue 插件：安裝 @astrojs/vue，版本需與 Astro 5 相容。

• Tailwind CSS：建立 postcss.config.cjs 與 tailwind.config.cjs，確保樣式能正確編譯。

• Axios 管理：集中管理 API 呼叫，支援 SSR 與瀏覽器端。

---

🔑 驗證與安全

• JWT 儲存方式：建議使用 httpOnly + Secure cookie，避免 localStorage 在 SSR 無法存取。

• Axios 攔截器：自動附加 Authorization header，攔截 401/403 錯誤。

• authService：登入、登出、refresh 全部改成 cookie 管理。

• XSS 防護：避免在前端直接操作 token，盡量使用 httpOnly cookie。

---

📈 SEO 與 SSR

• 商品列表 SSR：API 呼叫放在 Astro frontmatter（伺服器端），避免只靠 Vue onMounted。

• 初始 HTML：確認商品資料在 HTML 原始碼中，利於搜尋引擎收錄。

• Meta 與 Sitemap：設定 <meta>、OpenGraph、sitemap.xml，提升 SEO。

---

⚠️ 開發注意事項

• 狀態管理：Astro 沒有整合 Pinia/Vuex，需要自行引入。

• 路由限制：Astro 路由基於檔案系統，若需會員中心或複雜路由，要整合 Vue Router。

• 模組生態：Nuxt 有現成模組（auth、i18n、image），Astro 要自己組裝。

• 部署環境：SSR 模式需要 Node.js runtime，不能像純靜態模式直接丟 CDN。

---

✅ 驗證計畫

• 自動化測試：npm run build，確認 SSR build 成功。

• 瀏覽器測試：登入後檢查 cookie 是否正確設定。

• 手動檢查：

  • 確認 Authorization header 存在。

  • 401/403 是否正確導向登入。

  • 檢查 HTML 原始碼是否有商品列表。

---

結語

Astro 5 + Vue 3 是一個輕量且彈性的組合，適合快速開發兼具 SEO 與互動性的前端專案。只要在環境設定、安全驗證與 SSR 渲染上多加注意，就能打造穩定且高效的系統。