浏览器:如何缓存大数据却又可以更新小零件?

时间:2019-04-06 08:00:23

标签: reactjs performance caching frontend

我有2万名员工的清单要显示在React表中。当管理员用户更改一项时,我希望更改反映在表中-即使她进行了重新加载-但我也不想重新获取所有20k,包括未更改的19999。

(该表当然是分页的,并且一次显示了最大N,但是我仍然需要全部20k来支持搜索和过滤,出于各种原因在服务器端这样做是不切实际的)

我能想到的解决方案是为/ api / employees设置缓存头,以便将其缓存为例如。一个小时,然后设置另一个端点/ api / employees?changedSince =,并以某种方式确保服务器知道已更改了哪些员工。但我确信有人已经为此实现了解决方案...

谢谢!

2 个答案:

答案 0 :(得分:0)

时间戳解决方案将是实现它的最好,最简单的方法。它仅需要存储少量的额外数据,并提供最可维护和可扩展的解决方案。

您需要做的就是在列表中的项目更新时更新时间戳。然后,当页面首次加载时,访问/api/employees,然后定期请求/api/employees?changedSince返回表中所有已更改的行,以供React更新。

就缓存主要/api/employees而言,我不确定这样做会带来多少好处,但这取决于数据更新的频率。

答案 1 :(得分:0)

正如您说的那样,您可以控制前端后端,恕我直言,此后端应将所有上游数据缓存在自己的数据库(SQL或其他数据库)中。然后,后端可以公开适当的api(具有分页和搜索功能)。 后端还可以实现一些逻辑来识别哪些行已更改。 如果前端需要有关更改的实时更新,则可以使用一些允许双向通信的技术(如果后端基于.NET,则为SignalalR;如果您具有节点后端,甚至是纯Web套接字,则为socket.io之类的东西)