Single Page Application 單頁應用


Posted by fang on 2020-10-12

Single Page Application 是什麼

Single Page Application 簡稱 SPA,中文稱作單頁應用,根據維基百科的解釋,它是一種網路應用程式或網站的模型,白話文一點,就是讓網頁用起來像是應用程式、不會一直換頁的一種模式。

舉一個最經典的 SPA 例子大概就是 Gmail 了,從收件匣轉跳到寄件備份的時候,以一般網頁的角度來說應該會有換頁,換頁就會有等待時間,而且通常在等待的時候都會經過一個白白的頁面,但是 Gmail 竟然可以做到沒有那個白色頁面,而且網頁中唯一變換的就是中間的網頁內容,上方的 logo、搜尋列表都沒有重新產生一次,看起來就像在用一個 APP 一樣。另外,網頁的網址也沒有改變,就是最後 hash 的內容從 #inbox 改為 #sent 而已。

從前、後端的角度去看 SPA,它就是將網站介面上的東西完全利用 JavaScript 動態產生前端,也就是 Client side render,而後端只負責將資料提供給前端,這樣一來前後端藉可以被分工的很清楚,但是也有其問題,就是前端要做的事情實在太多了。

優缺點?

其實形容完 SPA 的樣子之後,大概就可以知道它的優點了,在使用上不會有太多餘的視覺變動,相對的使用者體驗也更優秀,這也就是他存在的原因,使用起來 94 不一樣。

如果要說起缺點,它是也不少,但是其實幾乎都已經被克服了,首先第一個:SPA 是採用 Client side render,所以在 SEO 表現極差,如果對網頁按下檢視原始碼的話,只會看到 JavaScript 檔案跟一些 tag。相對應的解決方法就是在第一次產生網頁的時候使用 Server side render,接下來的操作再使用原本的方式,如此一來保留了優良的 SEO 及使用者體驗。

再來,當我們在使用網頁的時候,經常會用到「上一頁」的功能,如果是一般網頁,其實就是從網頁B 返回到網頁A,然而 SPA 的上一頁有可能就直接跳離這一個網站了。這樣的問題目前也已經得到解決,根據維基百科上的說法,HTML5 規範引入了 pushState 和 replaceState 來提供代碼對實際網址和瀏覽器歷史的存取,透過這樣的方式讓使用者在 SPA 中使用「上一頁」功能能夠和一般網頁所呈現出的效果相同。

好文欣賞

這一篇老實說我一直很猶豫要不要發,因為真的只是筆記、淺見,網路上還有太多太多大神文章,所以就當我純記錄一下 SPA 的特性,以下三個是我在整理的時候參考的文章:
維基百科-單頁應用
前後端分離與 SPA
跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR


#single-page application #SPA #單頁應用







Related Posts

[Heroku] 佈署你的 Node.js + Express + Sequelize migration 專案到 Heroku 上吧 !

[Heroku] 佈署你的 Node.js + Express + Sequelize migration 專案到 Heroku 上吧 !

筆記、前後端基礎概念

筆記、前後端基礎概念

AWS Lambda + GitHub API + Google Sheet = 自動化簽到系統

AWS Lambda + GitHub API + Google Sheet = 自動化簽到系統


Comments