Cov-X

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.topics",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","hilongjw","page",1,"limit",20,"total","id","15820","avatar_url","https://avatars0.githubusercontent.com/u/5835766?v=3","githubUsername","create_at","2015-02-07 05:23:53.6","score",35,"topic_count","reply_count",6,"is_star",false,{"_20":35,"_36":21,"_37":38,"_39":40,"_41":42,"_43":44,"_45":33,"_46":33,"_30":47,"_48":49,"_25":50,"_51":52},"20818","author_id","tab","share","content","## 写在前面\r\n离 `Vue 2.0` 发布快有两周了，最近两天终于有空做了服务端渲染和同构的一些尝试，并实现了一个对 `Vue Server Renderer` 的封装，可以用更精简的代码来实现在目前的 `Node.js` 应用中引入 Vue 服务端渲染。\r\n\r\nVue 的服务端渲染支持流式输出，可以做组件级的缓存，这使得它的渲染速度也是非常快速。通过搭配新版的 `vue-router` 和 `vuex`（ Vue 全家桶大雾），可以实现一个既可以满足SEO需求，也如SPA一样交互体验流畅的前后端同构应用。\r\n\r\n[vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0/) 是 Vue 2.0 的同构示例项目，使用 firebase 作为数据层，实现了完全实时的 hackernews 信息流，同时还能被搜索引擎当做静态内容抓取。\r\n\r\n\r\n## vue-ssr\r\n\r\nUse Vue 2.0 server-side rendering with Express\r\n项目地址： [vue-ssr](https://github.com/hilongjw/vue-ssr)\r\n\r\n## 先上demo\r\n\r\n还没有做优化，只是基础使用了 lru 做了组件的缓存，服务器平均渲染时间在 40ms 左右。\r\n[http://ssr.bood.in/](http://ssr.bood.in/) \r\n\r\n## 安装\r\n\r\n```sh\r\nnpm i vue-ssr --save\r\n```\r\n\r\n## 用法\r\n\r\n```javascript\r\nconst express = require('express')\r\nconst router = express.Router()\r\n\r\nconst vueRender = require('vue-ssr')\r\n\r\n// webpack server-side bundle config\r\nconst serverConfig = require('path to webpack.server.js')\r\n\r\n// create a project renderer\r\nconst indexRenderer = vueRender({\r\n projectName: 'index', \r\n rendererOptions: {\r\n cache: require('lru-cache')({\r\n max: 1000,\r\n maxAge: 1000 * 60 * 15\r\n })\r\n }, \r\n webpackServer: serverConfig\r\n})\r\n\r\n// handler\r\n// 这里的静态模板只做演示，可以查看文末的实例实例代码\r\nfunction indexView (req, res) => {\r\n indexRenderer(req, res, `\r\n \r\n \r\n \r\n \r\n Cov-X\r\n {{ STYLE }}\r\n \r\n \r\n {{ APP }}\r\n \r\n \r\n \r\n `)\r\n}\r\n\r\nrouter.get('/', indexView)\r\nrouter.get('/home', indexView)\r\nrouter.get('/article', indexView)\r\nrouter.get('/tag', indexView)\r\n\r\n```\r\n\r\n## API\r\n\r\n### projectName\r\n\r\nproject name of webpack entries that you want to server side rendering\r\n\r\n```\r\n// webpack config\r\n\r\n...\r\n\r\nentry: {\r\n index: ['../path to app client entry'],\r\n dashboard: ['../path to dashboard project client entry']\r\n},\r\n\r\n...\r\n```\r\n\r\n```\r\nconst indexRenderer = vueRender({\r\n projectName: 'index',\r\n webpackServer: serverConfig\r\n})\r\n\r\nconst dashRenderer = vueRender({\r\n projectName: 'dashboard',\r\n webpackServer: serverConfig\r\n})\r\n```\r\n\r\n### rendererOptions\r\n\r\nrendererOptions 即 [Vue server renderer](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#renderer-options) 的配置项\r\n\r\n#### 指令（ directives ）\r\n\r\n声明一些自定义指令的服务端实现：\r\n```\r\nconst indexRenderer = vueRender('index', {\r\n directives: {\r\n example (vnode, directiveMeta) {\r\n // transform vnode based on directive binding metadata\r\n }\r\n }\r\n}, serverConfig)\r\n```\r\n\r\n#### 缓存（ cache ）\r\n\r\n```\r\nconst indexRenderer = vueRender('index', {\r\n cache: require('lru-cache')({\r\n max: 1000,\r\n maxAge: 1000 * 60 * 15\r\n })\r\n}, serverConfig)\r\n```\r\n\r\n更多信息可以参考：[Why Use bundleRenderer?](https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#creating-the-server-bundle)\r\n\r\n### webpack 服务端打包配置（ webpackServer ）\r\n\r\n推荐参考[webpack.server.js](https://github.com/hilongjw/vue-express-hot-simple/blob/master/build/webpack.server.js)\r\n\r\n将 webpack 服务端打包配置引入到 webpackServer 就完成了。\r\n```\r\nconst serverConfig = require('path to webpack.server.js')\r\n\r\nconst indexRenderer = vueRender({\r\n projectName: 'index', \r\n webpackServer: serverConfig\r\n})\r\n```\r\n\r\n# 示例代码\r\n\r\n[vue-ssr-hmr-template](https://github.com/hilongjw/vue-ssr-hmr-template)是一个使用了 vue-ssr 的项目脚手架，既可以使用前后端同构，也可以使用普通的spa模式（node 渲染静态页）。\r\n\r\n- Vue 2.0\r\n- Webpack 2.1.0\r\n- HotModuleReplacement\r\n- Server Side Render\r\n- Express","title","在 Express 应用中接入 Vue 2.0 服务端渲染","last_reply_at","2016-10-19 03:17:32.295","good","top",5,"visit_count",20447,"2016-10-14 16:07:00.913","author",{"_13":14,"_22":23}]