客戶端渲染和服務端渲染的區別

2022-02-18 22:25:22 字數 1190 閱讀 3210

服務端渲染:dom樹在服務端生成,然後返回給前端。

客戶端渲染(ssr):前端去後端取資料生成dom樹。

服務端渲染的優點

1、盡量不占用前端的資源,前端這塊耗時少,速度快。

2、有利於seo優化,因為在後端有完整的html頁面,所以爬蟲更容易爬取資訊。

服務端渲染的缺點

1、不利於前後端分離,開發的效率降低了。

2、對html的解析,對前端來說加快了速度,但是加大了伺服器的壓力。

客戶端渲染的優點

1、前後端分離,開發效率高。

2、使用者體驗更好,我們將**做成spa(單頁面應用)或者部分內容做成spa,當使用者點選時,不會形成頻繁的跳轉。

客戶端渲染的缺點

1、前端響應速度慢,特別是首屏,這樣使用者是受不了的。

2、不利於seo優化,因為爬蟲不認識spa,所以它只是記錄了乙個頁面。

服務端和客戶端渲染的區別

1、二者本質的區別:是誰來完成了html的完整拼接,服務端渲染是在服務端生成dom樹,客戶端渲染是在客戶端生成dom樹。

2、響應速度:服務端渲染會加快頁面的響應速度,客戶端渲染頁面的響應速度慢。

3、seo優化:服務端渲染因為是多個頁面,更有利於爬蟲爬取資訊,客戶端渲染不利於seo優化。

4、開發效率:服務端渲染邏輯分離的不好,不利於前後端分離,開發效率低,客戶端渲染是採用前後端分離的方式開發,效率更高,也是大部分業務採取的渲染方式。

直觀的區分服務端渲染和客戶端渲染:

原始碼裡如果能找到前端頁面中的內容文字,那就是在服務端構建的dom,就是服務端渲染,反之是客戶端渲染。

應該使用服務端渲染還是客戶端渲染:

我們要根據業務場景去選擇渲染的方式。

如果是企業級**,主要功能是頁面展示,它沒有複雜的互動,並且需要良好的seo,那我們應該使用服務端渲染。

如果是後台管理頁面,互動性很強,它不需要考慮到seo,那我們應該使用客戶端渲染。

具體使用哪種渲染方式也不是絕對的,現在很多**使用服務端渲染和客戶端渲染結合的方式:首屏使用服務端渲染,其他頁面使用客戶端渲染。這樣可以保證首屏的載入速度,也完成了前後端分離。

Vue客戶端渲染和服務端渲染異同

相信會比一般部落格講的更為清楚。官方教程同時也提供了demo,位址如下 該demo功能齊全,需要的小夥伴可以直接clone下來使用。如果想要使用更高層的服務渲染框架,可以了解下nuxt.js,連線位址如下 上面幾個位址相信對想要學習或了解vue服務端渲染的同學很有幫助,下面就開始講下vue客戶端渲染...

服務端渲染客戶端渲染的區別

首先,介紹一下 spa seo ssr 三者的區別 seo search engine optimization 搜尋引擎優化,利用搜尋引擎的規則提高 在有關搜尋引擎內的自然排名。我們之前說 spa 單頁面應用,通過 ajax 獲取資料,這就難保證我們的頁面能被搜尋引擎收到。並且有一些搜尋引擎不支援...

服務端渲染和客戶端渲染區別?

首先,介紹一下 spa seo ssr 三者的區別 seo search engine optimization 搜尋引擎優化,利用搜尋引擎的規則提高 在有關搜尋引擎內的自然排名。我們之前說 spa 單頁面應用,通過 ajax 獲取資料,這就難保證我們的頁面能被搜尋引擎收到。並且有一些搜尋引擎不支援...