近年來，構(gòu)建網(wǎng)站的方式發(fā)生了很大變化，出現(xiàn)了很多新的構(gòu)建網(wǎng)站的方式。靜態(tài)站點生成器 (SSG) 就是一種構(gòu)建網(wǎng)站的現(xiàn)代 Web 開發(fā)技術(shù)，其正在變得越來越流行！

在本文中，我們將探討什么是靜態(tài)站點生成器以及為項目選擇靜態(tài)站點生成器時要考慮的因素，最后看看 2023 年值得考慮的靜態(tài)站點生成器！

什么是靜態(tài)站點生成器？

靜態(tài)站點生成器（Static Site Generators，簡稱 SSG）是一種軟件工具，它采用模板、組件和內(nèi)容源，然后生成網(wǎng)站所需的 HTML、CSS 和 JavaScript 文件。

靜態(tài)站點生成器使網(wǎng)站加載速度更快，因為它會在用戶請求之前預先構(gòu)建網(wǎng)站所需的必要文件。靜態(tài)站點生成器是用于構(gòu)建高性能網(wǎng)站的一組工具。

SSG 有什么好處？

可以使用靜態(tài)站點生成器創(chuàng)建安全、可擴展且易于維護的網(wǎng)站。由于其靈活性和性能，它們變得越來越受歡迎。對于想要創(chuàng)建可同時提供大規(guī)模動態(tài)內(nèi)容和性能的網(wǎng)站的開發(fā)人員來說，靜態(tài)站點生成器是一個不錯的選擇。

什么時候應該使用 SSG？

靜態(tài)站點生成器非常適合創(chuàng)建營銷、文檔和博客等網(wǎng)站。但不適用于想要顯示經(jīng)常變化的實時、動態(tài)數(shù)據(jù)的情況。例如，股票交易或內(nèi)容需要不斷更新的 SaaS 儀表板。在這樣的場景下，像 Next.js、Nuxt.js、Remix 這樣支持服務端渲染的框架更能滿足我們的需求。

選擇靜態(tài)站點生成器時要考慮的因素

目前，有超過 350 個靜態(tài)站點生成器[1]可以供我們選擇：

下面就來看看在選擇靜態(tài)站點生成器時要考慮哪些因素。

項目性質(zhì)

我們要構(gòu)建的項目類型將影響選擇的工具，因為使用最適合項目要求的技術(shù)非常重要。例如，雖然可以在技術(shù)上使用相同的靜態(tài)站點生成器來構(gòu)建博客、文檔和營銷網(wǎng)站，但其他 SSG 可能更適合特定用例。Hugo 是博客和文檔的絕佳選擇，而 Gatsby、Nuxt.js 和 Next.js 是營銷網(wǎng)站的絕佳選擇。

便于使用

并非每個開發(fā)者或團隊都有時間和資源從頭開始學習新工具。很多情況下，不得不立即進入開發(fā)，幾乎沒有時間進行深入學習。在選擇靜態(tài)站點生成器時，以下是一些值得考慮的問題：

• SSG 是用熟悉的技術(shù)構(gòu)建的，還是需要學習一種新的編程語言才能正確使用它？
• 文檔是否詳細？
• 是否提供初學者教程和其他學習材料來幫助學習過程？
• 是否可以使用模板和主題來加快構(gòu)建過程？

技術(shù)棧

SSG 與團隊技術(shù)棧的兼容性至關(guān)重要。使用與我們的技術(shù)棧對應的 SSG 不僅會提高開發(fā)者的生產(chǎn)力和效率，還會縮短開發(fā)時間。

以下是一些 SSG 及其對應的語言：

• Eleventy 是原生 JavaScript 的絕佳選擇
• Next.js 和 Gatsby 非常適合 React 開發(fā)者
• Nuxt.js 非常適合 Vue.js 開發(fā)者
• SvelteKit 非常適合 Svelte 開發(fā)者
• Hugo 非常適合 Go 開發(fā)者

開發(fā)者社區(qū)

確定 SSG 是否是一個好的選擇的一個好方法就是去研究它的開發(fā)者社區(qū)。開發(fā)者往往會聚集在好的工具和軟件周圍，因此如果它經(jīng)過充分審查，可能值得考慮。開發(fā)者社區(qū)對于獲得支持和幫助也很重要，遇到問題時，可以更快的得到解決。

成熟度和采用率

