Vue全站服务器渲染SSR实践掘金从0.12.X版本开始使用Vue.js开发产品，途经了掘金及Vue.js的高速发展，我们也不断迭代产品经历了3次大的重构。2017过年后我们也经历了有史以来最大的一次重构。这篇文章我会着重讲述重构过程中对于Vue.js后端服务器渲染的掘金团队实践。这里我就不再赘述什么是Vue.js了，请需要了解的同学前往：1.vuejs.org／中文文档2.GitHub3.掘金查看相关资源信息。服务器端渲染定义服务器端渲染Server-SideRendering也常被人写作SSR是Vue.js2.0版本发布的时候同时推出的功能，Virtual-DOM的实现让DOM生成被JavaScript来描述也就给了前后端在JavaScript环境下都可以生成页面内容，而其最主要的业务vue-server-renderer也包含在了Vue.js核心库中。WhySSR1.SEO：除了Google和Bing比较完美地实现了对于SPA（Single-PageApplication）的爬虫渲染及内容抓取，大多数搜索引擎包括百度都没有支持。因而，包含丰富内容的产品并需要SEO流量的产品也就自然需要SSR实现。2.加载速度：FasterTime-to-ContentGitChat当网站是SPA时，渲染网站需要：第一次加载HTML、加载JavaScript、加载相应页面需要的VueComponents（为了性能大多数组建都是异步取的）、渲染DOM、加载数据、渲染DOM、展示…而后端提前渲染好页面，可以快速展示到页面内容（其实加载数据部分的时间成本是省不下来的），因而还包含了使用缓存、renderToStream等等优化速度的方法。HowSSR由于SSR本身是Vue2.+原生支持的功能，因而使用官方的文档来实现是最好的方式，当然也有其他的各种优化的方式：1.官方文档&教程2.Nuxt.js是一个参考了React.js栈下的Next.js的一个更高封装接口的SSR框架。它封装了一层和vue-router、vuex及webpack设置这一层需求，可以快速开发SSR.WhatSSR由于掘金在这次重构优化当中，除了本身代码质量的提升外，SSR实现主要是基于已经实现的SPA业务来分割文章等静态包含内容的页面的。因而，我们的整个网站是由Vue搭建的，因而在全站实现一个完整的后端渲染中有比较复杂的设置及文件结构。在实现SSR的过程中，有如下几个部分是特别重要的，我在后文中会讲的比较清楚：1.如何设置开启SSR.2.如何用尽可能相似的代码同时支持Client及Server，不同的地方是什么。3.前后端拉取数据的异同。4.如果使用vue-loader的配置文件如何定义。文件结构GitChatsrc├──components│├──Foo.vue│├──Bar.vue│└──Baz.vue├──App.vue├──app.js#universalentry├──...
