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

現(xiàn)在構(gòu)建網(wǎng)站不再局限于單頁(yè)應(yīng)用，有了更多的方式。本文中，筆者將討論現(xiàn)有的三種免費(fèi)的主流替代方案，以及何時(shí)用哪種方案來(lái)構(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)入頁(yè)面，他們將進(jìn)入返回的不同HTML文件。

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

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

所以每當(dāng)你需要用戶生成的內(nèi)容，或者你有需要很大變化的動(dòng)態(tài)內(nèi)容，比如說(shuō)你無(wú)法把用戶的購(gòu)物車(chē)?yán)镉惺裁磳?xiě)在HTML文件上，它們就會(huì)改變。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

圖源：unsplash

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

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

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

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

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

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

結(jié)論

[[355285]]

圖源：unsplash

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

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

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

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

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

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

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

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

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

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

• 當(dāng)你針對(duì)網(wǎng)絡(luò)或設(shè)備較慢的受眾時(shí)，靜態(tài)網(wǎng)站非常不錯(cuò)，因?yàn)樗鼈儠?huì)給你完成的內(nèi)容
• 它們?cè)谒阉饕娴膬?yōu)化上也很不錯(cuò)。
• 沒(méi)有性能問(wèn)題，因?yàn)轫?yè)面既不需要在服務(wù)器上生成，也不需要在瀏覽器中生成。它只是已經(jīng)在那里，因?yàn)槟阍缭陂_(kāi)發(fā)過(guò)程中生成了它。

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

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

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