本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)。

現(xiàn)在構(gòu)建網(wǎng)站不再局限于單頁應(yīng)用，有了更多的方式。本文中，筆者將討論現(xiàn)有的三種免費(fèi)的主流替代方案，以及何時(shí)用哪種方案來構(gòu)建你的2021網(wǎng)站。

[[355281]]

靜態(tài)網(wǎng)絡(luò)應(yīng)用程序

第一種是最古老的方法，即使用靜態(tài)網(wǎng)站，在其中有一個(gè)或一堆HTML文件。將這些文件放到一個(gè)服務(wù)器上，然后那個(gè)服務(wù)器即能為用戶提供很好的服務(wù)。如果用戶進(jìn)入頁面，他們將進(jìn)入返回的不同HTML文件。

動態(tài)網(wǎng)絡(luò)應(yīng)用程序

第二古老的方式是使用動態(tài)網(wǎng)絡(luò)，通過它響應(yīng)中的HTML代碼是在服務(wù)器上按要求飛速渲染的，這是一個(gè)非常重要的要求。因?yàn)橥ㄟ^使用靜態(tài)網(wǎng)站，你只能寫HTML代碼，然后把它放到服務(wù)器上，但是你無法建立網(wǎng)上商店或博客這樣的東西。

所以每當(dāng)你需要用戶生成的內(nèi)容，或者你有需要很大變化的動態(tài)內(nèi)容，比如說你無法把用戶的購物車?yán)镉惺裁磳懺贖TML文件上，它們就會改變。

這時(shí)就需要一個(gè)解決方案：HTML文件在服務(wù)器上生成，然后返回給用戶。存在一些服務(wù)器端的語言，比如Nodejs，C#或者Python，還有像Express，dot net core或者Django這樣的框架方式。

然后，傳入的請求會被服務(wù)器端解析和處理。然后服務(wù)器端的代碼會接觸到一個(gè)數(shù)據(jù)庫，從那里獲取一些數(shù)據(jù)，然后把這些片段拼接起來，在服務(wù)器上構(gòu)建HTML代碼。

作為一個(gè)開發(fā)者，你通常會定義一個(gè)模板，并定義模板中的動態(tài)點(diǎn)的位置。現(xiàn)在，服務(wù)器會完成所有的重任，把所有碎片拼接在一起。然后將相應(yīng)的HTML和完成的HTML頁面返回給用戶。

單頁網(wǎng)絡(luò)應(yīng)用程序

第三種構(gòu)建網(wǎng)站的方式是建立一個(gè)單頁應(yīng)用。這是最先進(jìn)的方式，它的靈感基本來自于移動應(yīng)用。人們點(diǎn)擊，事情便立即發(fā)生。人們從不必等待一個(gè)新頁面加載，可能在獲取一些數(shù)據(jù)時(shí)，會偶爾看到一個(gè)微調(diào)器。但通常情況下，大家保持在應(yīng)用程序的體驗(yàn)感中，事情在瞬間發(fā)生。

在點(diǎn)擊某個(gè)地方后不久，就會立即得到一個(gè)新的頁面，在瀏覽器上，大家也希望有這樣的體驗(yàn)。

你會選擇哪一個(gè)呢?

為什么以及在哪里選擇動態(tài)網(wǎng)絡(luò)應(yīng)用?

在動態(tài)網(wǎng)絡(luò)方式中，服務(wù)器端在每次點(diǎn)擊時(shí)都會渲染所有內(nèi)容。但是加載新頁面會導(dǎo)致一個(gè)新的請求，然后回應(yīng)在服務(wù)器上生成的頁面。雖然現(xiàn)代引擎的速度真的很快，但還是會有輕微的延遲，如果動態(tài)內(nèi)容沒有變化，我們甚至需要一個(gè)新的頁面。

假設(shè)一下，如果用戶只想要一個(gè)網(wǎng)站的介紹或聯(lián)系頁面。這時(shí)出現(xiàn)了一個(gè)單頁面應(yīng)用程序。這里，如果只有一個(gè)單頁、服務(wù)器上的一個(gè)HTML文件，那么只有一個(gè)文件返回給用戶。但在這個(gè)文件中，最核心的事情就是加載并啟動了一堆JavaScript，然后JavaScript代碼將執(zhí)行，從服務(wù)器上獲取數(shù)據(jù)，然后構(gòu)建整個(gè)HTML頁面。

另一方面，DOM要做的正是用戶在瀏覽器中迅速看到的東西。其中一個(gè)巨大的優(yōu)勢就是JavaScript在瀏覽器中運(yùn)行，用戶看到的一切都在瀏覽器中呈現(xiàn)。對于即時(shí)發(fā)生的事情，不需要發(fā)送額外請求來加載新的頁面。

偶爾會有一些請求需要被發(fā)送來獲取新的數(shù)據(jù)。但是在這期間，網(wǎng)站可以呈現(xiàn)一個(gè)微調(diào)器或者干脆在導(dǎo)航中延遲半秒之類的。這就是一些可以提高用戶體驗(yàn)的技巧。這些全都是免費(fèi)的方法，且往往看起來像單頁應(yīng)用程序。

為什么以及應(yīng)該在哪里使用靜態(tài)網(wǎng)絡(luò)?

如果你有一個(gè)非常簡單的頁面，沒有動態(tài)的內(nèi)容，比如你的個(gè)人主頁，上面的內(nèi)容不會頻繁變化;比如你每年只更新一次簡歷，那么你當(dāng)然可以用一些CSS，或許加上一點(diǎn)點(diǎn)JavaScript構(gòu)建一堆HTML文件，然后配置到服務(wù)器上。然后任務(wù)就完成了。

