首頁  >  文章  >  web前端  >  深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

WBOY
WBOY轉載
2022-01-24 17:46:162504瀏覽

本篇文章為大家帶來了客戶端渲染CSR以及服務端渲染SSR的相關知識,希望對大家有幫助。

深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

前序:簡述SEO

  • #SEO(Search Engine Optimization)是指搜尋引擎優化,通俗說就是總結搜尋引擎的檢索排名規則,合理的優化網站,使得你的網站在百度或谷歌這樣的搜尋引擎中的排名進步,讓更多的用戶能夠訪問你的網站。

客戶端渲染:

  • 客戶端渲染(Client Side Render),就是使用者在透過URL請求存取網站時,伺服器端返回給的是html文檔,再讓瀏覽器解析渲染展示頁面,其中的js,css,圖片文件等均需再次發送請求去服務端請求資料載入。

    深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

服務端渲染:

  • 與用戶端渲染相對應的就是伺服器端渲染(SSR),在服務端看來,所有的前端渲染顯示頁面都是一串字串,包括html, js, css都是如此,服務端渲染即是將一段處理好後的html字符字串傳回給客戶端,而在傳回的這個html字串中,服務端知識將需要展示到html的服務端資料等資訊直接寫入到了這段html字串中讓客戶端瀏覽器能夠直接對其進行顯示。

    深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

這裡簡單範例一個服務端渲染的範例:

import Koa from 'koa'
import Router from 'koa-router'
const app = new Koa()
const router = new Router()
router.get('/', async (ctx) => {
	ctx.body = `		
		  
		    <title>服务端渲染返回</title>
		  
		  
		    <h1>Hello World!</h1>
		  
		
	`
})
app.use(router.routes())

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

透過上述服務端傳回的html字串到客戶端直接顯示成了對應的網頁,這樣客戶端就不用再去多次不斷的請求服務端載入資料了

深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

服務端渲染VS 用戶端渲染
  • CSR與SSR最大的差別在於CSR進行頁面的渲染是服務端直接傳回HTML給客戶端渲染顯示,而SSR則是將頁面的渲染交給了服務端的JS執行。
  • **傳統的CSR的弊端=> **
  1. #由於直接返回HTML到客戶端渲染,客戶端需要多次發送AJAX到服務端拉取JS程式碼執行,導致了頁面的首屏載入速度會變慢。
  2. 對於SEO是不友善的,因為我們客戶端是從服務端拉取JS過來執行的,而搜尋引擎的爬蟲只能辨識html結構的內容,對於js程式碼則無法進行辨識。

因此SSR的出現就是可以解決了傳統CSR存在的這種弊端,因為此時客戶端請求拿到的就將是我們服務端渲染好的html,這樣對於SEO也足夠的友好。

深入淺析客戶端渲染(CSR)和服務端渲染(SSR)

更多程式相關知識,請造訪:程式設計入門! !

以上是深入淺析客戶端渲染(CSR)和服務端渲染(SSR)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除