什麼是 SPA (Single-Page Application)？有什麼優點和缺點？
2023年2月24日
什麼是 SPA (Single-Page Application)？
Single-Page Application（SPA）是一種網頁應用的架構，在 SPA 中，整個應用程式的所有內容都在一個頁面中呈現。Gmail 就是一個很好的例子，使用者可以在同一個頁面查看不同信件、回覆和編輯信件，而這全部操作都不需要刷新重整頁面。當使用者在查看一封新郵件時，應用程式只需要動態載入和顯示所需要的新數據，而不是加載整個新頁面。
SPA 的成功主要得益於前端技術的不斷演進，例如 AJAX 可以動態加載資料，又例如 React 應用程式搭配 React Router（前端路由工具），在不重新加載整個頁面的情況下，在應用程式中內部轉導頁面，並動態更改顯示的內容。
SPA 優點
更好的用戶體驗：
SPA 提供了一個更流暢，更快速的網頁體驗，因為它不需要為每個請求重新加載整個頁面。這可以讓網站看起來更像一個原生的 APP，進而提升使用者體驗。
前後端分離：
在 SPA 中，前端主要負責頁面渲染和互動，後端負責提供數據和 API。如果不使用 SPA 架構，那麼將會使用傳統的多頁面架構，當使用者請求新頁面時，後端會回傳完整的頁面。因此 SPA 這種分離可以使得前端和後端的開發和維護更加獨立，也可以提高網站的效率和可靠性。
SPA 缺點
SEO 較差：
因為 SPA 只有一個頁面，其他資料都是透過 JavaScript 動態渲染，因此搜索引擎的爬蟲無法正確的索引頁面內容，進而影響了網站的排名。
JavaScript 檔案過大：
SPA 會需要透過前端大量的 JavaScript 來提供使用者互動或加載資料，此外隨著 SPA 應用程式變得越來越複雜，其所需的 JavaScript 檔案也會隨之增大，這些原因可能會造成 SPA 加載 JavaScript 檔案時變得緩慢。
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 來達到此目的。
其次，讓我們來看一下 SPA JavaScript 檔案過大的問題。為了解決這個問題，我們可以使用懶加載 (lazy loading)、代碼分割 (code splitting)、壓縮等技術，減少 JavaScript 檔案的大小，或是只在需要時加載特定 JavaScript 檔案，這樣可以減少檔案大小，並提高頁面加載速度。
以上就是解決 SPA 缺點的一些常見方法。當然，這些方法只是其中的一部分，根據具體情況，可能還有其他更好的解決方案。在面試中，我們需要能夠靈活運用這些知識，結合實際情況，提出更加有效的解決方案。