服務端渲染(SSR) VS 客戶端渲染

什麼是服務端渲染

服務端渲染(SSR:server side render)

服務端拿數據進行解析渲染,直接生成html片段返回給前端。具體用法也有很多種比如:

  • 傳統的服務端模板引擎渲染整個頁面
  • 服務渲染生成html代碼塊, 前端 AJAX 獲取然後js動態添加

服務端渲染的優勢

1. 更利於SEO。

不同爬蟲工作原理類似,只會爬取源碼,不會執行網站的任何腳本(Google除外,據說Googlebot可以運行javaScript)。使用了React或者其它MVVM框架之後,頁面大多數DOM元素都是在客戶端根據js動態生成,可供爬蟲抓取分析的內容大大減少(如圖一)。另外,瀏覽器爬蟲不會等待我們的數據完成之後再去抓取我們的頁面數據。服務端渲染返回給客戶端的是已經獲取了異步數據並執行JavaScript腳本的最終HTML,網絡爬中就可以抓取到完整頁面的信息。

2. 更利於首屏渲染

首屏的渲染是node發送過來的html字符串,並不依賴於js文件了,這就會使用戶更快的看到頁面的內容。尤其是針對大型單頁應用,打包後文件體積比較大,普通客戶端渲染加載所有所需文件時間較長,首頁就會有一個很長的白屏等待時間

 

服務端渲染的劣勢

1. 服務端壓力較大

本來是通過客戶端完成渲染,現在統一到服務端node服務去做。尤其是高併發訪問的情況,會大量佔用服務端CPU資源;

2. 開發條件受限

在服務端渲染中,只會執行到componentDidMount之前的生命週期鉤子,因此項目引用的第三方的庫也不可用其它生命週期鉤子,這對引用庫的選擇產生了很大的限制;

 

客戶端渲染

服務端渲染是先向後端服務器請求數據,然後生成完整首屏html返回給瀏覽器;

客戶端渲染是等js代碼下載、加載、解析完成後再請求數據渲染,等待的過程頁面是什麼都沒有的,就是用戶看到的白屏。

服務端渲染不需要等待js代碼下載完成並請求數據,就可以返回一個已有完整數據的首屏頁面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章