<h2><strong>背景</strong></h2>    <p>最近， 产品同学一如往常笑嘻嘻的递来需求文档， 纵使内心万般拒绝， 身体倒是很诚实。 接过需求，好在需求不复杂， 简单构思 后决定用Vue， 得心应手。 切好图， 挽起袖子准备撸代码的时候， SEO同学不知何时已经站到了背后。</p>    <p>"听说你要用Vue?"</p>    <p>"恩..."</p>    <p>"SEO考虑了吗?整个SPA出来，网页的SEO咋办?"</p>    <p>"奥..."</p>    <p>换以前， 估计只能无奈的换个实现方式， 但是Vue 2.0时代的到来， 给你多了一种可能。 你可以对SEO工程师说:用Vue没问题!</p>    <p>想必，很多前端同学都有类似这样的经历， 为了SEO，只能放弃得心应手的框架。 SEO(Search Engine Optimization)顾名思义就是一系列为了提高 网站收录排名，吸引精准用户的方案。 这么看来，SEO确实是有举足轻重的作用。 不过，好消息是，Vue2.0的发布为SEO提供了可能， 这就是SSR(serve side render)。</p>    <p>说起SSR，其实早在SPA (Single Page Application) 出现之前，网页就是在服务端渲染的。服务器接收到客户端请求后，将数据和模板拼接成完整的页面响应到客户端。 客户端直接渲染， 此时用户希望浏览新的页面，就必须重复这个过程， 刷新页面. 这种体验在Web技术发展的当下是几乎不能被接受的，于是越来越多的技术方案涌现，力求 实现无页面刷新或者局部刷新来达到优秀的交互体验。 比如Vue:</p>    <p>- 在客户端管理路由，用户切换路由，无需向服务器重新请求页面和静态资源，只需要使用 ajax 获取数据在客户端完成渲染，这样可以减少了很多不必要的网络传输，缩短了响应时间。</p>    <p>- 声明式渲染(告诉 vue 你要做什么，让它帮你做)，把我们从烦人的DOM操作中解放出来，集中处理业务逻辑。</p>    <p>- 组件化视图，无论是功能组件还是UI组件都可以进行抽象，写一次到处用。</p>    <p>- 前后端并行开发，只需要与后端定好数据格式，前期用模拟数据，就可以与后端并行开发了。</p>    <p>- 对复杂项目的各个组件之间的数据传递 vue  - Vuex 状态管理模式</p>    <p>缺点大家自然猜到了， 对，主要的一点就是不利于SEO，或者说对SEO不友好。 来看下面两张图；</p>    <p>SPA页面的源代码</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8a4b632d6d04ad21890c3f869c588a71.jpg"></p>    <p>下图SSR页面的源代码</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2ae0f1f445ec3f55a97ee803686800a8.jpg"></p>    <p>上面两张图就是使用了传统单页应用和SSR的页面源代码， 第一张图中，很明显页面的数据都是通过Ajax异步获取，然而搜索引擎度娘家的爬虫看到这样空旷的源码并不会丝毫留恋. 相反，通过服务端渲染的页面，就有很多对于爬虫来讲有效的连接. 毕竟度娘一家独大，看来服务端渲染确实有探究的必要了。</p>    <p>vue 的服务端渲染是怎么回事?</p>    <p>先看一张Vue官网的服务端渲染示意图</p>    <p><img src="https://simg.open-open.com/show/588c42bee019f81be0beae263ce2d915.jpg"></p>    <p>从图上可以看出，ssr 有两个入口文件，client.js 和 server.js， 都包含了应用代码，webpack 通过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求之后，会创建一个渲染器 bundleRenderer，这个 bundleRenderer 会读取上面生成的 server bundle 文件，并且执行它的代码， 然后发送一个生成好的 html 到浏览器，等到客户端加载了 client bundle 之后，会和服务端生成的DOM 进行 Hydration(判断这个DOM 和自己即将生成的DOM 是否相同，如果相同就将客户端的vue实例挂载到这个DOM上， 否则会提示警告)。</p>    <h2>怎么实现?</h2>    <p>知道了Vue服务端渲染的大致流程，那怎么用代码来实现呢?</p>    <p>1. 创建一个 vue 实例</p>    <p>2. 配置路由，以及相应的视图组件</p>    <p>3. 使用 vuex 管理数据</p>    <p>4. 创建服务端入口文件</p>    <p>5. 创建客户端入口文件</p>    <p>6. 配置 webpack，分服务端打包配置和客户端打包配置</p>    <p>7. 创建服务器端的渲染器，将vue实例渲染成html</p>    <ul>     <li> <p>首先我们来创建一个 vue 实例</p> </li>    </ul>    <pre>  <code class="language-javascript">// app.js        import Vue from 'vue';      import router from './router';      import store from './store';      import App from './components/app';           let app = new Vue({          template: '<app></app>'，          base: '/c/'，          components: {              App          }，          router，          store      });        export {          app，          router，          store      }</code></pre>    <p>和我们以前写的vue实例差别不大，但是我们不会在这里将app mount到DOM上，因为这个实例也会在服务端去运行，这里直接将 app 暴露出去。</p>    <ul>     <li> <p>配置 vue 路由</p> </li>    </ul>    <pre>  <code class="language-javascript">  import Vue from 'vue';    import VueRouter from 'vue-router';      import IndexView from '../views/indexView';    import ArticleItems from '../views/articleItems';      Vue.use(VueRouter);      const router = new VueRouter({        mode: 'history'，        base: '/c/'，        routes: [            {                path: '/:alias'，                component: IndexView            }， {                path: '/:alias/list'，                component: ArticleItems            }        ]    });</code></pre>    <p>注意这里的 base，在服务端传递 path 给 vue-router 的时候要注意去掉前面的 '/c/'，否则会匹配不到。</p>    <ul>     <li> <p>创建视图组件，这里我们使用单文件组件，下面是 indexView.vue 文件的实例代码</p> </li>    </ul>    <pre>  <code class="language-javascript"><template>        <div class="content">            <course-cover :class-data="classData[0]"></course-cover>            <article-items :article-items="articleItems"></article-items>        </div>    </template>      <script>        import courseCover from '../components/courseCover.vue';        import articleItems from '../components/articleItems';          export default {            computed: {                classData() {                    return this.$store.state.courseListItems;                }，                articleItems() {                    return this.$store.state.articleItems;                }            }，            components: {                courseCover，                articleItems            }，            // 服务端获取数据            fetchServerData ({ state， dispatch， commit }) {                let alias = state.route.params.alias;                  return Promise.all([                    dispatch('FETCH_ZT'， { alias })，                    dispatch('FETCH_COURSE_ITEMS')，                    dispatch('FETCH_ARTICLE_ITEMS')                ])            }，            // 客户端获取数据            beforeMount() {                return this.$store.dispatch('FETCH_COURSE_ITEMS');            }        }    </script></code></pre>    <p>这里我们暴露一个 fetchServerData 方法用来在服务端渲染时做数据的预加载，具体在哪调用，下面会讲到。 beforeMount 是vue的生命周期钩子函数，当应用在客户端切换到这个视图的时候会在特定的时候去执行，用于在客户端获取数据。</p>    <ul>     <li> <p>使用 vuex 管理数据，vue2.0 的服务端官方推荐使用 STORE 来管理数据，和1.0相比 api 有一些调整</p> </li>    </ul>    <pre>  <code class="language-javascript">  import Vue from 'vue';    import Vuex from 'vuex';    import axios from 'axios';      Vue.use(Vuex);      let apiHost = 'http://localhost:3000';      const store = new Vuex.Store({        state: {            alias: ''，            ztData: {}，            courseListItems: []，            articleItems: []        }，        actions: {            FETCH_ZT: ({ commit， dispatch， state }， { alias }) = {                commit('SET_ALIAS'， { alias });                return axios.get(`${apiHost}/api/zt`)                            .then(response => {                                let data = response.data || {};                                commit('SET_ZT_DATA'， data);                            })            }，            FETCH_COURSE_ITEMS: ({ commit， dispatch， state }) => {                return axios.get(`${apiHost}/api/course_items`).then(response => {                    let data = response.data;                    commit('SET_COURSE_ITEMS'， data);                });            }，            FETCH_ARTICLE_ITEMS: ({ commit， dispatch， state }) => {                return axios.get(`${apiHost}/api/article_items`)                            .then(response => {                                let data = response.data;                                commit('SET_ARTICLE_ITEMS'， data);                            })            }        }，        mutations: {            SET_COURSE_ITEMS: (state， data) => {                state.courseListItems = data;            }，            SET_ALIAS: (state， { alias }) => {                state.alias = alias;            }，            SET_ZT_DATA: (state， { ztData }) => {                state.ztData = ztData;            }，            SET_ARTICLE_ITEMS: (state， items) => {                state.articleItems = items;            }        }    })      export default store;</code></pre>    <p>state 使我们应用层的数据，相当于一个仓库，整个应用层的数据都存在这里，与不使用vuex的vue应用有两点不同：</p>    <p>-  Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</p>    <p>-  Vuex 不允许我们直接对 store 中的数据进行操作。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。</p>    <p>action 响应在view上的用户输入导致的状态变化，并不直接操作数据，异步的逻辑都封装在这里执行，它最终的目的是提交 mutation 来操作数据。 mutation vuex 中修改store 数据的唯一方法，使用 commit 来提交。</p>    <ul>     <li> <p>创建服务端的入口文件 server-entry.js</p> </li>    </ul>    <pre>  <code class="language-javascript">// server-entry.js      import {app， router， store} from './app';        export default context => {            const s = Date.now();          router.push(context.url);          const matchedComponents = router.getMatchedComponents();          if(!matchedComponents) {              return Promise.reject({ code: '404' });          }            return Promise.all(              matchedComponents.map(component => {                  if(component.fetchServerData) {                      return component.fetchServerData(store);                  }              })          ).then(() => {              context.initialState = store.state;              return app;          })      }</code></pre>    <p>server.js 返回一个函数，该函数接受一个从服务端传递过来的 context 的参数，将 vue 实例通过 promise 返回。 context 一般包含 当前页面的url，首先我们调用 vue-router 的 router.push(url) 切换到到对应的路由， 然后调用 getMatchedComponents 方法返回对应要渲染的组件， 这里会检查组件是否有 fetchServerData 方法，如果有就会执行它。</p>    <p>下面这行代码将服务端获取到的数据挂载到 context 对象上，后面会把这些数据直接发送到浏览器端与客户端的vue 实例进行数据(状态)同步。</p>    <pre>  <code class="language-javascript">context.initialState = store.state`</code></pre>    <p>创建客户端入口文件 client-entry.js</p>    <pre>  <code class="language-javascript">// client-entry.js      import { app， store } from './app';      import './main.scss';      store.replaceState(window.__INITIAL_STATE__);      app.$mount('#app');</code></pre>    <p>客户端入口文件很简单，同步服务端发送过来的数据，然后把 vue 实例挂载到服务端渲染的 DOM 上。</p>    <ul>     <li> <p>配置 webpack</p> </li>    </ul>    <pre>  <code class="language-javascript">// webpack.server.config.js      const base = require('./webpack.base.config'); // webpack 的通用配置      module.exports = Object.assign({}， base， {          target: 'node'，          entry: './src/server-entry.js'，          output: {              filename: 'server-bundle.js'，              libraryTarget: 'commonjs2'          }，          externals: Object.keys(require('../package.json').dependencies)，          plugins: [              new webpack.DefinePlugin({              'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')，              'process.env.VUE_ENV': '"server"'              })          ]      })</code></pre>    <p>注意这里添加了 target: 'node' 和 libraryTarget: 'commonjs2'，然后入口文件改成我们的 server-entry.js， 客户端的 webpack 和以前一样，这里就不贴了。</p>    <ul>     <li> <p>分别打包服务端代码和客户端代码</p> </li>    </ul>    <p>因为有两个 webpack 配置文件，执行 webpack 时候就需要指定 --config 参数来编译不同的 bundle。 我们可以配置两个 npm script</p>    <pre>  <code class="language-javascript">   "packclient": "webpack --config webpack.client.config.js",      "packserver": "webpack --config webpack.server.config.js"</code></pre>    <p>然后在命令行运行</p>    <pre>  <code class="language-javascript">   npm run packclient      npm run packserver</code></pre>    <p>就会生成两个文件 client-bundle.js 和 server-bundle.js</p>    <ul>     <li> <p>创建服务端渲染器</p> </li>    </ul>    <pre>  <code class="language-javascript">// controller.js      const serialize = require('serialize-javascript');    // 因为我们在vue-router 的配置里面使用了 `base: '/c'`，这里需要去掉请求path中的 '/c'    let url = this.url.replace(/\/c/, '');    let context = { url: this.url };    // 创建渲染器    let bundleRenderer = createRenderer(fs.readFileSync(resolve('./dist/server-bundle.js')， 'utf-8'))    let html = yield new Promise((resolve， reject) => {        // 将vue实例编译成一个字符串        bundleRenderer.renderToString(            context，   // 传递context 给 server-bundle.js 使用            (err， html) => {                if(err) {                    console.error('server render error'， err);                    resolve('');                }                /**                 * 还记得在 server-entry.js 里面 `context.initialState = store.state` 这行代码么？                 * 这里就直接把数据发送到浏览器端啦                **/                html += `<script>                            // 将服务器获取到的数据作为首屏数据发送到浏览器                            window.__INITIAL_STATE__ = ${serialize(context.initialState， { isJSON: true })}                        </script>`;                resolve(html);            }        )    })      yield this.render('ssr'， html);      // 创建渲染器函数    function createRenderer(code) {        return require('vue-server-renderer').createBundleRenderer(code);    }</code></pre>    <p>在 node 的 views 模板文件中只需要将上面的 html 输出就可以了</p>    <pre>  <code class="language-javascript">// ssr.html      {% extends 'layout.html' %}      {% block body %}          {{ html | safe }}      {% endblock %}        <script src="/public/client.js"></script></code></pre>    <p>这样，一个简单的服务端渲染就结束了，限于篇幅，详细的代码请 参考  Github代码库 。</p>    <p>https://github.com/pangz1/vue-ssr</p>    <h2>小结</h2>    <p>整个demo包含了：</p>    <p>- vue + vue-router + vuex 的使用</p>    <p>- 服务端数据获取</p>    <p>- 客户端数据同步以及DOM hydration。</p>    <p>没有涉及：</p>    <p>- 流式渲染</p>    <p>- 组件缓存</p>    <p>对Vue的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。</p>    <p>选择Vue的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。 Vue 2.0的SSR方案只是提供了一种可能，多了一种选择，框架本身在于服务开发者，根据不同的场景选择不同的方案，才会事半功倍。</p>    <p> </p>    <p> </p>    <p>来自：http://mp.weixin.qq.com/s/rClP45Eng4vlI887wY5fdw</p>    <p> </p>