SPA通俗的說就是單頁面應用（single page application）

優點

頁面之間的切換非常快
一定程度減少了後端伺服器的壓力
後端程式只需要提供api，不需要客戶端到底是web端還是手機等

缺點

首屏開啟速度很慢，因為使用者首次載入需要先下載SPA框架及應用程式的程式碼，然後再渲染頁面。
不利於SEO搜尋引擎優化

SEO通俗的說就是搜尋引擎優化(search engine optimization)

SEO是一種通過了解搜尋引擎的運作規則（如何抓取網站頁面，如何索引以及如何根據特定的關鍵字展現搜尋結果排序等）來調整網站，以提高該網站在搜尋引擎中某些關鍵詞的搜尋結果排名。

我們之前說SPA單頁面應用，通過AJAX獲取資料，這就難保證我們的頁面能被搜尋引擎正常收到，並且有一些搜尋引擎不支援執行js和通過ajax獲取資料，那就更不用提SEO了。為了解決這個問題，，SSR登場了

SSR通俗的說就是伺服器端渲染(server side rendering)

優點

更快的響應時間，不用等待所有的js都下載完成，瀏覽器變成顯示比較完整的頁面
更好的SSR，我們可以將SEO的關鍵資訊直接在後臺就渲染成html，從而保證搜尋引擎的爬蟲都能爬取到關鍵資料

缺點

佔用更多的cpu和記憶體資源
一些常用的瀏覽器的api可能無法正常使用，比如window，document，alert等，如果使用的話需要對執行環境加以判斷
開發除錯會有一些麻煩，因為涉及到了瀏覽器及伺服器，對於SPA的一些元件的宣告週期的管理會變得複雜
可能會由於某些因素導致伺服器渲染的結果與瀏覽器端的結果不一致。

前後端分離的概念

傳統的web前後端開發大多是前端將頁面寫好，讓後端將頁面整合到專案中，這裡就存著一個前後端耦合的問題，首先對於後端來說，不僅要寫後端邏輯，還得要整合前端頁面。對於前端來說，也不是很輕鬆就能看到頁面的真正渲染出來的樣子，這樣 肯定是不利於開發除錯的，效率自然也就成了問題。針對上述問題，前後端分離的思想應運而生。

基本概念

前後端根據AJAX介面進行資料的互動，目前常見的是後端直接將資料已JSON的格式返回給前端，前端根據後端伺服器返回的資料，操作DOM。

主要優點

分工明確，前後端各司其職，後端專注業務邏輯和功能的實現，前端專注頁面實現和渲染。
介面明確，並行開發。在後端介面沒有實現好之前，前端可以自己模擬介面提供測試資料。
提高開發效率，一定程度上減少了前後端的溝通成本

總結

前後端分離降低了前端和都端的耦合度，提高了開發效率；

SPA是前後端分離中前端的一種解決方案；

SEO對於跟多網站很重要而普通的SPA又不利於SEO；

SSR的出現一定成都上解決了SPA首屏慢的問題，又極大減少了普通SPA對於SEO的不利影響。