什么是服務端渲染？

簡單理解是將組件或頁面通過服務器生成html字符串，再發送到瀏覽器，最后將靜態標記"混合"為客戶端上完全交互的應用程序。

服務端渲染的優點

更好的SEO，搜索引擎爬蟲可以抓取渲染好的頁面

更快的內容到達時間(首屏加載更快)，因為服務端只需要返回渲染好的HTML，這部分代碼量很小的，所以用戶體驗更好

服務端渲染的缺點

首先就是開發成本比較高，比如某些聲明周期鉤子函數(如beforeCreate、created)能同時運行在服務端和客戶端，因此第三方庫要做特殊處理，才能在服務器渲染應用程序中運行。

由于服務端渲染要用Nodejs做中間層，所以部署項目時，需要處于Node.js server運行環境。在高流量環境下，還要做好服務器負載和緩存策略

第一步：編寫entry-client.js和entry-server.js

entry-client.js只在瀏覽器環境下執行，所以需要顯示調用$mount方法，掛載DOM節點

import Vue from 'vue';

import App from './App.vue';

import createStore from './store/index.js';

function createApp() {

const store = createStore();

const app = new Vue({

store,

render: h => h(App)

});

return {app, store}

}

const { app, store } = createApp();

// 使用window.__INITIAL_STATE__中的數據替換整個state中的數據，這樣服務端渲染結束后，客戶端也可以自由操作state中的數據

if (window.__INITIAL_STATE__) {

store.replaceState(window.__INITIAL_STATE__);

}

app.$mount('#app');

entry-server.js需要導出一個函數，在服務端渲染期間會被調用

import Vue from 'vue';

import App from './App.vue';

import createStore from './store/index.js';

export default function(context) {

// context是上下文對象

const store = createStore();

let app = new Vue({

store,

render: h => h(App)

});

// 找到所有 asyncData 方法

let components = App.components;

let asyncDataArr = []; // promise集合

for (let key in components) {

if (!components.hasOwnProperty(key)) continue;

let component = components[key];

if (component.asyncData) {

asyncDataArr.push(component.asyncData({store})) // 把store傳給asyncData

}

}

// 所有請求并行執行

return Promise.all(asyncDataArr).then(() => {

// context.state 賦值成什么，window.__INITIAL_STATE__ 就是什么

// 這下你應該明白entry-client.js中window.__INITIAL_STATE__是哪來的了，它是在服務端渲染期間被添加進上下文的

context.state = store.state;

return app;

});

};

上面的asyncData是干嘛用的？其實，這個函數是專門請求數據用的，你可能會問請求數據為什么不在beforeCreate或者created中完成，還要專門定義一個函數？雖然beforeCreate和created在服務端也會被執行(其他周期函數只會在客戶端執行)，但是我們都知道請求是異步的，這就導致請求發出后，數據還沒返回，渲染就已經結束了，所以無法把 Ajax 返回的數據也一并渲染出來。因此需要想個辦法，等到所有數據都返回后再渲染組件

asyncData需要返回一個promise，這樣就可以等到所有請求都完成后再渲染組件。下面是在foo組價中使用asyncData的示例，在這里完成數據的請求

export default {

asyncData: function({store}) {

return store.dispatch('GET_ARTICLE') // 返回promise

},

computed: {

article() {

return this.$store.state.article

}

}

}

第二步：配置webpack

webpack配置比較簡單，但是也需要針對client和server端單獨配置

webpack.client.conf.js顯然是用來打包客戶端應用的

module.exports = merge(base, {

entry: {

client: path.join(__dirname, '../entry-client.js')

}

});

webpack.server.conf.js用來打包服務端應用，這里需要指定node環境

module.exports = merge(base, {

target: 'node', // 指定是node環境

entry: {

server: path.join(__dirname, '../entry-server.js')

},

output: {

filename: '[name].js', // server.js

libraryTarget: 'commonjs2' // 必須按照 commonjs規范打包才能被服務器調用。

},

plugins: [

new HtmlWebpackPlugin({

template: path.join(__dirname, '../index.ssr.html'),

filename: 'index.ssr.html',

files: {

js: 'client.js'

}, // client.js需要在html中引入

excludeChunks: ['server'] // server.js只在服務端執行，所以不能打包到html中

})

]

});

第三步：啟動服務

打包完成后就可以啟動服務了，在start.js中我們需要把server.js加載進來，然后通過renderToString方法把渲染好的html返回給瀏覽器

const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');

const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {

template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服務端渲染數據

});

server.get('*', (req, res) => {

renderer.renderToString((err, html) => {

// console.log(html)

if (err) {

console.error(err);

res.status(500).end('服務器內部錯誤');

return;

}

res.end(html);

})

});

總結

以上是生活随笔為你收集整理的vue服务端渲染 MySQL_Vue 服务端渲染（SSR）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。