Astro 5.0 與 Cloudflare Pages 的完美結合：打造極速邊緣運算應用

在現代 Web 開發的浪潮中，我們不斷在「開發體驗」與「執行效能」之間尋求平衡。DueWise 作為一款重視響應速度與離線能力的 PWA (Progressive Web App)，選擇了 Astro 5.0 搭配 Cloudflare Pages 作為核心架構。這篇文章將深入探討這個組合為何是當前開發邊緣運算應用程式的最佳實踐。

為什麼選擇 Astro 5.0？

Astro 一直以來都以「Zero JS by default」聞名，但在 5.0 版本中，它引入了更強大的功能，特別是對於需要動態內容的應用程式。

1. 內容驅動的架構 (Content-Driven)

DueWise 需要處理大量的靜態說明頁面（如法律條款、首頁指南）以及動態的應用邏輯。Astro 的內容集合 (Content Collections) 讓我們能以 Markdown 輕鬆管理複雜的文件，同時保持類型安全 (Type Safety)。

2. 多合一框架：Server Islands

在 DueWise 的首頁中，大部分內容是靜態的（為了 SEO），但用戶的登入狀態與個人偏好卻是動態的。Astro 5.0 的 Server Islands 允許我們將這些動態部分隔離開來。靜態部分可以快速從 CDN 快取中取出，而動態組件則在邊緣端渲染，兩者互不干擾，完美解決了 LCP (Largest Contentful Paint) 的延遲問題。

Cloudflare Pages：真正的邊緣運算容器

由於 Astro 支援多種適配器 (Adapters)，我們選擇了 @astrojs/cloudflare。這讓 DueWise 不再運行於傳統的伺服器上，而是分佈在全球 300 多個資料中心。

具體的適配器配置範例

在 astro.config.mjs 中，我們的配置如下：

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server', // 開啟 SSR 模式
  adapter: cloudflare({
    imageService: 'passthrough', // 使用 Cloudflare 本身的圖片處理服務
    platformProxy: {
      enabled: true, // 允許在開發環境模擬 Cloudflare 環境變數
    },
  }),
});

這種配置允許我們使用 Cloudflare 的關鍵字特性，例如 D1 關聯式資料庫、KV 儲存 以及 Environment Variables，而不需要繁瑣的伺服器運維。

技術細節：Edge Runtime 的限制與突破

在邊緣端開發與傳統 Node.js 環境最大的不同在於 Runtime。Cloudflare 使用的是基於 V8 的 Workerd 環境，而非完整的 Node.js。

1. Polyfill 的處理

在 DueWise 整合 Auth.js 或處理加密邏輯時，我們經常遇到缺少核心 Node 模組的問題。我們透過 Vite 的 resolve.alias 巧妙地處理了這些依賴：

vite: {
  resolve: {
    alias: {
      'crypto': 'node:crypto',
      'stream': 'node:stream',
      // 其他 polyfills...
    }
  }
}

2. 冷啟動 (Cold Start) 的消失

相較於 AWS Lambda，Cloudflare Workers (Pages) 的實例幾乎沒有冷啟動延遲。這對於 DueWise 的同步 API 至關重要，用戶點擊「同步」後，API 必須在毫秒級別內回應。

個人見解：未來的開發模式

我認為，未來的應用開發將會是「前端即伺服器」。當前端框架（如 Astro）具備了強大的邊緣端處理能力時，傳統的中間層 (BFF) 將逐漸消失。

在 DueWise 的實踐中，我們發現將邏輯下放到邊緣端，不僅減少了網絡延遲（Latency），更重要的是簡化了數據流。原本需要經過「客戶端 -> 負載平衡 -> 伺服器 -> 資料庫」的路徑，現在縮短為「邊緣節點 -> 同區域資料庫」，這對於全球用戶的體感速度提升是巨大的。

結論

Astro 5.0 為我們提供了卓越的內容管理與混合渲染能力，而 Cloudflare Pages 提供了一個便宜、穩定且極速的運行平台。如果你正在考慮開發下一個具備高效能需求的 PWA 應用，這個組合絕對值得你投入時間深入研究。

下一篇文章，我們將探討「PWA 的進階優化：如何利用 Service Worker 實現秒開體驗」。