server side render渲染的一些理解以及思考

问题产生

小编最近迷上ssr，看了点源码，结果你懂的，小编思考了一大堆问题，请教了一大堆大佬，也和同事讨论了好久，最后终于搞明白了！小编也刷了下vue的ssr，以及一些react的ssr，下面为大家一边分析问题，一边总结！

问题及解决

.1.如何保持服务端store（缓存数据）和客户端一致以及引申出来的问题

我们用的项目会用到一些共用的store存储数据，比如vuex，redux等，小编看了vue-ssr的文档和react-ssr相关文章后，看到了这样一句，服务端也可也请求数据，服务端完成数据渲染后再返回html给客户端，这个时候服务端的store同时返回给客户端，这样store从服务端保持了和客户端的一致性。那么这个时候小编想到了一个问题，为了方便，下面都以c-store代替，服务端用s-store代替，假如客户操作c-store改变了c-store中的x变量，这个时候s-store的x变量还是原来的值，这个时候，我切换路由，服务端请求数据要用到s-store中的x，是不是获取的数据会不准确？

看服务端接收url的代码

const app = express();
app.get('*', function (req, res) {
  //返回html字符串或流给页面
}）

*代表可以接受任一url，看到这里，大家是不是也会有这个问题。恭喜你，你也和小编一样中招了。其实是这样的，ssr会打两个包，第一个包s-dist，第二个包c-dist，当浏览器请求的时候，通过express(也可以是egg等)提供的服务，服务器获取任意路由，调用s-dist，返回相关html字符串和数据，html字符串被浏览器接收，因为html字符串包括script等js标签，其中的js是c-dist的js，浏览器二次解析，同时script上的js进行允许，比如为页面元素绑定事件，比如把s-store赋值给c-store，让c-store初始化，这样我们完成了一次渲染。接下来是关键了，当路由走了服务端返回一个html字符串，客户端解析后，接下来用户操作，其实是操作router中的路由，也就是纯客户端的路由操作，和服务器没有任何关系，这个时候我们其实是用不到服务端的s-store,用户当前窗口只需维护c-store即可，看掘金和知乎，都是同target=’_blank’，打开了一个新页面，所以服务端再次返回字符串！ 是不是有点坑，小编看到app.get('*',...)的时候，以为每个路由都会过express这个服务，其实是第一次才过，后面都是走浏览器Router。

2.问题延伸

假如一开始a页面从服务端渲染，同时用户操作修改了c-store的x值，这个时候，用户在新窗口打开了b页面，b页面服务端获得数据必须用改变后的x值，但是客户端的x还是初始值，西湖的水我的泪啊，客户为啥想着新开个窗口，但是问题还是要解决，办法还是有的，我们不要服务端请求了，约定这个路由客户端请求数据，因为是新窗口打开，store也是新的，所以我们需要在上个页面修改store的时候储存起来，比如localStorage，在组件卸载的时候清空localStorage。

弄懂这个，其他的问题，杂七杂八的都解决了，至于其他的适用问题啥的，或者如何写ssr，大家可以自行google，如果小编有时间，会给大家再开个专题。