導(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】