# SPA（Single Page Application）
###### tags: `web`、`concept`

## 請簡單解釋什麼是 Single Page Application
SPA，單頁式應用，顧名思義就是網頁操作起來很像只有一個頁面而已，它不同於 MPA（Mutiple Page Application），因為不會跳轉畫面的關係，使用者在操作頁面的時候不會看到短暫的空白畫面（等待 Server response），更細微的來說，使用 SPA 會讓使用者覺得很像在操作一個 App 的那種感覺。而使用 SPA 最經典的案例是現代上網者幾乎用過的信箱：「Gmail」，在操作 Gmail 的時候
不會看到換頁面的呈現，每個操作都在同個頁面下實行的。

而 SPA 背後的機制仰賴於 Ajax（Asynchronous JavaScript and XML）的使用，藉由 Ajax 的技術，我們可以在非同步下處理資料的回傳，也就是說，頁面的重新渲染取決於 Server 何時 response，然後再由 JavaScript 把畫面重新渲染，在 response 回來之前，頁面照樣能使用並執行其它動作，因為兩者是非同步的。
## SPA 的優缺點為何
#### 好處
1. 當網頁中有些功能希望設計成不管做什麼動作都不能中斷這個功能，那麼使用 SPA 是非常合適的選擇，比方說音樂播放網站（如 [StreetVoice](https://streetvoice.com/) ），假想使用者在播放器播放音樂的同時，又想去使用網站其它的功能或者是頁面，使用者當然不希望音樂被中斷（奇檬子不佳），因此保持播放器不被中斷可以讓使用者體驗更好。
2. 呈第 1 點的結尾，有些網頁的一些功能雖然未必需要有不換頁的選擇，但如果有，那就會讓使用者體驗更佳，好比說 Facebook ，在動態中播放一則影片下如果頁面繼續往下滑，那麼影片就會縮小到旁邊去，並且繼續播放著，這種功能雖然未必需要有，但是有的情況下，使用者可以一邊看影片（或聽影片聲音）一邊瀏覽其它動態。
3. 讓前後端的職責更分明（前端只管顯示畫面正確，後端只管傳輸資料到位），而且不會因為前端壞掉而影響到後端的資料存取，或是後端發生問題前端頁面無法顯示，頂多功能故障沒辦法使用或是資料空白。
4. 另外因為這樣的前後端分離的寫法，你可以很方便隨時替換前端和後端的程式語言或是框架，只要確定連結前後端之間的 API 格式還是一樣就可以了。

#### 壞處
1. 使用 SPA 的關係會變成進入網頁之前 JavaScript 還沒 render，這樣的情況會使得 HTML 裡面空空如也，SEO 搜尋不到網頁相關資訊（不過強大的 Google 可以爬 JS 檔案）。
2. 如果像 Google 這種就算可以搜尋得到 JS，還得注意的是， SEO 搜尋時機和 JavaScript render 的時機要怎麼拿捏與修正也可能是個問題。
3. 另外使用 SPA 會變成每次都是載一拖拉庫的 JavaScript（包括其它頁面的 template），就算你只想看一個頁面也是全載。
4. 前端會變得很複雜。使用以前的方法後端只要照著不同頁面回傳相對應的畫面，也就是後端在幫忙控制要傳到哪個對應的 controller 而回傳不同的資料，而使用 SPA 之後這件事變成前端這邊要來實作，重點是一個網址要對應到使用者按下不同 URL 時要呈現哪一個畫面，會讓前端這邊的處理複雜許多，再加上每個狀態下的操作對應的輸出內容又是什麼，之間的操作前後順序要確實掌握否則會出現使用者點 A 文章之後又點 B 文章，結果最後跑出了 A 文章的囧境。

### 參考資料
1. [跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR](https://medium.com/@hulitw/introduction-mvc-spa-and-ssr-545c941669e9)
2. [前後端分離與 SPA](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/?source=post_page-----545c941669e9----------------------)