首頁 > web前端 > css教學 > 靜態與動態與jamstack:在哪裡?

靜態與動態與jamstack:在哪裡?

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-03-21 10:16:10
原創
784 人瀏覽過

靜態與動態與jamstack:在哪裡?

開發人員經常討論“靜態”與“動態”網站,而jamstack一詞也通常使用。這些術語是什麼意思,“靜態”站點與jamstack或動態站點之間的分界線在哪裡?這些看似簡單的問題有細微的答案。讓我們深入研究這些概念,以更好地了解Jamstack。

定義邊界

考慮椅子和凳子之間的區別。大多數人會說椅子有四個腿和背部,而凳子有三腿,沒有背部。

但是,模糊線條的設計呢?

凳子越像椅子一樣,區別就越清晰。最終,大多數人都同意這是凳子,而不是椅子。看似微不足道的練習突出了定義邊界的重要性。它有助於我們了解極限和灰色區域。最終,即使是堅定的椅子倡導者也會承認物體顯然是凳子的地步。

儘管椅子很有趣,但本文側重於網站交付技術。讓我們將相同的練習應用於靜態,動態和jamstack網站。

高級概述

訪問網站時,會發生一些幕後流程:

  1. 您的瀏覽器執行DNS查找以將域名轉換為IP地址。
  2. 它從該IP地址請求HTML文件。
  3. Web服務器返回請求的文件。
  4. 在頁面渲染過程中,瀏覽器可能會遇到對資產(CSS,JavaScript,圖像)的引用。然後,它要求這些資產。
  5. 此週期重複,直到瀏覽器具有所有必要的文件為止。一個網頁通常會提出50個請求。

至關重要的是,即使在動態網站上,網絡服務器對每個請求的響應始終都是靜態文件。這些文件可以像其他任何文件一樣保存或共享。

靜態網站和動態網站之間的區別在於Web服務器的作用。在靜態站點中,請求的文件已經存在;服務器只需返回它們。在動態站點中,軟件生成響應。這可能涉及數據庫查詢,模板處理或添加時間戳。這一代人都會發生在每個請求中。

這是靜態和動態網站之間的基本區別。

Jamstack的位置

靜態網站有局限性。雖然非常適合信息站點,但它們本質上缺乏動態的內容或行為。 Jamstack橋接了靜態和動態之間的縫隙。它利用靜態站點的優勢,同時在需要時啟用動態功能。

Jamstack中的“堆棧”是一個錯誤的名稱。這不是堆棧,而是類似於AWS良好框架框架的5支支柱的哲學。這種歧義引發了關於其含義的許多討論。

了解jamstack

Jamstack是靜態站點的超集。要理解它,讓我們檢查一下其起源。

2002年,亞倫·斯瓦茨(Aaron Swartz)的博客文章“烘烤,不要炒”強調了靜態網站的好處,這具有挑戰性的限制。他強調了更簡單的維護,更輕鬆的備份和平台獨立性的優勢。

在整個歷史上,類似的挫敗感推動了與Jamstack相關技術的發展:

  • MovableType解決了現有博客CMSS的性能和穩定性問題。
  • Jekyll旨在簡化博客,避免WordPress和Mephisto的複雜性。
  • 雨果優先於其設計中的內容寫作。

早期jamstack工具中的重複主題包括降低複雜性,提高性能,減少供應商鎖定以及更好的開發人員工作流程。

在過去的二十年中,JavaScript的演變和微服務的興起創造了一種新方法:將靜態前端與動態後端解耦。

2015年,Mathias Biilmann創造了“ Jamstack”來描述這種現代方法,克服了“靜態網站”一詞的局限性。這使較舊的靜態技術振興了,並將它們推向了新的限制。 Jamstack的方法的好處導致了其快速增長。

在Jamstack前十三年,Aaron Swartz主張將輸入(需要動態處理)與輸出(可以預渲染)分開。 jamstack的本質是前端和後端的這種脫鉤,並在可能的情況下進行預渲染和動態功能。

jamstack比動態站點的優勢源於其六個支柱:

安全

較少的運動部件減少了攻擊表面。

可伸縮性

靜態內容可以通過CDN輕鬆擴展。

表現

CDN交付可顯著提高頁面負載速度。

可維護性

靜態網站本質上更容易維護。

可移植性

靜態位點在服務器之間很容易傳輸。

開發人員的經驗

與GIT工作流程無縫集成。

克里斯(Chris)對jamstack和wordpress的比較,以及他在“靜態是否?”中的分析,進一步探討了這些觀點。

讓我們用這些支柱評估jamstack用例。

靜態和jamstack的邊緣

建立基礎知識後,讓我們檢查每個定義的界限。我們將將邊緣案例分為四組:

  • 嚴格靜態:完全遵守靜態的定義。
  • 主要是靜態的:雖然不是完全靜態,但大多數人會認為它是靜態的。
  • Jamstack:與動態後端脫鉤的靜態前端。
  • 動態:按需渲染頁面。

許多案例可以分為多個類別。我們將使用最嚴格的分類。

JavaScript互動

帶有JavaScript驅動圖像幻燈片的靜態位點仍然是靜態的。所有相互作用都發生在瀏覽器中。

餅乾

一個基於cookie的橫幅的靜態站點仍然是靜態的。

外部資產

從動態外部來源加載圖像或JavaScript通常被認為是靜態的,儘管嚴格來說,但事實並非如此。

iframe

儘管嵌入式內容具有動態性質,但通過IFRAME(例如,Google Maps)嵌入內容通常被認為是靜態的。

表格

當數據提交需要後端時,靜態站點上的表格就會變得動態。區別取決於表單提交服務是否被視為網站的核心部分。

AJAX請求

Ajax請求,尤其是對動態的後端請求,將站點推向靜態區域。

嵌入式電子商務

在靜態站點上啟用電子商務的服務通常使用AJAX請求,將其放置在Jamstack類別中。

單頁應用程序(SPA)

在很大程度上依賴Ajax的水療中心本質上是動態的和jamstack。

AJAX調用無服務器功能

後端(無服務器,kubernetes,php)的類型不如前端和後端的脫鉤。這是jamstack。

反向代理

只要文件保持不變,反向代理就不會固有地使靜態站點動態。

CDN

CDN充當反向代理,不會改變該站點的靜態性質。

cdn帶有長緩存到期

由於初始按需生成和潛在的緩存無效,動態位點前面的CDN即使具有長緩存,也保持動態。

帶靜態輸出的WordPress

使用WP2Static之類的工具從WordPress生成靜態輸出會創建一個靜態網站。

邊緣計算

邊緣功能可以添加標頭(靜態)或操縱HTML(動態),從而模糊線條。廣泛的HTML操縱將其推入動態領域。

分佈式持續渲染(DPR)

DPR在改進Jamstack工作流程的同時,由於按需頁面生成,基本上是動態的。

增量靜態再生(ISR)

與DPR類似,ISR的按需頁面生成將其歸類為動態。

平面文件CMS

平面文件CMS在消除數據庫的同時仍會動態呈現響應。

結論

檢查這些邊緣案例闡明了靜態和jamstack的邊界。目標不是教條的依從性,而是了解權衡。網站可能主要是帶有動態元素的jamstack;這是完全可以接受的。較近靜態,性能,安全性和可擴展性越好。討論正在進行,理解權衡是關鍵。

以上是靜態與動態與jamstack:在哪裡?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板