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

1、前言

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

 

2、什麼是服務端渲染

將組件或頁面經過服務器生成html字符串，再發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。

我以weekly週報的登錄頁面爲例

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

 

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

 

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

一、SSR渲染的優點：

（1）更利於SEO；

（2）更利於首屏渲染（特別是對於緩慢的網絡狀況或運行緩慢的設備，內容更快到達）

二、SSR渲染的缺點：

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

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

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

 

4、耗時比較

一、數據請求

由服務端請求首屏數據，而不是客戶端請求首屏數據，這是「快」的一個主要緣由。服務端在內網進行請求，數據響應速度快。客戶端在不一樣網絡環境進行數據請求，且外網http請求開銷大，致使時間差。

 

二、HTML渲染

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

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

就是服務端渲染不須要等待js代碼下載完成並請求數據，就能夠返回一個已有完整數據的首屏頁面。

 

5、原理

相對於SPA，vue增長了一些擴展工具，首先咱們來看一下比較重要的一個工具vue-server-renderer，從名字就知道是在服務端渲染時候調用的

具體實現：

一、建立一個空項目 mkdir vuessr && cd vuessr

二、運行 npm init 進行初始化

三、安裝咱們須要的依賴 cnpm install vue vue-server-renderer --save

四、建立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> })

五、運行 node index.js 能夠看到在控制檯輸出了

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

 

6、總結

什麼是SSR？將組件或頁面經過服務器生成html字符串，再發送到瀏覽器，最後將靜態標記"混合"爲客戶端上徹底交互的應用程序。SSR有更利於SEO和首屏渲染，同時也有缺點：服務器壓力大，開發條件受限，只會執行ComponentMount以前的生命週期，第三庫使用受限，學習成本大。原理是靠vue-server-renderer這個庫的createRenderer()，而後調用rendererToString()。

 

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