Vercel [ˈvɜr.səl]
Vercel 是一個 雲端平台（Cloud Platform），底層由 分散在全球的伺服器與 CDN 節點組成。
專門用來 部署前端網站和全端應用程式，特別是與 JavaScript/TypeScript、生態系統框架（如 Next.js、React、Vue、Svelte）搭配得很好。簡單說，它讓你可以把本地開發的專案快速上線，而且大部分流程是自動化的。🚀 Vercel 主要特色：
1️⃣ 靜態與動態部署
- 靜態網站（HTML、CSS、JS）：Vercel 會自動生成並托管。
- Serverless Function（無伺服器函數）：可以處理後端 API、表單提交等，不需要自己架伺服器。
- SSG / SSR 支援：
- SSG（Static Site Generation）：像 Next.js 的
getStaticProps，在 build 時生成靜態頁面。 - SSR（Server Side Rendering）：像 Next.js 的
getServerSideProps，每次請求時動態渲染頁面。
- SSG（Static Site Generation）：像 Next.js 的
2️⃣ 與 Git 整合
- 可以連接 GitHub、GitLab、Bitbucket。
- Push 代碼後，Vercel 自動 build 和 部署。
- 每次 PR（Pull Request）都有 預覽 URL，方便團隊檢查。
3️⃣ CDN 與效能
- 所有網站會被自動 分發到全球 CDN。
- 訪問者會從最近的節點拿到內容，加快載入速度。
4️⃣ 免費與付費方案
- 免費版：
適合個人專案或小型專案。
有 Serverless function 限制、專案數限制。 - 付費版：
提供更多 併發、頻寬、Team 功能。
更好的監控與自訂域名設定。
5️⃣ 適合使用場景
- 個人作品集、部落格。
- 前端專案部署（React、Next.js、Astro…）。
- 小型 API 或後端服務（使用 Serverless Function）。
- 靜態網站生成（SSG）專案。
⚙️ Vercel 架構：
1️⃣ 代碼來源
- 你的專案放在 GitHub / GitLab / Bitbucket。
- Vercel 會連接你的倉庫。
2️⃣ Build 流程
- 你 push 代碼到 Git。
- Vercel 自動檢測框架（Next.js、React、Vue…）。
- 進行 Build：
- 靜態頁面 → SSG（Static Site Generation）
- 動態頁面 → SSR（Server Side Rendering）或 Serverless Function
4. Build 完成後生成 部署檔案。
3️⃣ 部署
- 靜態內容（HTML / CSS / JS）會被放到 CDN。
- 動態功能（API / SSR）會包成 Serverless Functions。
- 每次部署會產生一個 唯一的 URL（Preview 或 Production）。
4️⃣ 全球分發
- CDN 自動將靜態檔案分發到 全球節點。
- 訪問者會從最近的節點拿到內容 → 網站載入更快。
5️⃣ 運作特性
- 自動化：Push 代碼即部署，無需手動上傳。
- Serverless：API 與後端功能自動運行，不需自己架伺服器。
- 多環境：Preview URL（PR 測試）、Production URL（正式上線）。
- 擴展性：可接自訂域名、SSL、環境變數等。
📌 簡單理解：
Git (代碼) → Vercel Build → 生成靜態頁面 + Serverless API → CDN 全球分發 → 訪問者快速存取
你本地端開發 → Git push → Vercel 雲端 build
靜態頁面 → CDN 全球分發
動態功能 → Serverless 在雲端運行
使用者 → 從最近節點快速存取