決定使用哪種 SSG 的一個好方法是查看業(yè)內(nèi)其他人使用的工具以及這些工具的成熟程度。Next.js 被廣泛采用的一個原因是它是一個成熟的框架，具有很多強大的功能并且有 Vercel 的支持。這些因素促成了它在開發(fā)中被廣泛采用。

2023年值得考慮的靜態(tài)站點生成器

為了正確審查值得考慮的靜態(tài)站點生成器，我們將把它們分為以下兩類：

• 提供多種渲染方法（包括靜態(tài)站點生成）的框架：Gatsby、Next.js、Astro、Nuxt.js 和 SvelteKit。
• 僅提供靜態(tài)渲染功能的 SSG：Eleventy 和 Hugo。

具有多種渲染方法的框架

Next.js

Next.js 不僅是一個靜態(tài)站點生成器，而且是使用最廣泛的開源、基于 React 的框架之一，用于構(gòu)建網(wǎng)站和 Web 應用。它支持服務端渲染 (SSR)、靜態(tài)站點生成 (SSG)、增量靜態(tài)渲染和客戶端渲染 (CSR)。

Next.js 的一大優(yōu)點是它允許我們決定如何為每個頁面使用 SSR 或 SSG。這使其成為需要多種渲染方法的更復雜項目的不錯選擇。

Next.js 由 Vercel 創(chuàng)建，目前擁有 101k GitHub Star。Next.js 還具有結(jié)構(gòu)良好且易于瀏覽的文檔，可提供無縫的學習體驗。

特性：

• 基于文件的路由系統(tǒng)
• 默認為 SSG，不同于默認為 SSR 的其他工具
• 通過其自定義圖像組件優(yōu)化圖像

Gatsby

Gatsby 也是最流行和使用最廣泛的框架之一。它是一個基于 React.js 的開源框架，是創(chuàng)建網(wǎng)站和應用的絕佳選擇。除了延遲靜態(tài)生成 (DSG) 和服務端呈現(xiàn) (SSR) 之外，它還提供了靜態(tài)站點生成。使用 Gatsby 的一個好處是它提供了大量的主題、入門模板和插件。

除了其框架功能之外，Gatsby 還提供一種名為 Gatsby Cloud 的產(chǎn)品，這是一種用于構(gòu)建和托管 Gatsby 網(wǎng)站的云基礎(chǔ)設施。Gatsby Cloud 之于 Gatsby 就像 Vercel 之于 Next.js。

Gatsby 框架擁有一個活躍的開發(fā)者社區(qū)，并提供了豐富的文檔。

特性：

• 支持基于 GraphQL 的數(shù)據(jù)獲取
• 擁有龐大的插件生態(tài)系統(tǒng)，其中包含適用于不同用例的插件，包括樣式、圖像、分析和搜索
• 支持與多個 CMS 集成，包括 Prismic
• 提供多個主題和入門模板
• 可以通過 Gatsby 的云平臺訪問全球 CDN、云功能等
• 通過 gatsby-image 插件提供開箱即用的圖像處理、壓縮和優(yōu)化

Astro

Astro 在技術(shù)上是一個開源框架，而不是靜態(tài)站點生成器。這意味著即使 Astro 支持靜態(tài)站點生成，它也提供 SSR 并具有其他功能。例如，它支持與 Tailwind CSS、React、Vue 和 Svelte 等技術(shù)集成，并允許我們在同一應用中混合混合它們。

Astro 的 Island 架構(gòu)允許我們在靜態(tài)頁面上擁有交互式內(nèi)容。Astro islands 為我們打開了將 SSG 與動態(tài)內(nèi)容相結(jié)合的新方式的大門。一個示例就是將銷售活動所需的倒數(shù)計時器組件注入到博客頁面。

Astro 將 UI 提取到頁面上的較小組件中，并用輕量級 HTML 替換未使用的 JavaScript。這使得網(wǎng)站加載速度更快并縮短了可交互時間 (Time to Interactive，TTI)，因為發(fā)送到客戶端的 JavaScript 非常少。

盡管 Astro 是一個相對較新的解決方案，但其令人興奮的功能已經(jīng)引起了開發(fā)者的廣泛關(guān)注。Astro 提供了多種集成和主題，開發(fā)者可以使用它們來豐富應用。

特性：

