开始之前先附上我的成品项目地址（喜欢的话点个小星星）：https://github.com/1912820899/skyCMS
开始教程之前需要先说明一下，由于博客前台之前使用SPA写的，现在拿来重构，所有本教程将不会借助vue-cli 和 nuxt.js来进行开发vue-ssr。
一.前置知识储备
1.webpack安装配置打包，还不懂的请先最少要看一遍官方文档，手动跟着敲一下：https://webpack.docschina.org/guides/
2.koa2 的理解与使用，不懂的看我博客分享的koa2视频，做一个入门：http://www.9cka.cn/nodejs
3.熟悉vue.js相信能看到这篇文章的，对vue.js已经不陌生了吧。
二.整体概括
1.vue-ssr的原理（4部分: Source , Webpack build , Node Server , Browser）
1.1 Source（自己编写的代码）
对于开发人员来说，Source指的是自己写的代码。对于webpack来说，Source指的就是需要让它来打包的一些资源。
普通的Vue-SPA区别：
普通Vue-SPA：入口文件一般情况下只需要一个app.js即可
Vue-SSR: 需要1个主入口（app.js）和2个分入口（server.entry.js和client.entry.js)。为什么需要2个分入 口，介绍完原理之后，再做解释。
1.2 Webpack build
作用：webpack通过查找配置文件，对Source进行打包，打包后会生成vue-ssr-server-bundle.json和vue-ssr-client-manifest.json和一系列通过编译器打包后的js，css等文件。bundle文件是什么东西，在配置webpakc的时候我会说明，现在你只要知道会生成两个bundle重要文件即可
1.3 Node Server (Koa2)
通过webpakc打包后会生成一个vue-ssr-server-bundle.json文件，server收到browser的页面请求之后，会调用ServerBundle文件，在服务器端运行整个程序 ，最后生成一个HTML字符串（即为“预取”数据），返回给Browser，也就是上图所说的Render过程，此时服务器端渲染已经完成。
1.4 Browser
浏览器端收到请求之后，会等待服务器端先返回HTML，返回成功后，Browser调用ClientBundle文件,运行整个程序，把html填充进去。
2. 关键点理解
2.1 服务端渲染只在首次请求时候进行
vue-ssr 是通过服务端发送渲染好的html代码返回给浏览器端，但是这个事情只发生在首次通过地址栏访问页面。一旦首次服务端渲染完成，那么接下来，程序就只是通过ajax来进行数据请求
2.2 需要生成2个分入口文件，一个服务端入口，一个浏览器端入口
因我服务器端和浏览器端所执行的代码不完全相同，首次渲染完成后，只需要浏览器端进行一些改变，比如路由变化，这些改变都是需要浏览器入口来完成的。
3. 注意事项
3.1 服务端需要单独的实例
在纯客户端应用程序 (client-only app) 中，每个用户会在他们各自的浏览器中使用新的应用程序实例。对于服务器端渲染，我们也希望如此：每个请求应该都是全新的、独立的应用程序实例，以便不会有交叉请求造成的状态污染
3.2 通用功能写在created和beforeCreate
3.3 不包含document或者window
三.环境配置
1.初始化一个项目
npm init -y
2.安装vue vue-server-render
npm install vue vue-server-renderer -S
3.配置webpack4
为什么需要webpack？
由于vue-server-render 需要通过webpack来打包生成Bundle Renderer （看完webpakc的就知道，Bundele Renderer就是json文件，里面控制着如何调用和调配代码，管理所有所需模块之间的交互，可以说是程序的一个地图）
3.1 安装webpack 和webpakc-cli
npm install webpack webpack-cli -S
3.2 配置webpack
未完待续哦。想要抢先看，请关注我的博客：http://www.9cka.cn/
