本篇文章為大家帶來了客戶端渲染CSR以及服務端渲染SSR的相關知識,希望對大家有幫助。
客戶端渲染(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>Hello World!</h1> ` }) app.use(router.routes()) app.listen(3000, () => { console.log("koa server listening on 3000") })
透過上述服務端傳回的html字串到客戶端直接顯示成了對應的網頁,這樣客戶端就不用再去多次不斷的請求服務端載入資料了
因此SSR的出現就是可以解決了傳統CSR存在的這種弊端,因為此時客戶端請求拿到的就將是我們服務端渲染好的html,這樣對於SEO也足夠的友好。
更多程式相關知識,請造訪:程式設計入門! !
以上是深入淺析客戶端渲染(CSR)和服務端渲染(SSR)的詳細內容。更多資訊請關注PHP中文網其他相關文章!