本文轉載自公眾號“讀芯術”(ID：AI_Discovery)。

現在構建網站不再局限于單頁應用，有了更多的方式。本文中，筆者將討論現有的三種免費的主流替代方案，以及何時用哪種方案來構建你的2021網站。

[[355281]]

靜態網絡應用程序

第一種是最古老的方法，即使用靜態網站，在其中有一個或一堆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代碼中獲取一些內容時。但它們第一次搜索引擎的優化可能是單頁應用程序的一個問題。

它不像服務器端的應用那樣，內容是動態生成的，在那里你已經獲取了一個完成的頁面，所以搜索引擎的爬蟲看到的就是用戶看到的，唯一一點缺陷是所有的重任都落在服務器上之外。當然，這樣做的好處是，當應用程序在用戶的瀏覽器中運行時，你不會影響它的性能。

特別是在較慢的設備上，它可能更適合。因此，動態頁面與動態站點相比，內容是在服務器上按請求生成的。它們無處不在，它們有自己的用例。

不僅如此，以那些數據頻繁變化的用例為例，內容是高度動態變化的，此時搜索引擎的優化很重要，或者你想在服務器上把性能從用戶那里拿走，或者不是性能，而是把性能的影響拿走，這都是一些有用的場景。

結論

[[355285]]

圖源：unsplash

當然，它們三個也都有反應性較弱的缺點。但面對這些選擇，總要有所取舍。

總結來說，動態網頁的優點如下：

• 提供成品代碼。
• 負責服務器上的所有重任。
• 因此瀏覽器不必再做這些任務。

當然，它的缺點是：

• 需要等待每個新頁面被加載出來。
• 因此使用感不如手機應用般流暢快速。
• 后臺開發緊密相連，因為一切都發生在服務器上。

如果要建一個單頁應用，它有如下優點：

• 作為開發者，你的工作只需要關注前端。
• 高反應性和很棒的即時感，無需頁面重載時間。
• 非常棒的使用體驗。

同樣它也有一些缺點：

• 搜索引擎優化可能是一個真正的問題。雖然是一個可以解決的問題，但它仍然是一個問題。
• 瀏覽器需要承擔所有重任。
• 所以在較慢的設備上會有問題，較慢的網絡同樣如此。

最后，來看看靜態網頁應用程序的優缺點：

• 當你針對網絡或設備較慢的受眾時，靜態網站非常不錯，因為它們會給你完成的內容
• 它們在搜索引擎的優化上也很不錯。
• 沒有性能問題，因為頁面既不需要在服務器上生成，也不需要在瀏覽器中生成。它只是已經在那里，因為你早在開發過程中生成了它。

如果談到缺點：

• 頁面生成也可以是一個很大的缺點，它不太適合會快速改變或是由用戶生成的內容。.
• 所有東西都是提前生成的，但你有時不會想要整個頁面都被提前生成。
• 如果你想完全自動化的話，使用這樣的靜態網站生成器來建立一個完整的工作流程很有挑戰性。

三者并不是有你沒我的關系，涉及到開發者的需求時，這三種類型的開發網站都是有用的。關鍵是結合你的需求做出選擇。