Vercel - 2. 安裝📥

更新 發佈閱讀 5 分鐘

npx astro add vercel

當你執行 npx astro add vercel 時,Astro 會假設你想利用 Vercel 的伺服器端功能(例如動態渲染、API 路由或內容保護),因此會自動進行以下配置:

  1. 安裝 `@astrojs/vercel` 適配器(Adapter)。
  2. astro.config.mjs 中將 output 設為 'server'
    如果配置檔沒有output則需要自行設定
  3. 在配置中加入 adapter: vercel()

⚙️ 為什麼會這樣設定?

在 Astro 中,output 主要有三種模式:

  • static (預設)
    編譯時生成純 HTML 檔案。
    適用於部落格、企業官網、不需要登入功能的網站。
  • server
    SSR (伺服器端渲染)。每個請求都會在伺服器即時運算。
    適用於個人化儀表板、需要即時資料的電商、API 接口。
  • hybrid
    混合模式。預設是靜態,但允許特定頁面開啟 SSR。
    適用於大部分頁面是靜態,只有少數頁面(如購物車或登入頁)需要動態的專案。

🤔 我該改回來嗎?

如果你發現配置被改成了 'server',請根據你的網站類型決定:

  • 如果你的網站只是靜態頁面: 你可以手動將 output 改回 'static'。這樣 Vercel 會將其視為純靜態網站(SSG),載入速度最快且成本最低。
  • 如果你需要 SSR 功能: 維持 'server' 即可,這是 Vercel 適配器的標準用法。
  • 最推薦的折衷方案'hybrid' 如果你希望大部分頁面跑得飛快(靜態),只有少部分頁面需要動態功能,請將 output 設為 'hybrid'

❔ 為什麼 hybrid 比較好?

  1. 快取效率極大化:在 hybrid 模式下,你的首頁、關於我們、文章清單等不需要即時變動的頁面,會被編譯成純 HTML。在 Vercel 上,這些檔案會被放在 CDN 邊緣節點,使用者打開網站的速度是毫秒級的。
  2. 節省 Vercel 額度:Vercel 的 Serverless Functions 是按執行時間和次數計費的。server 模式下每一秒的瀏覽都在耗費額度;hybrid 則只有進入特定動態頁面才會扣分。
  3. 開發彈性:你只需要在需要動態的檔案頂部加上一行程式碼即可切換:
// 在某個頁面 .astro 檔案頂部
export const prerender = false // 這頁會變成 SSR 動態渲染

🙋 既然 hybrid 兼具速度與功能,為什麼還會有 server 模式呢?

簡單來說,server 模式在處理 「以動態內容為主」 的專案時,開發效率和管理成本比 hybrid更好。

以下是 serverhybrid 更有優勢的幾個地方:

  1. 開發效率:不需要每一頁都寫 prerender = false
    hybrid 模式下,預設所有頁面都是靜態的。如果你正在開發一個大型應用程式(例如:後台管理系統、社交平台),裡面有 100 個頁面都需要檢查登入狀態或串接 API,你必須在 100 個檔案 的頂部手動加上:
    export const prerender = false

    而在 server 模式下,你不需要寫這行。這對於 「動態頁面遠多於靜態頁面」 的專案來說,能減少大量重複工作並避免漏寫。
  2. 避免「忘了關掉預渲染」的安全隱患
    這是最重要的一點。在 hybrid 模式下,如果你忘記在某個需要「權限檢查」的頁面加上 prerender = false,Astro 會在編譯時將該頁面存成靜態 HTML
    。 這可能導致敏感資料在打包時就被寫死在 HTML 裡。
    。 或者導致該頁面在 Vercel 上直接繞過你的伺服器驗證邏輯,因為它被當成普通靜態檔案處理了。
    server模式則相反:它是「預設安全」,所有頁面都先經過伺服器運算,你必須主動宣告 prerender = true 才會變靜態。
  3. 縮短「打包編譯」時間(Build Time)
    hybrid 模式:在部署時,Astro 會試圖模擬執行每一個頁面來生成 HTML。如果你的網站有上萬個靜態路由,這會讓 npm run build 跑非常久。
    server模式:因為它不預先生成 HTML,打包過程非常快,只需轉換程式碼即可。對於需要頻繁推送更新的大型專案,server 模式能讓你部署得更快。
  4. 完整的伺服器 API 支援有些進階功能(例如:獲取使用者的真實 IP Astro.clientAddress 或處理複雜的 Astro.cookies)在 server 模式下是「全域開啟」的。雖然 hybrid 也能用,但有時候會因為靜態/動態的切換邏輯導致開發時的預期行為不一致。
