前言

今天在開始做SSR項目的時候，偶然發(fā)現(xiàn)了困惑自己很久的一個問題。SSR在剛進頁面的時候network里沒有請求接口的記錄，這個讓我很困惑。
隨后通過了解，這個和SSR的特性有關(guān)。我所做的SSR是同時支持服務(wù)端渲染和客戶端渲染的，我從瀏覽器看只能看到客戶端渲染所請求的接口。因此我學(xué)習(xí)了服務(wù)端渲染、客戶端渲染和同構(gòu)渲染相關(guān)的知識。

一、客戶端渲染（CSR）

1-1、渲染步驟

客戶端渲染主要有以下三個步驟：
1、瀏覽器發(fā)起http請求。
2、服務(wù)端響應(yīng)http請求，返回html文件內(nèi)容。
3、瀏覽器加載html文件中的資源文件（js、css、圖片、音頻、視頻等）。
4、瀏覽器渲染并顯示頁面內(nèi)容。

1-2、優(yōu)劣勢

優(yōu)勢：
1、實現(xiàn)簡單（相比于SSR）。

劣勢：
1、由于需要加載js文件以及后臺接口數(shù)據(jù)，所以首屏加載時間會比較長，用戶體驗不好。
2、由于不能直接在首屏?xí)r渲染出頁面內(nèi)容，所以網(wǎng)站SEO不好做。

二、服務(wù)端渲染（SSR）

服務(wù)端渲染就更加直接，在服務(wù)器收到http請求的時候，服務(wù)器先在自己內(nèi)部渲染出html的內(nèi)容，然后直接返回結(jié)果。

2-1、渲染步驟

服務(wù)端渲染的過程更加簡單：
1、瀏覽器發(fā)起http請求。
2、服務(wù)端響應(yīng)http請求，先渲染出html的內(nèi)容，然后返回。
3、瀏覽器獲取到html的內(nèi)容并直接渲染。

2-2、優(yōu)劣勢

優(yōu)勢：
1、直接輸出網(wǎng)頁內(nèi)容，SEO很好做
2、首屏?xí)r省去了加載js文件的時間，首頁加載速度變快了。

劣勢：
1、訪問每個界面都需要訪問服務(wù)器，讓服務(wù)器渲染頁面，對服務(wù)器的負(fù)載變大了。

三、同構(gòu)渲染

所謂的同構(gòu)渲染，實際上就是把CSR和SSR的優(yōu)勢結(jié)合起來，讓同一套代碼在服務(wù)器上跑一遍，生成首屏內(nèi)容，然后再在客戶端跑一遍，綁定事件。這樣既提供了更快的首屏速度、更好的SEO支持，又能避免對服務(wù)器帶來過大的負(fù)載。

3-1、渲染步驟

同構(gòu)渲染的過程一般是這樣：
1、瀏覽器發(fā)起http請求。
2、服務(wù)端響應(yīng)http請求，渲染出html的內(nèi)容，然后返回。
3、瀏覽器渲染并顯示頁面內(nèi)容。
4、瀏覽器繼續(xù)加載html文件中的js文件。
5、綁定事件，后續(xù)路由跳轉(zhuǎn)等行為均交由客戶端來渲染。

四、簡單總結(jié)

同構(gòu)渲染是將同一套代碼先在服務(wù)端執(zhí)行一遍渲染靜態(tài)頁面，然后在客戶端執(zhí)行一遍完成事件綁定。
同構(gòu)渲染的優(yōu)勢是主要在于兩點：1、提高首屏速度，2、更好的SEO支持。
但因為我們不能在服務(wù)端渲染期間操作DOM，所以我們的一些代碼邏輯需要區(qū)分運行環(huán)境。
和我在同事之間的溝通中，SSR在頁面重新加載的時候先執(zhí)行fetch文件請求接口，在執(zhí)行的rander文件，瀏覽器就不會記錄下來。