本文主要是從三個方面學習服務端渲染

服務端渲染是什么？什么是服務端渲染？（服務端渲染的運行機制）

為什么使用服務端渲染？服務端渲染解決了什么問題？

什么情況下使用服務端渲染？（服務端渲染的應用實例與使用場景）

一、概念

首先，在說服務端渲染之前我們先對渲染這個概念有一個大概的了解。

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

客戶端渲染（CSR）VS服務端渲染（SSR）

1、客戶端渲染

1.1? 概念

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

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

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

1.2 利弊

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

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

2.服務端渲染

2.1 概念

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

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

2.2利弊

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

壞處：用戶體驗較差、不容易維護，通常前端改了部分html或者css，后端也需要修改。

3、對比

其實前后端的渲染本質(zhì)是一樣的，都是字符串的拼接，將數(shù)據(jù)渲染進一些固定格式的html代碼中形成最終的html展示在用戶頁面上。因為字符串的拼接必然會損耗一些性能資源。

如果在服務端渲染，那么消耗的就是server端的性能。

如果是在客戶端渲染，常見的手段，比如是直接生成DOM插入到html中，或者是使用一些前端的模塊引擎等。他們初次渲染的原理大多數(shù)是將原h(huán)tml中的數(shù)據(jù)標記替換。

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

簡單總結起來就是兩點：

首屏加載快

相比于加載單頁應用，我只需要加載當前內(nèi)容的內(nèi)容，而不需要像React或者Vue一樣加載全部的js文件

SEO優(yōu)化

對于單頁應用，搜索引擎并不能收錄到ajax爬取數(shù)據(jù)之后然后再動態(tài)js渲染出來的頁面。

三、什么情況下使用服務端渲染？

通過服務端渲染的概念以及它的兩個特點：首屏在家速度快、SEO優(yōu)化。

服務端渲染其實就是由瀏覽器做的一些事情，我們放到了服務端去做，那么對于掘金、簡書、CSDN、知乎等網(wǎng)站的搭建，這種在網(wǎng)上一搜搜出一堆東西的網(wǎng)站。SEO做的很好，應該多少都用到服務端渲染了吧？當然，做服務端渲染成本是高昂的。

vue全家桶或者react全家桶，都是推薦通過服務端渲染來實現(xiàn)路由的。

服務端渲染并非完全之策，關于首屏渲染體驗以及SEO的優(yōu)化方案很多，在不使用服務端渲染這個操作下，我們最好的處理方式就是找替代優(yōu)化方案。

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