導(dǎo)讀

本文主要是從三個方面學(xué)習(xí)服務(wù)端渲染，內(nèi)容整理自多個博客。

• 服務(wù)端渲染是什么？什么是服務(wù)端渲染？（服務(wù)端渲染的運(yùn)行機(jī)制）
• 為什么使用服務(wù)端渲染？服務(wù)端渲染解決了什么問題？
• 什么情況下使用服務(wù)端渲染？（服務(wù)端渲染的應(yīng)用實(shí)例與使用場景）

一、概念

首先，說到服務(wù)端渲染我們要先對渲染這個概念有一個大概的了解

渲染：就是將數(shù)據(jù)和模版組裝成html

客戶端渲染（CSR）VS服務(wù)端渲染(SSR)

那么，為了更好的理解服務(wù)端渲染，我們也很有必要去了解一下客戶端渲染。將客戶端渲染與服務(wù)端渲染同時進(jìn)行學(xué)習(xí)理解。

1.客戶端渲染

1.1概念

解釋一：客戶端渲染模式下，服務(wù)端把渲染的靜態(tài)文件給到客戶端，客戶端拿到服務(wù)端發(fā)送過來的文件自己跑一遍js，根據(jù)JS運(yùn)行結(jié)果，生成相應(yīng)DOM，然后渲染給用戶。

解釋二：html 僅僅作為靜態(tài)文件，客戶端在請求時，服務(wù)端不做任何處理，直接以原文件的形式返回給客戶端客戶端，然后根據(jù) html 上的 JavaScript，生成 DOM 插入 html。

延伸：前端渲染的方式起源于JavaScript的興起，ajax的大熱更是讓前端渲染更加成熟，前端渲染真正意義上的實(shí)現(xiàn)了前后端分離，前端只專注于UI的開發(fā)，后端只專注于邏輯的開發(fā)，前后端交互只通過約定好的API來交互，后端提供json數(shù)據(jù)，前端循環(huán)json生成DOM插入到頁面中去。

1.2.利弊

好處： 網(wǎng)絡(luò)傳輸數(shù)據(jù)量小、減少了服務(wù)器壓力、前后端分離、局部刷新，無需每次請求完整頁面、交互好可實(shí)現(xiàn)各種效果

壞處：不利于SEO、爬蟲看不到完整的程序源碼、首屏渲染慢（渲染前需要下載一堆js和css等）

2.服務(wù)端渲染

2.1.概念

解釋一：服務(wù)端在返回 html 之前，在特定的區(qū)域，符號里用數(shù)據(jù)填充，再給客戶端，客戶端只負(fù)責(zé)解析 HTML 。

解釋二：服務(wù)端渲染的模式下，當(dāng)用戶第一次請求頁面時，由服務(wù)器把需要的組件或頁面渲染成 HTML 字符串，然后把它返回給客戶端。客戶端拿到手的，是可以直接渲染然后呈現(xiàn)給用戶的 HTML 內(nèi)容，不需要為了生成 DOM 內(nèi)容自己再去跑一遍 JS 代碼。使用服務(wù)端渲染的網(wǎng)站，可以說是“所見即所得”，頁面上呈現(xiàn)的內(nèi)容，我們在 html 源文件里也能找到。

2.2.利弊

好處:首屏渲染快、利于SEO、可以生成緩存片段，生成靜態(tài)化文件、節(jié)能（對比客戶端渲染的耗電）

壞處:用戶體驗(yàn)較差、不容易維護(hù)，通常前端改了部分html或者css，后端也需要修改。

3.對比

其實(shí)前后端的渲染本質(zhì)是一樣的，都是字符串的拼接，將數(shù)據(jù)渲染進(jìn)一些固定格式的html代碼中形成最終的html展示在用戶頁面上。 因?yàn)樽址钠唇颖厝粫p耗一些性能資源。
如果在服務(wù)器端渲染，那么消耗的就是server端的性能。
如果是在客戶端渲染，常見的手段，比如是直接生成DOM插入到html 中，或者是使用一些前端的模板引擎等。他們初次渲染的原理大多是將原h(huán)tml中的數(shù)據(jù)標(biāo)記（例如{{text}}）替換。

