2023 年靜態站點生成器 (SSG) 指南
近年來，構建網站的方式發生了很大變化，出現了很多新的構建網站的方式。靜態站點生成器 (SSG) 就是一種構建網站的現代 Web 開發技術，其正在變得越來越流行！
在本文中，我們將探討什么是靜態站點生成器以及為項目選擇靜態站點生成器時要考慮的因素，最后看看 2023 年值得考慮的靜態站點生成器！
什么是靜態站點生成器？
靜態站點生成器（Static Site Generators，簡稱 SSG）是一種軟件工具，它采用模板、組件和內容源，然后生成網站所需的 HTML、CSS 和 JavaScript 文件。
靜態站點生成器使網站加載速度更快，因為它會在用戶請求之前預先構建網站所需的必要文件。靜態站點生成器是用于構建高性能網站的一組工具。
SSG 有什么好處？
可以使用靜態站點生成器創建安全、可擴展且易于維護的網站。由于其靈活性和性能，它們變得越來越受歡迎。對于想要創建可同時提供大規模動態內容和性能的網站的開發人員來說，靜態站點生成器是一個不錯的選擇。
什么時候應該使用 SSG？
靜態站點生成器非常適合創建營銷、文檔和博客等網站。但不適用于想要顯示經常變化的實時、動態數據的情況。例如，股票交易或內容需要不斷更新的 SaaS 儀表板。在這樣的場景下，像 Next.js、Nuxt.js、Remix 這樣支持服務端渲染的框架更能滿足我們的需求。
選擇靜態站點生成器時要考慮的因素
目前，有超過 350 個靜態站點生成器[1]可以供我們選擇：
下面就來看看在選擇靜態站點生成器時要考慮哪些因素。
項目性質
我們要構建的項目類型將影響選擇的工具，因為使用最適合項目要求的技術非常重要。例如，雖然可以在技術上使用相同的靜態站點生成器來構建博客、文檔和營銷網站，但其他 SSG 可能更適合特定用例。Hugo 是博客和文檔的絕佳選擇，而 Gatsby、Nuxt.js 和 Next.js 是營銷網站的絕佳選擇。
便于使用
并非每個開發者或團隊都有時間和資源從頭開始學習新工具。很多情況下，不得不立即進入開發，幾乎沒有時間進行深入學習。在選擇靜態站點生成器時，以下是一些值得考慮的問題：
- SSG 是用熟悉的技術構建的，還是需要學習一種新的編程語言才能正確使用它？
- 文檔是否詳細？
- 是否提供初學者教程和其他學習材料來幫助學習過程？
- 是否可以使用模板和主題來加快構建過程？
技術棧
SSG 與團隊技術棧的兼容性至關重要。使用與我們的技術棧對應的 SSG 不僅會提高開發者的生產力和效率，還會縮短開發時間。
以下是一些 SSG 及其對應的語言：
- Eleventy 是原生 JavaScript 的絕佳選擇
- Next.js 和 Gatsby 非常適合 React 開發者
- Nuxt.js 非常適合 Vue.js 開發者
- SvelteKit 非常適合 Svelte 開發者
- Hugo 非常適合 Go 開發者
開發者社區
確定 SSG 是否是一個好的選擇的一個好方法就是去研究它的開發者社區。開發者往往會聚集在好的工具和軟件周圍，因此如果它經過充分審查，可能值得考慮。開發者社區對于獲得支持和幫助也很重要，遇到問題時，可以更快的得到解決。
成熟度和采用率
決定使用哪種 SSG 的一個好方法是查看業內其他人使用的工具以及這些工具的成熟程度。Next.js 被廣泛采用的一個原因是它是一個成熟的框架，具有很多強大的功能并且有 Vercel 的支持。這些因素促成了它在開發中被廣泛采用。
2023年值得考慮的靜態站點生成器
為了正確審查值得考慮的靜態站點生成器，我們將把它們分為以下兩類：
- 提供多種渲染方法（包括靜態站點生成）的框架：Gatsby、Next.js、Astro、Nuxt.js 和 SvelteKit。
- 僅提供靜態渲染功能的 SSG：Eleventy 和 Hugo。
具有多種渲染方法的框架
Next.js
Next.js 不僅是一個靜態站點生成器，而且是使用最廣泛的開源、基于 React 的框架之一，用于構建網站和 Web 應用。它支持服務端渲染 (SSR)、靜態站點生成 (SSG)、增量靜態渲染和客戶端渲染 (CSR)。
Next.js 的一大優點是它允許我們決定如何為每個頁面使用 SSR 或 SSG。這使其成為需要多種渲染方法的更復雜項目的不錯選擇。
Next.js 由 Vercel 創建，目前擁有 101k GitHub Star。Next.js 還具有結構良好且易于瀏覽的文檔，可提供無縫的學習體驗。
特性：
- 基于文件的路由系統
- 默認為 SSG，不同于默認為 SSR 的其他工具
- 通過其自定義圖像組件優化圖像
Gatsby
Gatsby 也是最流行和使用最廣泛的框架之一。它是一個基于 React.js 的開源框架，是創建網站和應用的絕佳選擇。除了延遲靜態生成 (DSG) 和服務端呈現 (SSR) 之外，它還提供了靜態站點生成。使用 Gatsby 的一個好處是它提供了大量的主題、入門模板和插件。
除了其框架功能之外，Gatsby 還提供一種名為 Gatsby Cloud 的產品，這是一種用于構建和托管 Gatsby 網站的云基礎設施。Gatsby Cloud 之于 Gatsby 就像 Vercel 之于 Next.js。
Gatsby 框架擁有一個活躍的開發者社區，并提供了豐富的文檔。
特性：
- 支持基于 GraphQL 的數據獲取
- 擁有龐大的插件生態系統，其中包含適用于不同用例的插件，包括樣式、圖像、分析和搜索
- 支持與多個 CMS 集成，包括 Prismic
- 提供多個主題和入門模板
- 可以通過 Gatsby 的云平臺訪問全球 CDN、云功能等
- 通過 gatsby-image 插件提供開箱即用的圖像處理、壓縮和優化
Astro
Astro 在技術上是一個開源框架，而不是靜態站點生成器。這意味著即使 Astro 支持靜態站點生成，它也提供 SSR 并具有其他功能。例如，它支持與 Tailwind CSS、React、Vue 和 Svelte 等技術集成，并允許我們在同一應用中混合混合它們。
Astro 的 Island 架構允許我們在靜態頁面上擁有交互式內容。Astro islands 為我們打開了將 SSG 與動態內容相結合的新方式的大門。一個示例就是將銷售活動所需的倒數計時器組件注入到博客頁面。
Astro 將 UI 提取到頁面上的較小組件中，并用輕量級 HTML 替換未使用的 JavaScript。這使得網站加載速度更快并縮短了可交互時間 (Time to Interactive，TTI)，因為發送到客戶端的 JavaScript 非常少。
盡管 Astro 是一個相對較新的解決方案，但其令人興奮的功能已經引起了開發者的廣泛關注。Astro 提供了多種集成和主題，開發者可以使用它們來豐富應用。
特性：
- 提供多個主題
- 提供多種集成
- 基于文件的路由
- 為 Markdown 和 MDX 提供原生支持
- 支持混合多個框架
- Island 架構允許將交互式內容注入到靜態頁面
Nuxt.js
Nuxt.js 是一個基于 Vue 的框架，并不是純粹的靜態站點生成器。但是，它可以用作構建 SPA 的 SSR 框架或用作 SSG。它有一個全靜態模式，可以用它來開發靜態站點。
Nuxt.js 的最新版本默認使用 Vite，使其速度更快、性能更高。Nuxt.js 在 Vue.js 開發者中非常流行。
特性：
- 基于文件的路由
- 全靜態模式
- 支持 Typescript
- 零配置啟動
- 自動導入組件
- 提供超過 160 個模塊
SvelteKit
SvelteKit 是由 Rich Harris 構建的基于 Svelte 的框架。它是 Sapper 的繼任者，后者是 Svelte 的第一個框架。由 Svelte 提供支持，SvelteKit 也沒有虛擬 DOM，因此速度非常快且性能很高。與上面的其他選項類似，可以從多種渲染方法中進行選擇，其中包括 SSG。
由于 Rich Harris 轉向了 Vercel，SvelteKit 最近獲得了更多關注。此舉意味著 Svelte 和 SvelteKit 現在得到了 Vercel 的支持。
特性：
- 沒有虛擬 DOM
- 零配置
- 靜態站點生成
- 基于文件的路由
- 代碼拆分
- 熱模塊重載
專用靜態站點生成器
Eleventy
Eleventy，簡稱 11ty，是一個用 JavaScript 編寫的開源靜態站點生成器。但是，它不依賴于特定的框架來生成或提供內容。對于熟悉并習慣使用 JavaScript 和 Node.js 的開發者來說，這是一個很好的選擇。
多年來，Eleventy 越來越受歡迎，尤其是當 web.dev、ESlint、MDN 和 Netlify 等網站都是用它構建的時候。
Eleventy 默認是零配置的，具有靈活的配置選項，并且適用于任何項目的結構。它支持多種模板語言，包括 Liquid、Handlebars、Markdown 和 JavaScript。
特性：
- 靈活的模板系統
- 支持 11 種模板語言
- 無需客戶端 JavaScript
- 快速構建時間
- JavaScript 友好
- 配置靈活
Hugo
Hugo 是一個用 Go 編寫的靜態站點生成器，針對快速構建時間進行了優化。
Hugo 提供了內容管理功能，使其成為擁有許多帖子的網站或博客的絕佳選擇。首先，它處理存儲在 /content 目錄中的 markdown 文件中的所有內容，使得從單個文件夾發布和管理大量內容變得容易。其次，Hugo 內置了對分頁的支持，生成目錄，并支持將內容分組到類別和標簽中，稱為分類法。最后，Hugo 提供字數統計和閱讀分鐘數功能。Hugo 還將 markdown 用于元數據、布局模板和 i18n 配置。
特性：
- 跨平臺支持 Windows、macOS、Linux 等
- 集成的谷歌分析支持
- 使用 markdown 來創建內容
- 內置分頁支持
- 支持生成目錄
- 提供分頁功能
- 支持國際化（i18n），開發者可以快速搭建多語言網站
- 一個很棒的主題系統，它提供了 300 多個主題
- 除了 HTML 輸出，Hugo 還支持 AMP 和 JSON 等其他格式
小結
靜態站點生成器可以快速輕松地生成靜態站點。它已經改變或正在改變我們構建網站的方式。除了在本文中提到的靜態站點生成器之外，還有很多優秀的靜態站點生成器值得探索。
參考：https://prismic.io/blog/static-site-generators-2023??
相關鏈接
[1]
靜態站點生成器列表: https://jamstack.org/generators/
