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

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

前序：簡述SEO

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

客戶端渲染：

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

  

服務端渲染：

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

  

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

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 id="Hello-World">Hello World!</h1>
		  
		
	`
})
app.use(router.routes())

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

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

服務端渲染VS 用戶端渲染

• CSR與SSR最大的差別在於CSR進行頁面的渲染是服務端直接傳回HTML給客戶端渲染顯示，而SSR則是將頁面的渲染交給了服務端的JS執行。
• **傳統的CSR的弊端=> **

1. #由於直接返回HTML到客戶端渲染，客戶端需要多次發送AJAX到服務端拉取JS程式碼執行，導致了頁面的首屏載入速度會變慢。
2. 對於SEO是不友善的，因為我們客戶端是從服務端拉取JS過來執行的，而搜尋引擎的爬蟲只能辨識html結構的內容，對於js程式碼則無法進行辨識。

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

更多程式相關知識，請造訪：程式設計入門！ ！

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