即使當(dāng)遇到有改變更加頻繁的內(nèi)容，像是Medium.com。那么你可以使用靜態(tài)網(wǎng)站生成器，在那里你會有一些數(shù)據(jù)源，可能是一個(gè)數(shù)據(jù)庫或一堆markdown文件。然后你可以定義你的頁面一般應(yīng)該是怎樣的，每個(gè)頁面的框架是怎樣的等等。

然后這個(gè)靜態(tài)網(wǎng)站生成器就可以由你來運(yùn)行了。你啟動生成過程，生成器會查看你所有的數(shù)據(jù)源，獲取數(shù)據(jù)，使用預(yù)定義的HTML框架，然后插入數(shù)據(jù)，輸出一堆預(yù)生成的HTML文件，這并不是在服務(wù)器上生成的，而是在你的機(jī)器或云端。

但這并不是作為傳入請求的一部分。而是在頁面部署之前，你將那個(gè)完成的靜態(tài)頁面部署到服務(wù)器上。最棒的是，甚至有像gatsby、nextJS這樣的解決方案，可以讓你構(gòu)建一個(gè)react應(yīng)用。然后，當(dāng)你把它構(gòu)建成一個(gè)靜態(tài)網(wǎng)站時(shí)，它就會為你呈現(xiàn)出基于用戶可能訪問的每一個(gè)頁面而預(yù)生成的HTML頁面。然后，無論你加載哪個(gè)頁面，都會加載到完成的HTML代碼。

但一旦加載出了一個(gè)單頁應(yīng)用程序，它就會接管并執(zhí)行。最好的事情是，此后你又會得到那種快速的移動應(yīng)用般的體驗(yàn)。這就是靜態(tài)網(wǎng)站的顯著優(yōu)勢以及很多應(yīng)用案例了。

圖源：unsplash

為什么使用單頁網(wǎng)站應(yīng)用程序?

對于在服務(wù)器上生成內(nèi)容的動態(tài)頁面，這是一個(gè)不錯(cuò)的選擇。例如，如果你要建立一個(gè)搜索引擎優(yōu)化和動態(tài)內(nèi)容都很重要的在線商店，那就太好了。

動態(tài)頁面可能是完美的，因?yàn)閱雾搼?yīng)用程序經(jīng)常有搜索引擎優(yōu)化的問題，搜索引擎不必等待瀏覽器中運(yùn)行的JavaScript代碼完成呈現(xiàn)。特別是當(dāng)你首先需要從JavaScript代碼中獲取一些內(nèi)容時(shí)。但它們第一次搜索引擎的優(yōu)化可能是單頁應(yīng)用程序的一個(gè)問題。

它不像服務(wù)器端的應(yīng)用那樣，內(nèi)容是動態(tài)生成的，在那里你已經(jīng)獲取了一個(gè)完成的頁面，所以搜索引擎的爬蟲看到的就是用戶看到的，唯一一點(diǎn)缺陷是所有的重任都落在服務(wù)器上之外。當(dāng)然，這樣做的好處是，當(dāng)應(yīng)用程序在用戶的瀏覽器中運(yùn)行時(shí)，你不會影響它的性能。

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

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

結(jié)論

[[355285]]

圖源：unsplash

當(dāng)然，它們?nèi)齻€(gè)也都有反應(yīng)性較弱的缺點(diǎn)。但面對這些選擇，總要有所取舍。

總結(jié)來說，動態(tài)網(wǎng)頁的優(yōu)點(diǎn)如下：

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

當(dāng)然，它的缺點(diǎn)是：

• 需要等待每個(gè)新頁面被加載出來。
• 因此使用感不如手機(jī)應(yīng)用般流暢快速。
• 后臺開發(fā)緊密相連，因?yàn)橐磺卸及l(fā)生在服務(wù)器上。

如果要建一個(gè)單頁應(yīng)用，它有如下優(yōu)點(diǎn)：

• 作為開發(fā)者，你的工作只需要關(guān)注前端。
• 高反應(yīng)性和很棒的即時(shí)感，無需頁面重載時(shí)間。
• 非常棒的使用體驗(yàn)。

同樣它也有一些缺點(diǎn)：

• 搜索引擎優(yōu)化可能是一個(gè)真正的問題。雖然是一個(gè)可以解決的問題，但它仍然是一個(gè)問題。
• 瀏覽器需要承擔(dān)所有重任。
• 所以在較慢的設(shè)備上會有問題，較慢的網(wǎng)絡(luò)同樣如此。

最后，來看看靜態(tài)網(wǎng)頁應(yīng)用程序的優(yōu)缺點(diǎn)：

• 當(dāng)你針對網(wǎng)絡(luò)或設(shè)備較慢的受眾時(shí)，靜態(tài)網(wǎng)站非常不錯(cuò)，因?yàn)樗鼈儠o你完成的內(nèi)容
• 它們在搜索引擎的優(yōu)化上也很不錯(cuò)。
• 沒有性能問題，因?yàn)轫撁婕炔恍枰诜?wù)器上生成，也不需要在瀏覽器中生成。它只是已經(jīng)在那里，因?yàn)槟阍缭陂_發(fā)過程中生成了它。

如果談到缺點(diǎn)：

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

三者并不是有你沒我的關(guān)系，涉及到開發(fā)者的需求時(shí)，這三種類型的開發(fā)網(wǎng)站都是有用的。關(guān)鍵是結(jié)合你的需求做出選擇。