vue中的ssr

避免状态单例

在写纯客户端的代码时，我们习惯于每次在新的上下文中对代码进行取值。不过，在node.js启动的服务器进程，是长期运行的一个线程。每次进入该进程，它只会进行一次取值并留存在内存。

所以，在server的代码中，要为每一次请求都创建一个单例，防止交叉请求而引起状态污染，包括vue、router、store和event bus的实例，都应该通过一个工厂函数来创建实例。

	//app.js
	const Vue = require('vue');
	
	module.exports = functoin createApp(context){
		return new Vue({
			data: {
				url: contetx.url
			},
			template: `<div>模板代码</div>`
		})
	}

---

数据预期

在服务端渲染期间，我们其实只是在渲染一个快照（因此不需要将数据进行响应式化，也免了将数据响应化的时间）。所以在开始渲染之前，就需要先预取和解析好数据。

同时，在mount到客户端应用程序之前，需要先获取到与服务器端程序完全相同的数据，否则，客户端和服务器端数据状态不一致，将导致混合失败。

因此，获取的数据需要位于视图组件之外，要放置在专门的数据与存储容器或者状态容器中：
服务器端，在渲染之前预取数据，并将数据存到store中，并且还会将数据序列化和内联预置到html中（window.__INITIAL_STATE__）；
客户端，在mount之前，可以直接从store获取需要的状态。

---

客户端预取数据

有两种阶段来取数据

1. 在路由导航之前解析数据：
   在router的beforeResolve中对比跳转前后路由所匹配的组件中的差异，然后对这些差异组件再去执行asyncData方法来取出组件所需要的数据。
   这种做法，当数据获取较慢时，会应，因感到明显卡顿，因此应该提供一个数据加载指示器。
2. 匹配到需要渲染的视图之后，再获取数据
   在组件的beforeMount函数中，执行asyncData.
   当路由导航被处触发时，可以立即切换视图，因此应用程序具有更快的响应速度。

不管采取哪种方式，当路由组件重用时（params或者query已变化了，例如从/user/1到user/2），都应该调用asyncData函数。所以应当在beforeRouteUpdate中执行ayncData。
不过这样子，那第一种方法中，为啥要对差异组件才请求数据呢？