各路博客總結SSR的真的非常多，一圈看下來還蠻燒腦，不求寫出來有多高深，只希望從理解入手，足夠直白易懂就好。
SSR
SSR就是服務端渲染，也經常被稱爲直出，經常拿來比較的就是客戶端渲染，也就是CSR
文字理解較爲單薄 放一組圖
CSR：
SSR：
-
從兩個對比圖就可以知道爲什麼SSR是解決首頁白屏的利器了，儘管服務端渲染看起來流程更長更加複雜了，但是服務端渲染速度快，且第一階段完畢首屏就已經呈現了
-
由圖也可以理解這句話：直出一大特徵即是直出服務端代替客戶端來渲染頁面，再將渲染好的html頁面直接吐給用戶
-
如果說上邊是加載流程的不同的話，那如何辨別是服務端渲染還是客戶端渲染呢？
- 可以在控制檯 > Network > Preview > 查看傳輸內容，如果preview裏呈現的是完整的html，那麼它就是服務端渲染；如果呈現的是json對象，那毫無疑問就是客戶端渲染了
- 可以在檢查網頁源代碼，如果呈現的html中攜帶當前服務器端返回的數據則是服務器渲染，如果無法獲取到當前動態渲染的數據，類似下圖所示，則就是客戶端渲染了。因此，客戶端渲染的方式顯然不易於SEO爬蟲。
![在這裏插入圖片描述]()
PWA
pwa又是什麼呢？它的全名是漸進式網頁應用：它的賣點主要在於它的可安裝性（允許用戶將應用添加到桌面），連接獨立性（藉助 Service Worker，可以在離線或低速網絡狀態下工作），消息推送（實現桌面通知），主要來說一下它的連接獨立性吧。可以在低速或者離線的網絡狀態訪問網頁，聽起來有點神奇，其實原理比較好懂——它實際上是一種緩存優先的策略：它會攔截原本的請求，檢查 cache 中是否存在將要請求的資源，有則返回緩存，無則遠程請求資源，將資源緩存後返回。
SSR+PWA
到這裏你應該就會發現pwa的缺陷了，當新用戶首次加載或用戶清除瀏覽器緩存之後進入頁面，這時是沒有緩存資源的，這樣的情況下明顯就沒有那麼流暢的體驗了。
所以單靠pwa還是不夠的，如果讓它再加上SSR呢？那這個頁面無論是首次加載還是二次打開，都會變得絲滑無比。
如下是流程和解釋：
由於直出的頁面，html 中已經包含了數據，所以只要處理好數據的更新就完美了：
- 用戶第一次訪問頁面時，service worker 將直出的 HTML 文檔（帶dom節點和數據）緩存到 cache 中。
- 用戶第二次訪問頁面時，service worker 攔截頁面的 HTML 請求，並行做兩件事：
- 在 cache 中查找，並返回緩存的 HTML 文檔給用戶
- 進行網絡請求，獲取最新的 HTML，並替換 cache 中的緩存
- 瀏覽器獲取到 service worker 返回的主文檔，進行正常的 html 解析流程
- 此時用戶看到的還是舊的 HTML 文檔，爲了獲取最新的數據，需要在 js 中插入一段和 sw 通信的邏輯。然後取出sw 中最新的 HTML 中的數據，並將數據返回給頁面。
- 頁面拿到最新的數據後，通過最新的數據來更新頁面。
PS: 剛剛提到的Service Worker作用和生命週期如下：
作用：
- 攔截網絡請求
- 緩存可用時返回緩存內容
- 對緩存內容進行管理
- 向客戶端推送信息
- 後臺數據同步
- 資源預取
生命週期大致分爲四個階段：
-
Parse 解析
-
Install 安裝
-
Activate 激活
(pwa在這個位置進行請求攔截與緩存捕獲)
-
Redundant 廢棄