70
Vue 3 學習之旅
靜態站點生成

Day 70: 靜態站點生成 (SSG) 概念

·6 分鐘閱讀·靜態站點生成

摘要

靜態站點生成 (Static Site Generation, SSG) 是一種在「建置階段」就將整個 Vue 應用程式的每個頁面,預先渲染成獨立的靜態 HTML 檔案的技術。

定義與說明

SSG 的流程是:在建置時,遍歷應用的所有路由,為每個路由都生成一個對應的 .html 檔案。最終的產物是一堆純靜態檔案,無需伺服器即可運行,可以直接部署在任何靜態託管服務上(如 GitHub Pages, Netlify)。它的優點是極致的效能、安全性和低成本。

實作範例

SSG 通常也由上層框架提供支持,例如 VitePress (專為文件設計) 或 Nuxt 的 SSG 模式。

Terminal
# Nuxt 中的 SSG 指令 (概念性)
nuxt generate

執行後,dist/ 目錄下會生成所有頁面的 HTML 檔案。

結論

SSG 是文件、部落格、作品集、行銷頁面等內容不頻繁變動的網站的最佳選擇。它提供了無與倫比的載入速度和最簡化的部署維護流程。

SSG 靜態站點生成 靜態部署