大多數vue專案要支援ssr應該是為了seo考慮，畢竟對於web應用來說，搜尋引擎是乙個很大的流量入口。vue ssr現在已經比較成熟了，但是如果是把乙個spa應用改造成ssr應用，成本還是有些高的，這工作量無異於重構前端。另外對前端的技術要求也是挺高的，需要對vue比較熟悉，還要有node.js 和 webpack 的應用經驗。
vue是乙個構建客戶端應用的框架，即vue元件是在瀏覽器中進行渲染的。所謂服務端渲染，指的是把vue元件在伺服器端渲染為組裝好的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 createstore from './store/index.js';
const store = createstore();
store,
});}// 使用window.__initial_state__中的資料替換整個state中的資料，這樣服務端渲染結束後，客戶端也可以自由操作state中的資料
if (window.__initial_state__)
import vue from 'vue';
import createstore from './store/index.js';
export default function(context) );
// 找到所有 asyncdata 方法
let asyncdataarr = ; // promise集合
for (let key in components) )) // 把store傳給asyncdata
}} // 所有請求並行執行
return promise.all(asyncdataarr).then(() => );
};
beforecreate或者created中完成，還要專門定義乙個函式？雖然beforecreate和created在服務端也會被執行（其他週期函式只會在客戶端執行），但是我們都知道請求是非同步的，這就導致請求發出後，資料還沒返回，渲染就已經結束了，所以無法把 ajax 返回的資料也一併渲染出來。因此需要想個辦法，等到所有資料都返回後再渲染元件
asyncdata需要返回乙個promise，這樣就可以等到所有請求都完成後再渲染元件。下面是在foo組價中使用asyncdata的示例，在這裡完成資料的請求
export default ) ,
computed:
}}
webpack配置比較簡單，但是也需要針對client和server端單獨配置
webpack.client.conf.js顯然是用來打包客戶端應用的
module.exports = merge(base,
});
module.exports = merge(base, ,
output: ,
plugins: [
new htmlwebpackplugin(, // 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, );
server.get('*', (req, res) =>
res.end(html);
})});
個人實踐vue ssr已有一段時間，發現要想搭建一套完整的 ssr 服務框架還是很有挑戰的，或許 nuxt 是乙個不錯的選擇，對 nuxt 感興趣的朋友可以參考我的乙個開源小作品essay
以上，感謝閱讀！
搭建自己的SQLiteDataBase框架（三）
標籤 空格分隔 未分類 table name developer class developer public class skill implements serializable public void setname string name public string getdesc publ...
從零搭建自己的SpringBoot後台框架 六
io.springfox springfox swagger2 2.4.0 io.springfox springfox swagger ui 2.4.0 複製 在資料夾configurer中建立swaggerconfigurer package com.example.demo.core.conf...
Socket原理的簡單理解
最近我在做乙個android小專案用到了socket，今天整理了一下資料總結我對socket的理解。socket的使用就在我們生活中，只是不被我們關注而已，首先看看生活中哪些用到了socket 網路中程序之間如何通訊 當我們開啟瀏覽器瀏覽網頁時，瀏覽器的程序和web伺服器通訊的 當我們用qq聊天時，...