• 提供多個主題
• 提供多種集成
• 基于文件的路由
• 為 Markdown 和 MDX 提供原生支持
• 支持混合多個框架
• Island 架構(gòu)允許將交互式內(nèi)容注入到靜態(tài)頁面

Nuxt.js

Nuxt.js 是一個基于 Vue 的框架，并不是純粹的靜態(tài)站點生成器。但是，它可以用作構(gòu)建 SPA 的 SSR 框架或用作 SSG。它有一個全靜態(tài)模式，可以用它來開發(fā)靜態(tài)站點。

Nuxt.js 的最新版本默認使用 Vite，使其速度更快、性能更高。Nuxt.js 在 Vue.js 開發(fā)者中非常流行。

特性：

• 基于文件的路由
• 全靜態(tài)模式
• 支持 Typescript
• 零配置啟動
• 自動導入組件
• 提供超過 160 個模塊

SvelteKit

SvelteKit 是由 Rich Harris 構(gòu)建的基于 Svelte 的框架。它是 Sapper 的繼任者，后者是 Svelte 的第一個框架。由 Svelte 提供支持，SvelteKit 也沒有虛擬 DOM，因此速度非?？烨倚阅芎芨?。與上面的其他選項類似，可以從多種渲染方法中進行選擇，其中包括 SSG。

由于 Rich Harris 轉(zhuǎn)向了 Vercel，SvelteKit 最近獲得了更多關(guān)注。此舉意味著 Svelte 和 SvelteKit 現(xiàn)在得到了 Vercel 的支持。

特性：

• 沒有虛擬 DOM
• 零配置
• 靜態(tài)站點生成
• 基于文件的路由
• 代碼拆分
• 熱模塊重載

專用靜態(tài)站點生成器

Eleventy

Eleventy，簡稱 11ty，是一個用 JavaScript 編寫的開源靜態(tài)站點生成器。但是，它不依賴于特定的框架來生成或提供內(nèi)容。對于熟悉并習慣使用 JavaScript 和 Node.js 的開發(fā)者來說，這是一個很好的選擇。

多年來，Eleventy 越來越受歡迎，尤其是當 web.dev、ESlint、MDN 和 Netlify 等網(wǎng)站都是用它構(gòu)建的時候。

Eleventy 默認是零配置的，具有靈活的配置選項，并且適用于任何項目的結(jié)構(gòu)。它支持多種模板語言，包括 Liquid、Handlebars、Markdown 和 JavaScript。

特性：

• 靈活的模板系統(tǒng)
• 支持 11 種模板語言
• 無需客戶端 JavaScript
• 快速構(gòu)建時間
• JavaScript 友好
• 配置靈活

Hugo

Hugo 是一個用 Go 編寫的靜態(tài)站點生成器，針對快速構(gòu)建時間進行了優(yōu)化。

Hugo 提供了內(nèi)容管理功能，使其成為擁有許多帖子的網(wǎng)站或博客的絕佳選擇。首先，它處理存儲在 /content 目錄中的 markdown 文件中的所有內(nèi)容，使得從單個文件夾發(fā)布和管理大量內(nèi)容變得容易。其次，Hugo 內(nèi)置了對分頁的支持，生成目錄，并支持將內(nèi)容分組到類別和標簽中，稱為分類法。最后，Hugo 提供字數(shù)統(tǒng)計和閱讀分鐘數(shù)功能。Hugo 還將 markdown 用于元數(shù)據(jù)、布局模板和 i18n 配置。

特性：

• 跨平臺支持 Windows、macOS、Linux 等
• 集成的谷歌分析支持
• 使用 markdown 來創(chuàng)建內(nèi)容
• 內(nèi)置分頁支持
• 支持生成目錄
• 提供分頁功能
• 支持國際化（i18n），開發(fā)者可以快速搭建多語言網(wǎng)站
• 一個很棒的主題系統(tǒng)，它提供了 300 多個主題
• 除了 HTML 輸出，Hugo 還支持 AMP 和 JSON 等其他格式

小結(jié)

靜態(tài)站點生成器可以快速輕松地生成靜態(tài)站點。它已經(jīng)改變或正在改變我們構(gòu)建網(wǎng)站的方式。除了在本文中提到的靜態(tài)站點生成器之外，還有很多優(yōu)秀的靜態(tài)站點生成器值得探索。

參考：https://prismic.io/blog/static-site-generators-2023??

相關(guān)鏈接

[1]

靜態(tài)站點生成器列表: https://jamstack.org/generators/