留言
avatar-img
李昀瑾的沙龍
0會員
26內容數
你可能也想看
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
在 vocus 與你一起探索內容、發掘靈感的路上,我們又將啟動新的冒險——vocus App 正式推出! 現在起,你可以在 iOS App Store 下載全新上架的 vocus App。 無論是在通勤路上、日常空檔,或一天結束後的放鬆時刻,都能自在沈浸在內容宇宙中。
Thumbnail
市場經驗拉長之後,很多投資人都會遇到同一個問題:不是方向看錯,而是部位太集中個股,常常跟大趨勢脫節。 早年的台股環境,中小股非常吃香,反而權值股不動,但QE量化寬鬆後,特別是疫情之後,後疫情時代,鈔票大量在股市走動,這些大資金只能往權值股走,因此早年小P的策略偏向中小型個股,但近年AI興起,高技術
Thumbnail
市場經驗拉長之後,很多投資人都會遇到同一個問題:不是方向看錯,而是部位太集中個股,常常跟大趨勢脫節。 早年的台股環境,中小股非常吃香,反而權值股不動,但QE量化寬鬆後,特別是疫情之後,後疫情時代,鈔票大量在股市走動,這些大資金只能往權值股走,因此早年小P的策略偏向中小型個股,但近年AI興起,高技術
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
介紹了 n8n-stack 專案,一個讓使用者能透過 Docker 或 Podman 輕鬆、安全且快速地自架 n8n。此方案整合了 Traefik 反向代理與 Cloudflare Zero Trust 安全防護,省去了複雜的網路設定,讓使用者能完全掌控自己的 n8n 環境,專注於建構自動化流程。
Thumbnail
介紹了 n8n-stack 專案,一個讓使用者能透過 Docker 或 Podman 輕鬆、安全且快速地自架 n8n。此方案整合了 Traefik 反向代理與 Cloudflare Zero Trust 安全防護,省去了複雜的網路設定,讓使用者能完全掌控自己的 n8n 環境,專注於建構自動化流程。
Thumbnail
在數位時代,網站速度是影響使用者體驗與 SEO 排名的關鍵因素之一。無論是電商平台、個人部落格,還是企業官網,快速載入的網頁不僅能留住訪客,還能提升搜尋引擎的青睞。而要了解網站的真實效能,測量「首字節時間」(Time To First Byte, TTFB)是一個重要的起點。今天,我們要介紹一款由
Thumbnail
在數位時代,網站速度是影響使用者體驗與 SEO 排名的關鍵因素之一。無論是電商平台、個人部落格,還是企業官網,快速載入的網頁不僅能留住訪客,還能提升搜尋引擎的青睞。而要了解網站的真實效能,測量「首字節時間」(Time To First Byte, TTFB)是一個重要的起點。今天,我們要介紹一款由
Thumbnail
2025年4月1日,維基媒體基金會揭露,AI產業已嚴重干擾其網站的正常運作。該基金會表示自2024年1月以來,由於OpenAI、Meta、Anthropic等企業派出網路爬蟲蒐集維基百科的文本與維基共享資源上1億4400萬個多媒體檔案,導致多媒體內容的下載流量增加了50%。
Thumbnail
2025年4月1日,維基媒體基金會揭露,AI產業已嚴重干擾其網站的正常運作。該基金會表示自2024年1月以來,由於OpenAI、Meta、Anthropic等企業派出網路爬蟲蒐集維基百科的文本與維基共享資源上1億4400萬個多媒體檔案,導致多媒體內容的下載流量增加了50%。
Thumbnail
數位簽章(Digital Signature) 數位簽章(Digital Signature)是密碼學中用來驗證資料真實性、完整性與簽署者身份的重要機制,就像「電子世界的手寫簽名 + 印章 + 防偽膠帶」。 數位簽章是用私鑰對資料雜湊值進行加密,接收方可用對應公鑰來驗證。 我們直接看維基百
Thumbnail
數位簽章(Digital Signature) 數位簽章(Digital Signature)是密碼學中用來驗證資料真實性、完整性與簽署者身份的重要機制,就像「電子世界的手寫簽名 + 印章 + 防偽膠帶」。 數位簽章是用私鑰對資料雜湊值進行加密,接收方可用對應公鑰來驗證。 我們直接看維基百
Thumbnail
這篇文章深入淺出地介紹 HTTP 快取(Cache)的概念、類型(私有和共用快取)、常見的 Cache-Control 設定,以及其在提升網站效能和使用者體驗方面的作用。文章包含圖表和流程圖,並提供額外的學習資源連結,方便讀者更深入瞭解 HTTP 快取機制。
Thumbnail
這篇文章深入淺出地介紹 HTTP 快取(Cache)的概念、類型(私有和共用快取)、常見的 Cache-Control 設定,以及其在提升網站效能和使用者體驗方面的作用。文章包含圖表和流程圖,並提供額外的學習資源連結,方便讀者更深入瞭解 HTTP 快取機制。
Thumbnail
現代 Web 開發中 API 認證機制至關重要,本文深入探討 Cookie-based 認證、JWT 認證和 OAuth 2.0 三種主流方法的特性、優缺點及應用場景,並提供選擇建議,助你提升系統安全性與可擴展性。
Thumbnail
現代 Web 開發中 API 認證機制至關重要,本文深入探討 Cookie-based 認證、JWT 認證和 OAuth 2.0 三種主流方法的特性、優缺點及應用場景,並提供選擇建議,助你提升系統安全性與可擴展性。
Thumbnail
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
本文章提供前端開發的完整知識地圖,涵蓋 JavaScript 基礎概念、進階概念、前端開發基礎、前端框架與工具、系統設計與架構,以及開發工具與實作等面向,並以 SEO 友善的方式撰寫,適合想學習前端開發或準備面試的讀者。
Thumbnail
在現代數位時代,自建網站已成為常態,但許多人對於成本感到困惑。本文將探討自建網站的基本成本和相關考量因素。
Thumbnail
在現代數位時代,自建網站已成為常態,但許多人對於成本感到困惑。本文將探討自建網站的基本成本和相關考量因素。
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News