基礎網站開發不再需要後端？探究 Jamstack 的現代化開發模式

轉載說明：原創不易，未經授權，謝絕任何形式的轉載

近幾年，Jamstack 架構的流行度快速增長并不斷發展，不再是僅僅作為時髦詞彙而被使用。相反，它已經成長并成熟為一個真正強大的生态系統和社群，是解決實際問題和應用的一種有效方法。例如，它可以用于建立高度穩定和高性能的部落格和着陸頁面。

是以，在本文中，我們将深入探讨 Jamstack 是什麼，了解這種方法在 2023 年的現狀，并探索如何開始使用它。

本文目錄

1. Jamstack 是什麼？
2. Jamstack 的核心原則
3. 使用 Jamstack 的好處
4. 在 2023 年應該使用 Jamstack 嗎？
5. 開始使用 Jamstack

Jamstack 是什麼？

Jamstack 最初是由 Netlify 的首席執行官 Mathias Biilmann 在2015年創造的術語。最初它被設計成“JAMstack”，暗示了它所使用的技術堆棧：JavaScript，API 和 Markup。雖然術語的大小寫已經發生了變化，但 Jamstack 最初被設想為一種建構網站的新方式，其中包括将後端系統與前端系統分離。例如，常見的設定是使用像 React 這樣的前端庫建構站點，并将其與一個 headless CMS 配對，使您可以從 API 中擷取内容；在這種設定中，存儲和提供内容所需的所有後端都由 CMS 單獨管理。

但是，如今，Jamstack 涉及的遠不止一系列技術；它是一種完整的 Web 開發架構和項目思維方式。它允許您通過用戶端 JavaScript 和 API 的強大功能來建立功能豐富、完全動态的網站，同時利用靜态生成的資産和部署到 CDN 的功能。

延伸閱讀：什麼是Netlify？

Netlify 是一個 Web 開發和持續內建/持續部署平台，旨在使建構和部署高性能、現代 Web 應用程式變得更加容易。它提供了一個完整的工作流程，包括從 Git 倉庫自動建構、部署和托管靜态網站、前端應用程式和後端服務的工具。使用 Netlify，開發者可以輕松地将其代碼部署到全球 CDN 并進行快速、可靠的網站或應用程式傳遞。除了它的主要功能之外，Netlify 還提供了一些其他的特性，例如網站分析、A/B 測試、表單處理等等。

延伸閱讀：什麼是 headless CMS？

Headless CMS 是一種内容管理系統（CMS）架構，其中内容和其呈現形式是分離的。它是與傳統 CMS 相對的概念，傳統 CMS 通常包括一個內建的前端模闆系統來管理内容呈現。相反，Headless CMS 隻關注内容本身，并提供 API 接口來讓開發者自由地建立自己的呈現層，例如前端 Web 應用程式、移動應用程式等等。這種架構使開發者可以更自由地設計和實作他們的使用者界面，并更好地滿足特定的業務需求。另外，Headless CMS 還具有可擴充性、可定制化和多通道釋出等優點，是以受到越來越多開發者的青睐。

Jamstack 的核心原則

作為一種超越技術棧的架構，Jamstack 的核心原則包括兩個方面：預渲染和解耦。在本節中，讓我們更深入地了解它們，看看它們到底意味着什麼以及它們為 Jamstack 生态系統提供了什麼好處。預渲染是指在建構過程中提前生成頁面，并将其作為靜态檔案存儲在 CDN 中。這樣可以提高頁面加載速度和 SEO（搜尋引擎優化）性能。解耦是指将前端和後端系統分離，使它們可以獨立開發和部署，進而提高開發的靈活性和擴充性。這些原則使得 Jamstack 可以在建構高性能、可擴充和易于維護的現代 Web 應用程式方面發揮出色的作用。

預渲染

Jamstack網站的第一個核心原則是将前端事先生成為高度優化的靜态HTML和CSS，而不是在任何使用者請求到達伺服器之前動态生成。這個預生成過程是在建構過程中完成的，通常被稱為“建構時間”。這個預生成的輸出檔案會分布在全球CDN網絡中，讓使用者無論在哪個地方都能快速、響應式地加載網頁。當使用者請求網頁時，CDN隻需要提供靜态檔案即可。

由于Jamstack網站生成為靜态HTML和CSS檔案，是以請求的響應時間更快，而且主機要求大大降低。

主機要求降低，是因為一旦生成了檔案，伺服器就不需要進行進一步的渲染。這意味着部署預生成的靜态網站非常快速和簡便。這進一步得到了主機提供商（如Vercel和Netlify）和JavaScript架構（如Next.js和Gatsby）之間的緊密內建的支援，這些架構使建構Jamstack網站更容易。

解耦

解耦是 Jamstack 架構的第二個核心原則。這意味着将傳統的單體應用程式分離出來，使後端服務與前端代碼分離，它們通過 API 進行互動。例如，您可以使用 Stripe 的 API 內建付款提供者，并使用 headless CMS 輕松更新網站的營銷内容。雖然一開始可能會感到頭疼，因為需要管理項目的不同方面，但實際上它确實帶來了一些重要的好處。

