對比分析--淺析SSR(服務端渲染)和SPA(客戶端渲染)

saucxs發表於2019-06-18
服務端客戶端

一、前言

C端專案重構成首屏服務端渲染（SSR：serve side render），對於重構成SSR，redux不是必須的。本文以vue為栗子的專案。

 

二、什麼是服務端渲染

將元件或頁面通過伺服器生成html字串，再傳送到瀏覽器，最後將靜態標記"混合"為客戶端上完全互動的應用程式。

我以weekly週報的登陸頁面為例

登陸頁沒有使用服務端渲染，請求到login頁面，返回的body為空，之後執行js將html結構注入到body中，結合css顯示出來

 

我的另外一個vue的nuxt寫的ssr渲染的songEagle，首頁返回的body是帶有html的。

 

三、SSR渲染和客戶端渲染的區別

1、SSR渲染的優勢：

（1）更利於SEO；

（2）更利於首屏渲染（特別是對於緩慢的網路情況或執行緩慢的裝置，內容更快到達）

2、SSR渲染的缺點：

（1）伺服器壓力大，考慮伺服器端負載。

（2）開發條件受限，只會執行到ComponentMount之前的生命週期鉤子，引用第三方庫不可用其他生命週期鉤子，引用庫選擇產生很大的限制。

（3）學習成本增大，需要學習構建設定和部署的更多要求。

 

四、耗時比較

1、資料請求

由服務端請求首屏資料，而不是客戶端請求首屏資料，這是“快”的一個主要原因。服務端在內網進行請求，資料響應速度快。客戶端在不同網路環境進行資料請求，且外網http請求開銷大，導致時間差。

 

2、HTML渲染

服務端渲染是先向後端伺服器請求資料，然後生成完整首屏html返回給瀏覽器；

而客戶端渲染是等js程式碼下載、載入、解析完成後再請求資料渲染，等待的過程頁面是什麼都沒有的，就是使用者看到的白屏。

就是服務端渲染不需要等待js程式碼下載完成並請求資料，就可以返回一個已有完整資料的首屏頁面。

 

五、原理

相對於SPA，vue增加了一些擴充套件工具，首先我們來看一下比較重要的一個工具vue-server-renderer，從名字就知道是在服務端渲染時候呼叫的

具體實現：

1、建立一個空專案 mkdir vuessr && cd vuessr

2、執行 npm init 進行初始化

3、安裝我們需要的依賴 cnpm install vue vue-server-renderer --save

4、建立index.js程式碼如下：

// 第 1 步：建立一個 Vue 例項
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()

// 第 3 步：將 Vue 例項渲染為 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

5、執行 node index.js 可以看到在控制檯輸出了

  <div data-server-rendered="true">Hello World</div>

 

六、總結

什麼是SSR？將元件或頁面通過伺服器生成html字串，再傳送到瀏覽器，最後將靜態標記"混合"為客戶端上完全互動的應用程式。SSR有更利於SEO和首屏渲染，同時也有缺點：伺服器壓力大，開發條件受限，只會執行ComponentMount之前的生命週期，第三庫使用受限，學習成本大。原理是靠vue-server-renderer這個庫的createRenderer()，然後呼叫rendererToString()。

 

【謝謝關注和閱讀，後續新的文章首發：sau交流學習社群：https://www.mwcxs.top/】

相關文章