使用状态转化API解决服务端渲染时的重复请求

在服务端渲染完成后,静态页面将被传送给客户端,接下的来客户端开始获取应用资源,启动应用,一切和往前一样,如果打开控制台,观察network,你会发现当前页面上所需要的网络请求正常的被发送。你是否意识到请求被重复发送了

为什么重复?

服务端渲染时的过程和客户端其实差不多的,该发的网络请求得发,否则页面的数据从何而来?假如页面 A 上有2处需要从服务器获取数据,服务端渲染及应用启动的过程是:

根据用户发起的url和已经打包好的客户端代码,使用 renderModuleFactory 生成静态页面,在此过程中发出2个请求获取数据

服务器发送静态页面给客户端。

客户端展示静态页面。

客户端获取应用完整资源。

官户端启动应用并定位到用户当前的页面。

进行入页面的生命周期,再次发送那2个请求,此后的过程和客户端渲染一样。

很明显,网络请求在第1,6两步上重复了,页面可能被重绘,发生抖动等。

解决方案

为了解决这个问题,需要把上述第一步的数据保存起来,当第6步的请求发送时,我们只要看下是否有保存的数据,如果有的话就不再发送请求。另外我们需要知道请求是否是在服务端渲染时发出的。先看代码:

代码引用自:https://blog.angular-university.io/angular-universal/

这是一个进入某个路由前的resolove守卫,用来获取页面上所需要的数据,首先使用当前路由上的ID参数和一个自定义的前缀‘course-’,通过makeStateKey函数生成一个key,接下来判断了transferState上是否有这个key值对应的数据,有的话直接将获取到的数据返回,同时删除transferState上的这个key。在没有找到对应key的状态时,给服务器发送了一个请求,同时在请求回来时通过tap操作符,判断当前应用的环境,如果是服务器环境,则把取到的数据通过 transferState 保存。那么数据究竟保存在哪里?

控制台 ---> network ---> 找到请求(类型是document) ----> response,翻到最下面,你会发现一个script标签,页面上的数据就安静的躺在这里。如下图:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181101G0ZAIZ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券