什么是服務端渲染SSR？

把Vue組件渲染為服務端的HTML字符串，將他們直接發(fā)送到瀏覽器，最后將靜態(tài)標記 “混合” 為客戶端上完全交互的應用程序。

為什么使用服務器渲染SSR？

1：更好的SEO，搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面

2：更快的內容到達時間 ( time - to - content )

服務端渲染做一些權衡

1：開發(fā)條件所限，Vue組件的某些生命周期鉤子函數不能使用

2：開發(fā)環(huán)境

3：更多的服務器端負載，在Node.js中渲染完整的應用程序，顯然會比僅僅提供靜態(tài)文件的Sever 更加大量占用 CPU 資源（CPU - intensive - CPU密集），因此如果你預料在高流量環(huán)境（high - traffic）下使用，請準備相應的服務器負載，并明智的采用緩存策略。

安裝所需模塊

搭建服務器環(huán)境

npm i express -S

安裝服務端渲染模塊

npm install vue-server-renderer --save

安裝vue模塊

npm i vue -S

安裝vue-route路由模塊

npm i vue-router -S

本地 配置 4000 端口查看頁面： http://localhost:4000/

查看代碼結構訪問：view-source:http://localhost:4000/

服務端渲染模塊使用

創(chuàng)建rendere實例

createRenderer({

template：模版文件

})

將實例解析為模版字符串

renderer.renderToString(vm)返回一個promise對象

在模版中插入解析后的html字符串

創(chuàng)建新的vue實例

為每個請求創(chuàng)建一個新的根 Vue 實例、

在多個請求之間使用一個共享實例很容易導致交叉請求狀態(tài)污染

服務端和客戶端的配置

服務端配置

使用webpack的自定義插件，server bundle將生成為可傳遞到 bundle renderer 的特殊json文件，JSON文件記錄了服務器配置的整個輸出。

默認名字為：'vue-ssr-server-bundle.json'

要生成這個json文件，在配置中引入模塊 vue-server-renderer/server-plugin，作為webpack的插件使用

客戶端配置

客戶端生成一份客戶端構建清單，記錄客戶端的資源，最終會將客戶端構建清單中記錄的文件，注入到所指定的模版中

生成的這個客戶端構建清單（client build manifest）

默認名字為 'vue-ssr-client-manifest.json'

要生成這個json文件，在配置中引入模塊vue-server-renderer/client-plugin，作為webpack的插件使用

文件說明

webpack.server.conf.js 服務端webpack配置

dev-server.js 得到服務端bundle和客戶端bundle和模版

server.js 創(chuàng)建后端服務

用到的模塊說明

memory-fs模塊

在開發(fā)階段vue-ssr-server-bundle.json文件在webpack的作用下，是存在內存中的，所以需要用到這個模塊來讀取內存中的文件，和node原聲fs模塊有相同的API

webpack-node-externals

在服務端渲染中，所需要的文件都使用require引入，不需要把node_modules文件打包進來。