MPA

在傳統網頁開發上，我們通常會將一個功能或一個呈現內容，搭配一個HTML檔案來儲存頁面。比如說我們在網站上看到一個最新消息列表頁與最新消息詳細內容的頁面，如果是採用傳統的開發方式，應該至少會有兩個頁面存在，一個可能是news_lists.html另一個可能是news_detail.html，當我們在這兩個頁面之間切換畫面時，就會發生一種瞬間出現空白畫面的狀況。這種方式又稱之為 MPA（Multi-Page Application），也就是多頁式應用程式。

SPA

若我們有一個後端的網路服務(Web Service)已經能夠正常運作且受到保護，只有經過身份驗證和授權的用戶才能調用這個 API，則我們可以使用網頁前端的框架來架設網站，並且連結到此API。 在大多數網站上，當我們點擊連結或提交表單時，瀏覽器會向伺服器發出request並下載一個完整的新頁面。我們通常會看到白色閃爍，因為當前頁面消失並加載了新頁面。若使用 AJAX技術，我們可以編寫一些在瀏覽器上運行的 JavaScript。JavaScript 將向伺服器發出request ，接收response並使用新數據更新當前 HTML 頁面。 整個過程中，只有數據通過網絡傳輸，而不是一個全新的 HTML 頁面。 像這樣的頁面，就被稱為Single Page Application(SPA)。 Wilson Website就是一個SPA。

簡單來說 SPA

SPA顧名思義只有一個頁面，不需要跳頁。雖說如此，在使用者的角度看起來，卻感覺像是有很多很多的頁面。

這是因為SPA透過了AJAX（非同步的JavaScript與XML技術）來更新部分網頁資料。當使用者與SPA網站互動的過程中，網站不會像傳統的方式，只因一個小地方的更動，就必須從伺服器重新載入整個新頁面來更新畫面。反而透過動態的方式將更動的那個部分重新寫入目前的頁面。

這樣做有幾個優點：

• 我們減少了伺服器的負載。為每個reqeust生成一個HTML 頁面需要大量的處理能力。如果我們的服務器的 CPU 太忙，我們的網站就會變慢，並可能變成反應遲鈍使我們的網站關閉。在使用網頁瀏覽器時，大多數客戶端的 CPU（可能有 8 個或更多）都處於空閒狀態。因此，我們可以將數據傳到客戶端，讓客戶端的CPU驅動瀏覽器來渲染(render)頁面。
• 我們還減少了需要通過網絡傳輸的數據量，因為只發送新數據，而不是完整的 HTML 頁面。

雖然SPA有很多優點，但這並不意味著每個網站都應該是 SPA。SPA的缺點有：

• SPA 非常複雜。 SPA越大，添加的功能越多時，會變得越複雜。最終，複雜性會影響我們網站的性能，並增加bug出現的機率。
• 搜索引擎優化(SEO)會出問題。 谷歌和其他搜索引擎有自動掃描程式， 但是，這些自動掃描程式不會運行 JS 代碼來加載數據。因此，搜索引擎可能無法正確定位我們的網站。

市面上有幾個熱門框架可以製作 SPA，包括 React.js（由 Facebook 開發和使用）、Angular.js （ 由 Google 的 Angular 團隊以及社群共同領導 ）和 Vue.js。

SPA 缺點解決方式

在前文中，我們了解了 SPA 的優點和缺點。儘管 SPA 可以提供更好的用戶體驗和前後端分離，但它也存在一些缺點。其中，SEO 較差和 JavaScript 檔案過大是常見的問題。在面試中，面試官通常會追問這些問題的解決方案。因此，在本段中，我們將針對這兩個問題提供一些解決方法。

首先，讓我們來看一下 SPA 的 SEO 問題。為了解決這個問題，我們可以使用 SSR (Server-side Rendering) 或是 SSR (Server-side Rendering) + CSR (Client-side Rendering) 的方式。

SSR 可以在伺服器上完整渲染 HTML 頁面，並將其發送給使用者，使搜索引擎可以正確索引頁面內容，從而提高網站排名。而 SSR + CSR 的搭配，則可以在第一次將伺服器生成的靜態 HTML 發送到客戶端，提供更好的 SEO 和更快的頁面加載速度，同時還提供了預先渲染的頁面。當後面的畫面需要更多的互動與交互時，可以使用 CSR 來達到此目的。