1. 程式人生 > >服務端渲染和客戶端渲染

服務端渲染和客戶端渲染

好的 發送 bubuko 用戶評論 真的 圖片 搜索引擎優化 發出 再次

一、前言

主要涉及:

1、什麽是服務端渲染

2、什麽是客戶端渲染

3、兩者的區別,以及什麽場合使用

二、主要內容

1、客戶端請求

(1)用戶在瀏覽器輸入請求的地址例如:172.0.0.1:8080 到服務器

服務器接受到客戶端的請求拿到一個沒有被數據渲染的空頁面

技術分享圖片

(2)客戶端拿到服務端的空字符串頁面,然後從上往下開始執行裏面的代碼,當執行到script中有請求或者渲染等代碼時,就會對服務器再次發出請求

技術分享圖片

(3)服務端接收到客戶端的第二次請求,就把響應的數據發送給客戶端,然後客戶端再進行渲染

技術分享圖片

在客戶端渲染中, 客戶端至少要對服務端發送兩次請求

2、服務端渲染

(1)客戶端只發送一次請求,服務端直接返回給客戶端一個被渲染好的頁面,

技術分享圖片

3、如何辨別是客戶端渲染還是服務端渲染

比如,京東網站:

看看選中的內容是客戶端渲染還是服務端渲染

技術分享圖片

右擊查看網頁源代碼,ctrl+f查找:發現可以找到,說明為服務端渲染

技術分享圖片

一般的用戶評論為客戶端渲染。

三、總結

1、客戶端渲染需要對服務端進行兩次請求,響應的開銷較大,而服務端渲染只需要客戶端對服務端進行一次請求

2、如何查看一個網頁是客戶端渲染還是服務端渲染:可以通過右鍵查看源代碼的形式

客戶端渲染: 右擊查看源代碼找不到內容

服務段渲染:是可以在源代碼中找到內容的

3、網站一般都是用客戶端渲染和服務端渲染結合的形式

4、正真的網站既不是純異步,也不是純服務端渲染,而是兩者結合,

5、商品的商品列表采用的是服務端渲染,目的是為了SEO搜索引擎優化,而他的商品評論為了用戶體驗,用戶體驗更好

6、服務端渲染可以被爬蟲抓取到,客戶端渲染爬蟲抓取不到

服務端渲染和客戶端渲染