我們剛開始接觸到的就是一個靜態頁面，比如我們寫了一個html文件，放在服務器上用戶就能訪問了，而後面網站需要展示更多的信息，或者提供用戶操作數據，因此就要接入了數據庫，數據庫負責數據的處理，於是就有了一些html模板引擎，用於動態的把數據插入到html節點中，這也是我們剛開始接觸到的動態頁面。隨着前端技術的發展，後面盛行的三大框架，是屬於前後端分離的單頁面應用（SPA），但單頁面應用由於一開始從服務端請求回來的只是一個空的html標籤，所以不利於SEO，並且要等待腳本執行之後才能開始頁面渲染，所以導致首屏渲染時間長，因此基於SPA的服務端渲染SSR誕生了，SSR服務端渲染可以有效的減少首屏渲染的時間，並且利於SEO。‘
傳統的靜態頁面：
流程：將靜態資源放在服務器端，用戶通過url訪問靜態資源（相當於一份寫死的數據）並加載到瀏覽器中
優點：服務器壓力小，佔用很少資源
缺點：每展示一份數據，就要手動擬一份靜態資源的數據放在服務器上，因此對於複雜的應用開發效率低，不能良好的交互
服務端職責： 服務器只需負責靜態資源的存儲和返回
應用場景：一般用於展示信息少和交互較少的網頁
傳統的動態頁面：
流程： 運行後端程序並監聽路由（請求路徑），用戶訪問對應路由後端渲染對應的頁面，執行相關 sql 並返回數據，模版引擎將數據插入到 html 節點中，返回 html，瀏覽器渲染
優點： 開發效率較高，MVC模式，可以對數據進行便利的curd
缺點： 需要搭建耦合的前後端架構，前後端職責並不明確。
服務端職責：服務端需要程序監聽路由，同步請求接口，請求數據和渲染頁面，佔用內存和計算資源較多
應用場景： 內容豐富，複雜交互的動態網頁，適合全棧開發。
單頁面（SPA）：
流程： 服務器直接返回靜態資源，瀏覽器加載執行相關 js，單頁面框架判斷路由執行對應 js 代碼，所有請求異步，由前端js操作和拼接dom。
優點：開發效率高，屬於MVVM模式，服務端只需要返回靜態資源。首次加載完成後頁面路由被前端控制，切換路由響應快。
缺點：服務端返回一個空的需要掛載的html節點，在沒有靜態資源緩存情況下，首次加載速度較慢，因爲需要經歷靜態資源下載、js 完全執行、異步數據返回才能開始渲染頁面，不利於SEO。
服務端職責：服務器壓力很小，服務端只需要返回靜態頁面，網頁邏輯、路由和計算由客戶端處理。
應用場景：用戶內容豐富，數據量大的動態網頁，三大框架react、angular 和 vue都屬於單頁面應用。
基於單頁面的服務端渲染（SSR）
流程： 用戶訪問 url， node 攔截到路由，並根據路由渲染對應單頁面組件生成 dom 字符串，如果有數據請求，同步獲取到數據後才渲染出 dom 字符串，插入到 html 中返回客戶端，客戶端一開始看到的就是一個有完整數據的頁面，至此服務端渲染完成。客戶端 body 後的 script 標籤加載單頁面相關 js 文件，而後客戶端進行一次單頁面同構，完成對應組件 dom 的事件綁定及那些服務器端無法實現的功能，後續的交互和程序執行就完全是一個單頁面應用。
優點：加快了用戶首屏的加載速度，因爲服務端第一次渲染的時候，已經把關鍵字和標題渲染到響應的 html 中了，爬蟲能夠抓取到此靜態內容，因此更利於 seo。
缺點：相比純單頁面，服務器需要增加 node 服務帶來的消耗。而服務器壓力會比動態頁面少很多，因爲僅僅是用戶第一次訪問的時候纔是服務端渲染，而後路由改變頁面渲染都是被單頁面控制。
應用場景： 內容豐富，複雜交互的動態網頁，對首屏加載速度和SEO有要求的項目。
SPA和SSR的流程對比：
SPA：客戶端渲染要等js代碼執行完成再請求數據喧嚷頁面，等待的過程頁面什麼都沒有，就是用戶看到的白屏。
SSR：服務端渲染顯示向後端服務器請求數據，服務端會生成完整的首屏html返回給瀏覽器。
所以SSR相比SPA可以減少用戶白屏的時間，並且更有利於SEO
參考文章或圖片出處：