導(dǎo)讀

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

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

一、概念

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

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

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

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

1.客戶端渲染

1.1概念

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

解釋二：html 僅僅作為靜態(tài)文件，客戶端在請(qǐng)求時(shí)旱爆，服務(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ù)器壓力咙边、前后端分離次员、局部刷新，無需每次請(qǐng)求完整頁面淑蔚、交互好可實(shí)現(xiàn)各種效果

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

2.服務(wù)端渲染

2.1.概念

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

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

2.2.利弊

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

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

3.對(duì)比

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

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

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

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

為了更便于理解哑蔫，下面幾段話摘自掘金小冊(cè)：

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

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

通過服務(wù)端渲染的概念以及它的兩個(gè)特點(diǎn)：首屏加載速度快、SEO優(yōu)化刷喜。
我們知道，服務(wù)端渲染其實(shí)就是由瀏覽器做的一些事情掖疮，我們放到了服務(wù)端去做颗祝，那么對(duì)于掘金浊闪、簡(jiǎn)書螺戳、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ù)端渲染這個(gè)操作下泥畅，我們最好的處理方式就是找尋替代優(yōu)化方案。

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

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

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

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