二、為什么使用服務(wù)端渲染，它解決的是什么問題

簡單總結(jié)起來就是兩點(diǎn)：

首屏加載快
相比于加載單頁應(yīng)用，我只需要加載當(dāng)前頁面的內(nèi)容，而不需要像 React 或者 Vue 一樣加載全部的 js 文件
SEO 優(yōu)化
對于單頁應(yīng)用，搜索引擎并不能收錄到 ajax 爬取數(shù)據(jù)之后然后再動態(tài) js 渲染出來的頁面。

為了更便于理解，下面幾段話摘自掘金小冊：

事實(shí)上，很多網(wǎng)站是出于效益的考慮才啟用服務(wù)端渲染，性能倒是在其次。
假設(shè) A 網(wǎng)站頁面中有一個關(guān)鍵字叫“前端性能優(yōu)化”，這個關(guān)鍵字是 JS 代碼跑過一遍后添加到 HTML 頁面中的。那么客戶端渲染模式下，我們在搜索引擎搜索這個關(guān)鍵字，是找不到 A 網(wǎng)站的——搜索引擎只會查找現(xiàn)成的內(nèi)容，不會幫你跑 JS 代碼。A 網(wǎng)站的運(yùn)營方見此情形，感到很頭大：搜索引擎搜不出來，用戶找不到我們，誰還會用我的網(wǎng)站呢？為了把“現(xiàn)成的內(nèi)容”拿給搜索引擎看，A 網(wǎng)站不得不啟用服務(wù)端渲染。
但性能在其次，不代表性能不重要。服務(wù)端渲染解決了一個非常關(guān)鍵的性能問題——首屏加載速度過慢。在客戶端渲染模式下，我們除了加載 HTML，還要等渲染所需的這部分 JS 加載完，之后還得把這部分 JS 在瀏覽器上再跑一遍。這一切都是發(fā)生在用戶點(diǎn)擊了我們的鏈接之后的事情，在這個過程結(jié)束之前，用戶始終見不到我們網(wǎng)頁的廬山真面目，也就是說用戶一直在等！相比之下，服務(wù)端渲染模式下，服務(wù)器給到客戶端的已經(jīng)是一個直接可以拿來呈現(xiàn)給用戶的網(wǎng)頁，中間環(huán)節(jié)早在服務(wù)端就幫我們做掉了，用戶豈不“美滋滋”？

三、 什么情況下使用服務(wù)端渲染？

通過服務(wù)端渲染的概念以及它的兩個特點(diǎn)：首屏加載速度快、SEO優(yōu)化。
我們知道，服務(wù)端渲染其實(shí)就是由瀏覽器做的一些事情，我們放到了服務(wù)端去做，那么對于掘金、簡書、CSDN、知乎等網(wǎng)站的搭建，這種在網(wǎng)上一搜搜出一堆東西的網(wǎng)站，SEO做的很好，應(yīng)該多少都用到服務(wù)端渲染了吧？當(dāng)然，做服務(wù)端渲染成本是高昂的。
vue全家桶或者react全家桶，都是推薦通過服務(wù)端渲染來實(shí)現(xiàn)路由的。
服務(wù)端渲染并非完全之策（服務(wù)器稀少而寶貴），關(guān)于首屏渲染體驗(yàn)以及SEO的優(yōu)化方案很多，在不使用服務(wù)端渲染這個操作下，我們最好的處理方式就是找尋替代優(yōu)化方案。

關(guān)于在server端還是在browser端渲染的選擇，更多的是要看業(yè)務(wù)場景。

相關(guān)文章延伸閱讀

https://blog.csdn.net/b9q8e64lo6mm/article/details/79418969 （力薦）

更多內(nèi)容，請?jiān)L問的我的個人博客：https://liugezhou.github.io/blog.
您也可以關(guān)注我的個人公眾號：【W(wǎng)akaka】