圖源：unsplash
現在構建網站不再侷限於單頁應用，有了更多的方式。本文中，筆者將討論現有的三種免費的主流替代方案，以及何時用哪種方案來構建你的2021網站。
靜態網路應用程式
第一種是最古老的方法，即使用靜態網站，在其中有一個或一堆HTML檔案。將這些檔案放到一個伺服器上，然後那個伺服器即能為使用者提供很好的服務。如果使用者進入頁面，他們將進入返回的不同HTML檔案。
動態網路應用程式
第二古老的方式是使用動態網路，透過它響應中的HTML程式碼是在伺服器上按要求飛速渲染的，這是一個非常重要的要求。因為透過使用靜態網站，你只能寫HTML程式碼，然後把它放到伺服器上，但是你無法建立網上商店或部落格這樣的東西。
所以每當你需要使用者生成的內容，或者你有需要很大變化的動態內容，比如說你無法把使用者的購物車裡有什麼寫在HTML檔案上，它們就會改變。
這時就需要一個解決方案：HTML檔案在伺服器上生成，然後返回給使用者。存在一些伺服器端的語言，比如Nodejs，C#或者Python，還有像Express，dot net core或者Django這樣的框架方式。
然後，傳入的請求會被伺服器端解析和處理。然後伺服器端的程式碼會接觸到一個數據庫，從那裡獲取一些資料，然後把這些片段拼接起來，在伺服器上構建HTML程式碼。
作為一個開發者，你通常會定義一個模板，並定義模板中的動態點的位置。現在，伺服器會完成所有的重任，把所有碎片拼接在一起。然後將相應的HTML和完成的HTML頁面返回給使用者。
單頁網路應用程式
第三種構建網站的方式是建立一個單頁應用。這是最先進的方式，它的靈感基本來自於移動應用。人們點選，事情便立即發生。人們從不必等待一個新頁面載入，可能在獲取一些資料時，會偶爾看到一個微調器。但通常情況下，大家保持在應用程式的體驗感中，事情在瞬間發生。
在點選某個地方後不久，就會立即得到一個新的頁面，在瀏覽器上，大家也希望有這樣的體驗。
你會選擇哪一個呢？
為什麼以及在哪裡選擇動態網路應用？
在動態網路方式中，伺服器端在每次點選時都會渲染所有內容。但是載入新頁面會導致一個新的請求，然後迴應在伺服器上生成的頁面。雖然現代引擎的速度真的很快，但還是會有輕微的延遲，如果動態內容沒有變化，我們甚至需要一個新的頁面。
假設一下，如果使用者只想要一個網站的介紹或聯絡頁面。這時出現了一個單頁面應用程式。這裡，如果只有一個單頁、伺服器上的一個HTML檔案，那麼只有一個檔案返回給使用者。但在這個檔案中，最核心的事情就是載入並啟動了一堆JavaScript，然後JavaScript程式碼將執行，從伺服器上獲取資料，然後構建整個HTML頁面。
另一方面，DOM要做的正是使用者在瀏覽器中迅速看到的東西。其中一個巨大的優勢就是JavaScript在瀏覽器中執行，使用者看到的一切都在瀏覽器中呈現。對於即時發生的事情，不需要傳送額外請求來載入新的頁面。
偶爾會有一些請求需要被髮送來獲取新的資料。但是在這期間，網站可以呈現一個微調器或者乾脆在導航中延遲半秒之類的。這就是一些可以提高使用者體驗的技巧。這些全都是免費的方法，且往往看起來像單頁應用程式。
為什麼以及應該在哪裡使用靜態網路？
如果你有一個非常簡單的頁面，沒有動態的內容，比如你的個人主頁，上面的內容不會頻繁變化；比如你每年只更新一次簡歷，那麼你當然可以用一些CSS，或許加上一點點JavaScript構建一堆HTML檔案，然後配置到伺服器上。然後任務就完成了。
即使當遇到有改變更加頻繁的內容，像是Medium。com。那麼你可以使用靜態網站生成器，在那裡你會有一些資料來源，可能是一個數據庫或一堆markdown檔案。然後你可以定義你的頁面一般應該是怎樣的，每個頁面的框架是怎樣的等等。
然後這個靜態網站生成器就可以由你來運行了。你啟動生成過程，生成器會檢視你所有的資料來源，獲取資料，使用預定義的HTML框架，然後插入資料，輸出一堆預生成的HTML檔案，這並不是在伺服器上生成的，而是在你的機器或雲端。
但這並不是作為傳入請求的一部分。而是在頁面部署之前，你將那個完成的靜態頁面部署到伺服器上。最棒的是，甚至有像gatsby、nextJS這樣的解決方案，可以讓你構建一個react應用。然後，當你把它構建成一個靜態網站時，它就會為你呈現出基於使用者可能訪問的每一個頁面而預生成的HTML頁面。然後，無論你載入哪個頁面，都會載入到完成的HTML程式碼。
但一旦加載出了一個單頁應用程式，它就會接管並執行。最好的事情是，此後你又會得到那種快速的移動應用般的體驗。這就是靜態網站的顯著優勢以及很多應用案例了。
圖源：unsplash
為什麼使用單頁網站應用程式？
對於在伺服器上生成內容的動態頁面，這是一個不錯的選擇。例如，如果你要建立一個搜尋引擎最佳化和動態內容都很重要的線上商店，那就太好了。
動態頁面可能是完美的，因為單頁應用程式經常有搜尋引擎最佳化的問題，搜尋引擎不必等待瀏覽器中執行的JavaScript程式碼完成呈現。特別是當你首先需要從JavaScript程式碼中獲取一些內容時。但它們第一次搜尋引擎的最佳化可能是單頁應用程式的一個問題。
它不像伺服器端的應用那樣，內容是動態生成的，在那裡你已經獲取了一個完成的頁面，所以搜尋引擎的爬蟲看到的就是使用者看到的，唯一一點缺陷是所有的重任都落在伺服器上之外。當然，這樣做的好處是，當應用程式在使用者的瀏覽器中執行時，你不會影響它的效能。
特別是在較慢的裝置上，它可能更適合。因此，動態頁面與動態站點相比，內容是在伺服器上按請求生成的。它們無處不在，它們有自己的用例。
不僅如此，以那些資料頻繁變化的用例為例，內容是高度動態變化的，此時搜尋引擎的最佳化很重要，或者你想在伺服器上把效能從使用者那裡拿走，或者不是效能，而是把效能的影響拿走，這都是一些有用的場景。
結論
圖源：unsplash
當然，它們三個也都有反應性較弱的缺點。但面對這些選擇，總要有所取捨。
總結來說，動態網頁的優點如下：
· 提供成品程式碼。
· 負責伺服器上的所有重任。
· 因此瀏覽器不必再做這些任務。
當然，它的缺點是：
· 需要等待每個新頁面被加載出來。
· 因此使用感不如手機應用般流暢快速。
· 後臺開發緊密相連，因為一切都發生在伺服器上。
如果要建一個單頁應用，它有如下優點：
· 作為開發者，你的工作只需要關注前端。
· 高反應性和很棒的即時感，無需頁面過載時間。
· 非常棒的使用體驗。
同樣它也有一些缺點：
· 搜尋引擎最佳化可能是一個真正的問題。雖然是一個可以解決的問題，但它仍然是一個問題。
· 瀏覽器需要承擔所有重任。
· 所以在較慢的裝置上會有問題，較慢的網路同樣如此。
最後，來看看靜態網頁應用程式的優缺點：
· 當你針對網路或裝置較慢的受眾時，靜態網站非常不錯，因為它們會給你完成的內容
· 它們在搜尋引擎的最佳化上也很不錯。
· 沒有效能問題，因為頁面既不需要在伺服器上生成，也不需要在瀏覽器中生成。它只是已經在那裡，因為你早在開發過程中生成了它。
如果談到缺點：
· 頁面生成也可以是一個很大的缺點，它不太適合會快速改變或是由使用者生成的內容。。
· 所有東西都是提前生成的，但你有時不會想要整個頁面都被提前生成。
· 如果你想完全自動化的話，使用這樣的靜態網站生成器來建立一個完整的工作流程很有挑戰性。
圖源：unsplash
三者並不是有你沒我的關係，涉及到開發者的需求時，這三種類型的開發網站都是有用的。關鍵是結合你的需求做出選擇。