本文主要是從三個(gè)方面學(xué)習(xí)服務(wù)端渲染
服務(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）
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插入到頁(yè)面中去。
1.2 利弊
好處：網(wǎng)絡(luò)傳輸數(shù)據(jù)量小、減少了服務(wù)端壓力、前后端分離、局部刷新、無需每次請(qǐng)求完整頁(yè)面、交互好可實(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)求頁(yè)面時(shí)，由服務(wù)端把需要的組件或頁(yè)面渲染成HTML字符串，然后把它返回給客戶端。客戶端拿到手的，是可以直接渲染然后呈現(xiàn)給用戶的HTML內(nèi)容，不需要為了成為DOM內(nèi)容自己再去跑一遍JS代碼。使用服務(wù)端渲染的網(wǎng)站，可以說是‘所見即所得’，頁(yè)面上呈現(xiàn)的內(nèi)容，我們?cè)趆tml源文件里也能找到。
2.2利弊
好處：首屏渲染快、利于SEO、可以生成緩存片段，生成靜態(tài)化文件、節(jié)能（對(duì)比客戶端渲染的耗電）
壞處：用戶體驗(yàn)較差、不容易維護(hù)，通常前端改了部分html或者css，后端也需要修改。
3、對(duì)比
其實(shí)前后端的渲染本質(zhì)是一樣的，都是字符串的拼接，將數(shù)據(jù)渲染進(jìn)一些固定格式的html代碼中形成最終的html展示在用戶頁(yè)面上。因?yàn)樽址钠唇颖厝粫?huì)損耗一些性能資源。
如果在服務(wù)端渲染，那么消耗的就是server端的性能。
如果是在客戶端渲染，常見的手段，比如是直接生成DOM插入到html中，或者是使用一些前端的模塊引擎等。他們初次渲染的原理大多數(shù)是將原h(huán)tml中的數(shù)據(jù)標(biāo)記替換。
二、為什么使用服務(wù)端渲染，它解決的是什么問題
簡(jiǎn)單總結(jié)起來就是兩點(diǎn)：
首屏加載快
相比于加載單頁(yè)應(yīng)用，我只需要加載當(dāng)前內(nèi)容的內(nèi)容，而不需要像React或者Vue一樣加載全部的js文件
SEO優(yōu)化
對(duì)于單頁(yè)應(yīng)用，搜索引擎并不能收錄到ajax爬取數(shù)據(jù)之后然后再動(dòng)態(tài)js渲染出來的頁(yè)面。
三、什么情況下使用服務(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ù)端渲染并非完全之策，關(guān)于首屏渲染體驗(yàn)以及SEO的優(yōu)化方案很多，在不使用服務(wù)端渲染這個(gè)操作下，我們最好的處理方式就是找替代優(yōu)化方案。
關(guān)于在server端還是在browser端渲染的選擇，更多的是要看業(yè)務(wù)場(chǎng)景。