首先，它允許任何項目的單獨部分獨立地更換。以上面的例子為例，您可以将 Stripe 的 API 替換為 Paddle 的，而不需要更改有關内容管理的任何内容。這很重要，因為它意味着您可以使用更新或更适合的技術快速輕松地發展您的項目。在當今 Web 開發的快速演進速度下，這是一個很大的好處。

其次，将内容、代碼和系統在項目中進行清晰分離，也使其更容易管理。與傳統應用程式架構不同，在管理應用程式的不同部分的團隊中，不需要共享一個代碼存儲庫以進行更新和更改，這樣可以更快地進行更新，減少潛在的沖突和問題。

使用 Jamstack 的好處

使用 Jamstack 生态系統有很多理由，但以下是一些從 Jamstack 驅動的項目中可以獲得的最大好處：

安全性

由于前端和後端系統的解耦和隻提供預生成的檔案和資源，惡意攻擊者可利用的攻擊向量會減少。這意味着您的網站更安全，不太可能被攻擊者成功攻破。解耦和與外部産品和服務的API內建的另一個好處是，您可以将這些內建的安全性外包給維護它們的團隊和公司。這意味着在日常操作中，您需要關注和保護的内容更少。

可擴充性

如前所述，Jamstack 網站使用預生成技術，完美地适用于使用内容分發網絡 (CDN) 而無需額外的複雜邏輯或工作流程。這意味着靜态預生成站點可以快速、輕松且自動地分布到全球，使您的網站輕松擴充并處理所需的負載。

這一切都歸功于 CDN 的工作原理和結構。通過使用 CDN，您可以在全球範圍内部署多個伺服器來處理來自每個伺服器最近的使用者的請求。這意味着您可以處理比傳統應用程式中隻有一個中央伺服器處理所有使用者對您網站的請求要多得多的流量。

性能

與前面提到的類似，由于 Jamstack 網站是預生成的，所有頁面在使用者請求時都已經生成好并準備好發送給使用者；在使用者收到響應前不需要在伺服器上組裝任何内容。這意味着當使用者請求你網站上的某個頁面時，距離他們最近的 CDN 可以快速響應最新生成的頁面。這一點很重要，因為頁面加載時間越長，使用者就越有可能按下傳回按鈕，進而導緻你失去一個潛在的客戶。

維護性

Jamstack架構使得托管變得更簡單，由于JavaScript架構與像Vercel和Netlify這樣的托管平台密切內建，是以維護任務的時間和複雜性也大大降低。當Jamstack建構完成且預生成的檔案部署後，您的網站或應用程式不需要您運作任何伺服器或對其進行維護。所有這些意味着您不再需要一個專門的團隊來維護伺服器和基礎設施以防萬一發生意外。

開發者體驗

Jamstack生态系統以其廣泛的強大工具而聞名，這些工具可用于生成和建構網站。這些工具和技術不依賴于專有技術，而是通常使用具有自己充滿激情的開發者社群的開源技術。作為這種熱情的附帶産物，許多這些工具的文檔和入門流程都很流暢，是開發人員的良好體驗。

可移植性

最後，由于Jamstack網站是預生成的，是以可以從大量服務和産品中進行托管。基本上，如果它能托管靜态網站，那麼它可能能夠托管Jamstack網站。這意味着由于需要特定功能而被限制在有限的提供商中的日子已經過去了，您可以自由地在托管服務之間移動産品，而不需要進行複雜的遷移。

2023年是否應該使用Jamstack？

Jamstack架構已經成為技術世界中的一種事物，即使你能夠使用它，并不意味着你一定應該使用它。雖然在技術上，絕大多數網站類型都可以使用Jamstack建構，但某些類型的網站比其他類型更适合使用該架構。在其最純粹的意義上，Jamstack主要用于靜态類型的網站，例如營銷或資訊網站和部落格等。

然而，一個重要的趨勢是利用像Next.js這樣的JavaScript架構的強大功能，同時僅對網站的部分部分進行預渲染，其中動态或新鮮資料不是很重要，進而保留了Jamstack可組合架構的優點（其中JavaScript與API相結合，可以獲得上述許多好處）。

預渲染變革

雖然 Jamstack 強調預渲染，但并非總是可行或令人滿意的。這是因為如果您想在建構時預渲染頁面，需要在建構時提供資料，這并非總是可能的。另外，當頁面需要使用非常新鮮的資料（比如電商網站上的庫存水準）時，預渲染可能會導緻通路者看到陳舊或不準确的資訊。

在2023年，有一些解決方案可以解決這個問題，例如 Next.js 的增量靜态再生成或 Gatsby 的延遲靜态生成，但值得注意的是，有時預渲染并不是最佳解決方案，并且這些解決方案也有自己需要考慮的問題。而且在2023年，總體趨勢是（尤其是在更複雜的網站上）轉向使用伺服器端渲染（SSR），即在每個新的使用者請求時實時渲染網頁，而不是預渲染。

