為什么要寫本文呢，話說現在vue-ssr 官網上對 vue 服務端渲染的介紹已經很全面了，包括各種服務端渲染框架比如 Nuxt.js 、 集成 Koa 和vue-server-renderer 的 node.js 框架 egg.js，都有自己的官網和團隊在維護，文檔真是面面俱到功能強大，但是，我個人在剛開始看這些資料的時候，總是忍不住發起靈魂三問：“我是誰？我在哪？我在干什么？”，提前沒有相關知識的人開始學這些，肯定是要走一些彎路或者卡在某個點一段時間的，所以我想把我的學習經驗做下總結，一方面方便自己以后查閱，一方面也會在文中加一些針對官網上沒有細說的點的理解，希望能幫助你減少些學習成本，畢竟這是一個知識共享的時代嘛。本文不涉及到源碼解析，主要講解如何實現 vue 的服務端渲染，比較適合 vue-ssr 小白閱讀，下面我們進入正文：
先說下基本概念：
ssr 的全稱是 server side render，服務端渲染，vue ssr 的意思就是在服務端進行 vue 的渲染，直接對前端返回帶有數據，并且是渲染好的HTML頁面；而不是返回一個空的HTML頁面，再由vue 通過異步請求來獲取數據，再重新補充到頁面中。
這么做的最主要原因，就是搜索引擎優化，也就是SEO，這更利于網絡爬蟲去爬取和收集數據。
為什么這樣就有利于網絡爬蟲爬取呢？
這里簡單說一下爬蟲的爬取方式，爬蟲通過訪問 URL 獲取一個頁面后，會獲取當前HTML中已存在的數據，也可以理解為把拿到的 HTML 頁面轉為了字符串內容，然后解析、存儲這些內容，但是如果頁面中有些數據是通過異步請求獲得的，那么爬蟲是不會等待異步請求返回之后才結束對頁面數據的解析的，這樣就會沒有爬取到這部分數據，很不利于其他搜索引擎的收錄。
這也就是為什么單頁面網站是不具備良好的SEO效果的，因為單頁面返回的就是一個基本為空的 HTML 文件，里面就一個帶有ID的元素等待掛載而已，頁面的內容都是通過 js 后續生成的，比如這樣：
<!DOCTYPE html><html lang="en"> <head><title>Hello</title></head> <body><div id="app"></div></body> <script src="bundle.js"></script></html>
但對于很多公司來說，公司的產品是希望能被百度、谷歌等搜索引擎收錄之后，進行排名，進一步的被用戶搜索到，能更利于品牌的推廣、流量變現等操作，要實現這些，就必須保證產品的網頁是能夠被網絡爬蟲爬取到的，顯然一個完整的帶有全部數據的頁面更利于爬蟲的爬取，當然現在也有很多方法可以去實現針對頁面異步數據的爬取，github 上也開源了很多的爬蟲代碼，但是這顯然對于爬蟲來說更加的不友好、成本更高。
SSR 當然也是有著其他的好處的，比如首屏頁面加載速度更快，用戶等待時間更短等，其他更多概念可以查看官網 https://ssr.vuejs.org/zh/ ，這些官網上都有介紹。
代碼實現
下面我們結合官網上的代碼，做一下代碼實操，來加深下理解：
在官網中，提供了一個使用模塊 vue-server-renderer 簡單實現 vue 服務端渲染的示例：
新建一個文件夾vue-ssr-demo，進入其中執行如下命令：
// 安裝模塊 npm install vue vue-server-renderer --save
創建文件 server.js
// vue-ssr-demo/server.js 示例代碼//第一步，創建vue實例const Vue = require('vue');const app = new Vue({ template: "<div>hello world</div>"});//第二步，創建一個rendererconst renderer = require('vue-server-renderer').createRenderer();//第三步，將vue渲染為HTMLrenderer.renderToString(app, (err, html)=>{ if(err){ throw err; } console.log(html);});保存以上代碼后，在 vue-ssr-demo 文件夾下打開命令行工具，執行 node server.js 命令，可得到如下 HTML 內容：
➜ vue-ssr-demo node server.js<div data-server-rendered="true">hello world</div>
好，上面的例子中我們已經讓 vue 在服務端，也就是 node 環境下運行起來了，到這里其實已經實現了 vue 的服務端渲染了。
可是，實際項目中使用哪有這么簡單，起碼數據還沒渲染啊，那接下來我們看看如何渲染數據：
vue-ssr 渲染數據的方式有兩種，我們先看下第一種：
// server.jsconst data_vue = { word: 'Hello World!'};//第一步，創建vue實例const Vue = require('vue');//vue 實例化過程中插入數據const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>"});//第二步，創建一個rendererconst renderer = require('vue-server-renderer').createRenderer();//第三步，將vue渲染為HTMLrenderer.renderToString(app, (err, html)=>{ if(err){ throw err; } console.log(html);}); 第一種方式，在創建 vue 實例時，將需要的數據傳入 vue 的模板，使用方法與客戶端 vue 一樣；運行 server.js 結果如下，數據 data_vue 已經插入到 vue 模板里面了：
➜ vue-ssr-demo node server.js<div data-server-rendered="true">Hello World!</div>
第二種，模板插值，這里我們也直接先放代碼：
const data_vue = { word: 'Hello World!'};const data_tpl = { people: 'Hello People!'};//第一步，創建vue實例const Vue = require('vue');const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>"});//第二步，創建一個 renderer 實例const renderer = require('vue-server-renderer').createRenderer({ template: "<!--vue-ssr-outlet--><div>{{people}}</div>"});//第三步，將vue渲染為HTMLrenderer.renderToString(app, data_tpl, (err, html)=>{ if(err){ throw err; } console.log(html);});這里我們增加了數據 data_tpl，你會發現，在 renderToString 方法中傳入了這個參數，那么這個參數作用在哪里呢？這就要看下官網中關于 createRenderer 和 renderToString 方法的介紹了，
createRenderer: 使用（可選的）選項創建一個 Renderer 實例。const { createRenderer } = require('vue-server-renderer')const renderer = createRenderer({ / 選項 / })在選項中，就有一個參數叫 template，看官網怎么說的：
template: 為整個頁面的 HTML 提供一個模板。此模板應包含注釋 <!--vue-ssr-outlet-->，作為渲染應用程序內容的占位符。
為整個頁面的 HTML 提供一個模板。此模板應包含注釋 <!--vue-ssr-outlet-->，作為渲染應用程序內容的占位符。
模板還支持使用渲染上下文 (render context) 進行基本插值：
使用雙花括號 (double-mustache) 進行 HTML 轉義插值 (HTML-escaped interpolation)；
使用三花括號 (triple-mustache) 進行 HTML 不轉義插值 (non-HTML-escaped interpolation)。
根據介紹，在創建 renderer 實例時，可以通過 template 參數聲明一個模板，這個模板用來干嘛呢？就用來掛載 vue 模板渲染完成之后生成的 HTML。這里要注意一下，當創建 renderer 實例時沒有聲明 template 參數，那么默認渲染完就是 vue 模板生成的 HTML；當創建 renderer 實例時聲明了 template 參數，一定要在模板中增加一句注釋 “<!--vue-ssr-outlet-->” 作為 vue 模板插入的占位符，否則會報找不到插入模板位置的錯誤。
再次運行 server.js ，結果如下，vue 模板已成功插入，且 template 模板中的 {{people}} 變量也因在 renderToString 方法中第二位參數的傳入，顯示了數據：
vue-ssr-demo node server.js<div data-server-rendered="true">Hello World!</div><div>Hello People!</div>
如果我們把 template 換成一個 HTML 頁面的基本架構，來包裹 vue 模板，是不是就能得到一個完整頁面了呢？我們來試一下：
const data_vue = { word: 'Hello World!'};const data_tpl = { people: 'Hello People!'};//第一步，創建vue實例const Vue = require('vue');const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>"});//第二步，創建一個rendererconst renderer = require('vue-server-renderer').createRenderer({ template: `<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <!--vue-ssr-outlet--><div>{{people}}</div> </body> </html>`});//第三步，將vue渲染為HTMLrenderer.renderToString(app, data_tpl, (err, html)=>{ if(err){ throw err; } console.log(html);});運行 server.js ，結果如下，我們得到了一個完整的 HTML 頁面，且成功插入了數據：
vue-ssr-demo node server.js<!DOCTYPE html><html lang="en"> <head><title>Hello</title></head> <body> <div data-server-rendered="true">Hello World!</div><div>Hello People!</div> </body></html>
好，現在頁面生成了，該怎么顯示呢？這里我們借助下框架 Koa 實現，先來安裝：
npm install koa -S
然后修改 server.js ，如下：
const data_vue = { word: 'Hello World!'};const data_tpl = { people: 'Hello People!'};const Koa = require('koa');//創建 koa 實例const koa = new Koa();const Vue = require('vue');//創建一個rendererconst renderer = require('vue-server-renderer').createRenderer({ template: `<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <!--vue-ssr-outlet--><div>{{people}}</div> </body> </html>`});// 對于任何請求，app將調用該異步函數處理請求：koa.use(async (ctx, next) => { // await next(); //創建vue實例 const app = new Vue({ data: data_vue, template: "<div>{{word}}</div>" }); //將vue渲染為HTML const body = await renderer.renderToString(app, data_tpl); ctx.body = body;});// 在端口3001監聽:koa.listen(3001);console.log('app started at port 3001...');運行 server.js :
vue-ssr-demo node server.jsapp started at port 3001...
然后打開瀏覽器，輸入網址 http://localhost:3001/ ，即可看到運行后的效果。
這樣就實現了一個簡單的服務端渲染項目，但是我們在平常開發的時候，肯定不會這么簡單的去構建一個項目，必然會用到一些，比如打包、壓縮的工具，這篇就寫到這里，下一篇我們嘗試使用 webpack 來構建一個 vue 的服務端渲染項目。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
