如果2021年在網頁設計方面有一個趨勢，那就是單頁應用程序(spa)的普及。水療中心數量的增加并不令人驚訝，因為水療中心是我們大多數人每天使用的最受歡迎的、引領潮流的網站。例如，Facebook、Gmail、Twitter和谷歌Maps都是spa。現在商業(yè)網站使用SPA框架已經相當普遍了。

在你跳上SPA的潮流并創(chuàng)建你的下一個網站之前，你可能希望從那些已經選擇了SPA之路的人的經驗和錯誤中學習。雖然spa有一些優(yōu)秀的特性，但它們也有一些局限性，或者至少有一些復雜性。

單頁應用程序的優(yōu)點

spa提供非常流暢和快速的用戶體驗。他們創(chuàng)造了一個多頁網站的印象，但他們利用一個單一的HTML文件。spa使用JavaScript代碼與瀏覽器進行通信，這意味著請求不會經常發(fā)送到服務器并從服務器檢索。這種客戶端呈現創(chuàng)建了一個更快的網站和流暢的用戶體驗，很像桌面應用程序。

spa在開發(fā)中也沒有前端和后端;這都是一回事。spa也可以離線使用，比傳統(tǒng)網站更快，制作和調試也相對容易。

spa的另一個優(yōu)點是，通過單一的設計，它們在任何操作系統(tǒng)和瀏覽器上都可以很好地查看和工作。

搜索引擎優(yōu)化的問題

當前spa的一個重要問題是，它們很難在搜索引擎上優(yōu)化索引和排名。一般的SEO主管也不太可能調整和優(yōu)化必要的代碼，以確保搜索引擎機器人可以有效地抓取和索引一個SPA網站。除非執(zhí)行人員受過培訓，精通SPA使用的特定JavaScript框架的使用。

單獨使用JavaScript可能會給搜索引擎機器人爬行帶來問題。從SEO的角度來看，通常不鼓勵網站在導航中使用JavaScript，因為機器人爬行、索引和呈現需要大量代碼。通常認為，導航的最佳實踐是只使用HTML和CSS。

StackOverflow的這篇博文說明了一個開發(fā)人員在他的第一個SPA項目中遇到的一些JavaScript相關問題:

“HTML是結構化的，計算機和機器人很容易理解，但它們不一定理解JavaScript。雖然有很多文章在討論谷歌的爬蟲在抓取一個網站時是否執(zhí)行JavaScript，但我的經驗是它沒有。

spa和用戶禁用JavaScript

spa的另一個缺點是，當用戶禁用JavaScript時，它們不能工作。根據StackOverflow上的這個帖子，大約2%的美國人在他們的主要瀏覽器上禁用了JavaScript。

編碼技術要求

最后，創(chuàng)建一個安全且功能上沒有錯誤的SPA需要大量的專業(yè)知識。使用WordPress或Shopify這樣的內容管理系統(tǒng)創(chuàng)建一個復雜的電子商務網站相對容易，但使用SPA框架則非常困難。

單頁應用和社交分享

當用戶在社交媒體平臺上分享網頁時，它被分享到的網站將從打開的圖形或Twitter卡元細節(jié)的HTML中拉進預覽圖像和文本片段。

當使用CMS或標準HTML & CSS網站時，這個元標記很容易產生。做SPA可不容易。許多人錯誤地提供了由JavaScript填充的元標記。這種方法通常會導致SPA網站的每個頁面/視圖都有相同的預覽。

例如，用戶可能會在Facebook上分享一個討論加密貨幣利弊的博客頁面。如果Facebook不能訪問開放圖表標簽，社交分享將顯示你的主頁預覽，這是完全無關的，不太可能產生很多點擊。這個問題有一個解決方案，在本教程中從tutplus概述。

緩存

如果使用SPA，允許你的網站緩存也會變得更加復雜。

為了使緩存按預期發(fā)揮作用，您將需要考慮一個“緩存破壞”解決方案?；蛘?，您可以使用if-modified-since + last-modified或if-none-match + ETag頭以及適當的緩存控制頭。

如果文件是靜態(tài)的，通常建議開發(fā)人員使用If -modified，因為只要正確配置了HTTP服務器，這將自動實現。

也可以使用Cloudflare。但是，請注意，Cloudflare在緩存響應之前不會執(zhí)行任何JavaScript。有關這方面的更多信息，請訪問Cloudflare網站。

單頁應用程序視圖和狀態(tài)

在標準的多頁網站(MPW)中，用戶可以通過點擊導航按鈕/鏈接來瀏覽網站，并加載新頁面。在SPA中，用戶將單擊導航按鈕并加載同一HTML頁面的不同視圖或狀態(tài)。

使用SPA，應用程序外殼永遠不會重新加載。因此，例如，如果您的SPA網站有相同的頁眉，頁腳和工具條，整個網站，這將只加載一次。用戶將通過單擊導航按鈕重新填充主內容或任何不同的內容，而模板保持不變。

這多虧了AJAX。

活動跟蹤和單頁應用程序

對于spa，頁面跟蹤可能會有問題。這是因為，從技術上講，瀏覽器只加載一個頁面。當用戶在網站上導航到不同的頁面時，使用標準跟蹤，它會報告只有初始頁面被加載。

谷歌Analytics 4在“增強測量”下有一些內置特性，旨在跟蹤spa中的頁面訪問量。如果啟用了這個功能，并且勾選了“基于瀏覽器歷史事件的頁面更改”旁邊的復選框，它就應該跟蹤URL的更改——即使頁面沒有加載或重新加載。

然而，“增強的度量”的一些其他特性不能與spa正確工作，所以禁用“站點搜索”和“滾動”，以避免誤導性報告。

如果由于任何原因這種方法不工作，你可以使用谷歌標簽管理器中的“歷史更改觸發(fā)器”。禁用增強的測量頁面視圖選項，然后轉到谷歌標簽管理器à觸發(fā)器à New

從內置觸發(fā)器的菜單中，選擇“歷史更改”，命名它，然后點擊保存。

刷新和預覽?，F在，每次單擊一個新頁面/視圖時，都會觸發(fā)一個歷史事件。

結論

要創(chuàng)建一個SPA網站，你需要掌握一個Javascript框架，比如Vue、React或Angular。使用普通的JavaScript是可能的，但它要花更多的時間。

使用帶有XML的Ajax來檢索信息并在后臺“加載”不同的網站頁面。

SPA網站的主要問題似乎與搜索引擎優(yōu)化和跟蹤有關。確保所有API都得到支持，并使用歷史API和適當的鏈接標記，以確保搜索引擎機器人可以抓取單獨的url。您可以使用谷歌移動友好測試開始測試您的SPA網站。