服務端渲染: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,那我們應該使用客戶端渲染。
具體使用哪種渲染方式也不是絕對的,現在很多網站使用服務端渲染和客戶端渲染結合的方式:首屏使用服務端渲染,其他頁面使用客戶端渲染。這樣可以保證首屏的加載速度,也完成了前后端分離。