[技术分享]ssr 渲染的一些理解以及思考

shangjin发布于18 天前 • 41 次阅读

问题产生

小编最近迷上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,如果小编有时间,会给大家再开个专题。

共收到 0 条回复