這種從預渲染轉向 SSR 的趨勢有很好的理由，因為 SSR 仍然提供了大部分預生成的好處，但您也可以使用最新可用的資料來渲染頁面。當然，SSR 也有缺點，是以考慮如何有效利用渲染方法是很重要的。

您應該為現有項目使用 Jamstack 嗎？

對于現有的網站項目，你應該采用Jamstack嗎？你是否應該立刻放棄一切，遷移到Jamstack？老實說，很難給出一個清晰的答案，因為就像技術領域的許多事情一樣，這取決于具體情況。這取決于Jamstack為您、您的業務和最重要的是您的項目帶來的價值是否足以使遷移的成本值得。例如，如果您的整個團隊已經習慣了其他架構，比如WordPress，或者預渲染不适用于您的項目，那麼轉換到Jamstack所需的成本和時間投資可能不值得您獲得的好處。但是，即使預渲染不适用于您的項目，您對Jamstack的了解也可能會讓您意識到組合API和JavaScript架構的好處。

開始使用 Jamstack

當你想要在項目中使用 Jamstack 生态系統時，首先需要根據我們在本指南中提到的要點判斷 Jamstack 是否适合你和你的項目。或者，如果你隻是想嘗試 Jamstack，可以跳過這一步，直接開始一個項目。

在确定 Jamstack 生态系統适合你之後，下一步是選擇一個可以進行預渲染的架構，如 Next.js、Gatsby 或 Nuxt。選擇一個架構後，就可以開始建構新的 Jamstack 網站（如果不是新項目，可以遷移現有的網站）。然後，需要确定哪些類型的 API 可以在你的網站中使用。你有一個電子商務網站嗎？可以嘗試使用 Stripe 和 Snipcart 等 API。你的網站有很多内容豐富的頁面嗎？可以探索像 Prismic 這樣的無頭解決方案。

延伸閱讀：什麼是Next.js、Gatsby、Nuxt？

Next.js是一個基于React的Web應用程式架構，它提供了很多特性，如自動代碼分割、服務端渲染和靜态站點生成等，讓開發者能夠更快、更容易地建構高性能的React應用程式。

Gatsby是一個基于React的靜态網站生成器，它使用GraphQL來擷取資料，并在建構時預渲染靜态HTML和CSS。這使得Gatsby生成的網站非常快速，同時還具有良好的搜尋引擎優化（SEO）和可擴充性。

Nuxt是一個基于Vue.js的應用程式架構，它使用Vue.js的核心功能，并在此基礎上添加了很多有用的功能，如服務端渲染、靜态站點生成和異步資料加載等。這些特性使得Nuxt成為建構高性能、可擴充、易于維護的Vue.js應用程式的理想選擇。

延伸閱讀：什麼是Stripe，Snipcart，Prismic？

Stripe是一家提供支付解決方案的公司，它使網站和應用程式可以輕松地處理信用卡付款。它提供了一個安全的支付系統，可以輕松內建到網站和應用程式中。

Snipcart也是一家提供電子商務解決方案的公司，可以為網站和應用程式提供全功能的購物車和結賬體驗。它與許多流行的CMS和開發架構相容，并且可以輕松地內建到現有的網站和應用程式中。

Prismic是一個内容管理系統（CMS），可以讓網站和應用程式所有者輕松地建立和管理内容。與傳統的CMS不同，Prismic采用了Headless CMS的架構，使網站和應用程式開發人員可以更加靈活地管理内容和前端展示。它還提供了一個API和工具，可以幫助開發人員輕松地将内容內建到網站和應用程式中。

當然，如何建構或遷移你的網站将取決于你選擇使用的具體技術，因為每種技術都有不同的工作方式。例如，一個 Next.js 項目的設定和工作流程将與 Nuxt 項目不同。

如果你剛開始建構 Jamstack 網站和應用程式，建議從一個相對簡單的網站開始，比如一個營銷網站和/或部落格，以了解概念和工作流程。

如果你想體驗這樣的站點，大家可以來我的個人部落格網站來體驗（十分抱歉，好久沒維護了），這個站點使用了 Gatsby + Strapi 建構，站點位址：

https://www.qianduandaren.com

結束

總的來說，Jamstack架構是現代Web開發的重要組成部分，它将長期存在。但是，它是否适合您和您的項目取決于許多因素，例如：它是新項目還是現有項目，遷移成本，或者是否對其利益感興趣。如果對于您和您的項目來說，這些因素都很好，則值得進一步調查和了解這種架構。如果然而，這些利益并不與您的業務和/或項目真正相符，遷移的成本/影響過大，則現在可能不适合選擇它。

原文：https://prismic.io/blog/what-is-jamstack

作者：Coner Murphy

非直接翻譯，有自行改編和添加部分，翻譯水準有限，難免有疏漏，歡迎指正