服務端渲染的探索與實踐 · KerasMall開發文檔

服務端渲染(SSR)近兩年炒得很火熱，相信各位同學對這個名詞多少有所耳聞，本節我們將圍繞“是什么”（服務端渲染的運行機制）、“為什么”（服務端渲染解決了什么性能問題）、“怎么做”（服務端渲染的應用實例與使用場景）這三個點，對服務端渲染進行探索。服務端渲染是一個相對的概念，它的對立面是“客戶端渲染”。在運行機制解析方部分，我們會借力客戶端渲染的概念，來幫大家理解服務端渲染的工作方式，基于對工作方式的了解，再去深挖它的原理與優勢。任務知識點都不是“一座孤島”，服務端渲染的實踐往往與當下流行的前端技術（譬如VUE,REACT REDUX 等）緊密結合，本節下半場將以REACT 和VUE下的服務端渲染實現為例，為大家呈現一個完整的SSR實現過程。服務端渲染的運行機制相對于服務端沉浸，同學們普遍對客戶端渲染接受度更高一些，所以我們先從大家喜聞樂見的客戶端渲染說起。客戶端渲染客戶關渲染模式下，服務端會把渲染需要的靜態文件發送給客戶端，客戶端加載過來之后，自己在瀏覽器里跑一遍JS,根據JS的運行結果，生成相應的DOM,這種特性使得客戶端渲染的源代碼總是特別簡潔，往往是這個德行： ``` <!doctype html> <html> <head> <title>我是客戶端渲染的頁面</title> </head> <body> <div id='root'></div> <script src='index.js'></script> </body> </html> ``` 根節點下到底是什么內容呢？你不知道，我不知道，只有瀏覽器把 index.js 跑過一遍后才知道，這就是典型的客戶端渲染。頁面上呈現的內容，你在html源文件里找不到的--這正是它的特點服務端渲染服務端渲染的模式下，當用戶第一次請求頁面時，由服務器把需要的組件或頁面渲染成HTML字符串，然后把它返回給客戶端，客戶端拿到手的，是可以直接渲染然后呈現給用戶的HTML內容，不需要為了生成DOM內容自己再去跑一遍JS代碼。使用服務端渲染的網站，可以說是“所見即所得”，頁面上呈現的內容，我們在html源文件里也能找到。服務端渲染解決了什么性能問題事實上，很多網站是出于效益的考慮才啟用服務端渲染，性能倒是在其次。假設A網站頁面中有一個關鍵字叫“前端性能優化”，這個關鍵字中JS 代碼跑過一遍后添加到HMTL頁面中的，那么客戶端渲染模式下，我們在搜索引擎搜索這個關鍵字，是找不到A網站的--搜索引擎只會查找現成的內容，不會幫你跑JS代碼。A網站的運營方見此情形，感到很頭大，搜索引擎搜不出來，用戶找不到我們，誰還會用我的網站呢？為了把“現成的內容”拿給搜索引擎看，A網站不得不啟用服務端渲染。但性能在其次，不代表性能不重要，服務端渲染解決了一個非常關鍵的性能問題--首屏加載速度過慢。在客戶端渲染模式下，我們除了加載HTML，還要等渲染所需要的這部分JS加載完，之后還得把這部分JS在瀏覽器上再跑一遍。這一切都是發生在用戶點擊了我們的鏈接之后的事情，在這個過程結束之前，用戶始終見不到我們網頁的廬山真面目，也就是說用戶一直在等！相比之下，服務端渲染模式下，服務器給客戶端的已經是一個直接可以拿來呈現給用戶的網頁，中間環節早在服務端就幫我們做掉了，用戶豈不“美滋滋”？ VUE實現思路該示例直接將VUE實例整合進了服務端的入口文件中： ``` const Vue = require('vue') // 創建一個express 應用 const server = require('express')() // 提取出 render 實例 const renderer = require('vue-server-renderer').createRenderer() server.get('*',(req,res) => { // 編寫VUE 實例（虛擬DOM節點） const app = new Vue({ data:{ url: req.url }, template: `<div>訪問的 url 是 {{ url }}</div>` }) // renderToString 是把 vue 實例轉化為真實 dom 的關鍵方法 renderer.renderToString(app,(err,html) => { if(err){ res.status(500).end('Interal Server Error') return } // 把渲染出來的真實dom 字符串插入HTML模板中 res.end(` <!doctype html> <html lang="en"> <head><title>hello</title></head> <body>${html}</body> </html> `) }) }) ```