這篇文章給大家介紹如何深入淺析CSR和SSR，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),寧鄉(xiāng)企業(yè)網(wǎng)站建設(shè),寧鄉(xiāng)品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧鄉(xiāng)網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寧鄉(xiāng)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

前序：簡述SEO

• SEO(Search Engine Optimization)是指搜索引擎優(yōu)化，通俗說就是總結(jié)搜索引擎的檢索排名規(guī)則，合理的優(yōu)化網(wǎng)站，使得你的網(wǎng)站在百度或者谷歌這樣的搜索引擎中的排名進步，讓更多的用戶能夠訪問到你的網(wǎng)站。

客戶端渲染：

• 客戶端渲染（Client Side Render）,就是用戶在通過URL請求訪問網(wǎng)站時，服務(wù)器端返回給的是html文檔，再讓瀏覽器去解析渲染展示頁面，其中的js，css,圖片文件等均需再次發(fā)送請求去服務(wù)端請求數(shù)據(jù)加載。

  

服務(wù)端渲染：

• 與客戶端渲染相對應(yīng)的就是服務(wù)器端渲染(SSR),在服務(wù)端看來，所有的前端渲染顯示頁面都是一串字符串，包括html, js, css都是如此，服務(wù)端渲染即是將一段處理好后的html字符串返回給客戶端，而在返回的這個html字符串中，服務(wù)端知識將需要展示到html的服務(wù)端數(shù)據(jù)等信息直接寫入到了這段html字符串中讓客戶端瀏覽器能夠直接對其進行顯示。

  

這里簡單示例一個服務(wù)端渲染的例子：

import Koa from 'koa'
import Router from 'koa-router'
const app = new Koa()
const router = new Router()
router.get('/', async (ctx) => {
	ctx.body = `		
		  
		    
		  
		  
		    
Hello World!
		  
		
	`
})
app.use(router.routes())

app.listen(3000, () => {
	console.log("koa server listening on 3000")
})

通過上述服務(wù)端返回的html字符串到客戶端直接顯示成了相應(yīng)的網(wǎng)頁，這樣客戶端不用再去多次不斷的請求服務(wù)端加載數(shù)據(jù)了

服務(wù)端渲染 VS 客戶端渲染

• CSR和SSR最大的區(qū)別在于CSR進行頁面的渲染是服務(wù)端直接返回HTML給客戶端渲染顯示，而SSR則是將頁面的渲染交給了服務(wù)端的JS執(zhí)行。

• **傳統(tǒng)的CSR的弊端 => **

1. 由于直接返回HTML到客戶端進行渲染，客戶端需要多次發(fā)送AJAX到服務(wù)端拉取JS代碼執(zhí)行，導(dǎo)致了頁面的首屏加載速度會變慢。

2. 對于SEO是不友好的，因為我們客戶端是從服務(wù)端拉取JS過來執(zhí)行的，而搜索引擎的爬蟲只能識別html結(jié)構(gòu)的內(nèi)容，對于js代碼則不能夠進行識別。

因此SSR的出現(xiàn)就是可以解決了傳統(tǒng)CSR存在的這種弊端，因為此時客戶端請求拿到的就將是我們服務(wù)端渲染好的html,這樣對于SEO也足夠的友好。

關(guān)于如何深入淺析CSR和SSR就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。