随着各大前端框架的诞生和演变，SPA开始流行，单页面应用的优势在于可以不重新加载整个页面的情况下，通过ajax和服务器通信，实现整个Web应用拒不更新，带来了极致的用户体验。然而，对于需要SEO、追求极致的首屏性能的应用，前端渲染的SPA是糟糕的。好在Vue 2.0后是支持服务端渲染的，零零散散花费了两三周事件，通过改造现有项目，基本完成了在现有项目中实践了Vue服务端渲染。
关于Vue服务端渲染的原理、搭建，官方文档已经讲的比较详细了，因此，本文不是抄袭文档，而是文档的补充。特别是对于如何与现有项目进行很好的结合，还是需要费很大功夫的。本文主要对我所在的项目中进行Vue服务端渲染的改造过程进行阐述，加上一些个人的理解，作为分享与学习。
概述
本文主要分以下几个方面：
什么是服务端渲染？服务端渲染的原理是什么？
如何在基于Koa的Web Server Frame上配置服务端渲染？
基本用法
Webpack配置
开发环境搭建
渲染中间件配置
如何对现有项目进行改造？
基本目录改造；
在服务端用vue-router分割代码；
在服务端预拉取数据；
客户端托管全局状态；
常见问题的解决方案；
什么是服务端渲染？服务端渲染的原理是什么？
Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。上面这段话是源自的解释，用通俗的话来说，大概可以这么理解：
服务端渲染的目的是：性能优势。 在服务端生成对应的HTML字符串，客户端接收到对应的HTML字符串，能立即渲染DOM，最高效的首屏耗时。此外，由于服务端直接生成了对应的HTML字符串，对SEO也非常友好；
服务端渲染的本质是：生成应用程序的“快照”。将Vue及对应库运行在服务端，此时，Web Server Frame实际上是作为代理服务器去访问接口服务器来预拉取数据，从而将拉取到的数据作为Vue组件的初始状态。
服务端渲染的原理是：虚拟DOM。在Web Server Frame作为代理服务器去访问接口服务器来预拉取数据后，这是服务端初始化组件需要用到的数据，此后，组件的beforeCreate和created生命周期会在服务端调用，初始化对应的组件后，Vue启用虚拟DOM形成初始化的HTML字符串。之后，交由客户端托管。实现前后端同构应用。
如何在基于Koa的Web Server Frame上配置服务端渲染？
基本用法
需要用到Vue服务端渲染对应库vue-server-renderer，通过npm安装：
npm install vue vue-server-renderer --save
最简单的，首先渲染一个Vue实例：
// 第 1 步：创建一个 Vue 实例 const Vue = require('vue'); const app = new Vue({ template: `<div>Hello World</div>` }); // 第 2 步：创建一个 renderer const renderer = require('vue-server-renderer').createRenderer(); // 第 3 步：将 Vue 实例渲染为 HTML renderer.renderToString(app, (err, html) => { if (err) { throw err; } console.log(html); // => <div data-server-rendered="true">Hello World</div> });
与服务器集成：
module.exports = async function(ctx) { ctx.status = 200; let html = ''; try { // ... html = await renderer.renderToString(app, ctx); } catch (err) { ctx.logger('Vue SSR Render error', JSON.stringify(err)); html = await ctx.getErrorPage(err); // 渲染出错的页面 } ctx.body = html; }
使用页面模板：
当你在渲染Vue应用程序时，renderer只从应用程序生成HTML标记。在这个示例中，我们必须用一个额外的HTML页面包裹容器，来包裹生成的HTML标记。
为了简化这些，你可以直接在创建renderer时提供一个页面模板。多数时候，我们会将页面模板放在特有的文件中：
<!DOCTYPE html> <html lang="en"> <head><title>Hello</title></head> <body> <!--vue-ssr-outlet--> </body> </html>
然后，我们可以读取和传输文件到Vue renderer中：
const tpl = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8'); const renderer = vssr.createRenderer({ template: tpl, });
Webpack配置
然而在实际项目中，不止上述例子那么简单，需要考虑很多方面：路由、数据预取、组件化、全局状态等，所以服务端渲染不是只用一个简单的模板，然后加上使用vue-server-renderer完成的，如下面的示意图所示：
