reactjs - 缓存问题：CDN 后面的 React + REST 服务器

我正在寻找一种模式，可以让我为我的用户改善 UX。我有一个在 CloudFront 后面运行的 REST 服务器，从前端的普通 React 应用程序中使用。

我将简化我的示例来说明我的问题。

我有一个名为GET /posts/<id>. 当浏览器请求它时，它带有一个max=age=180，这意味着它将存储在浏览器的缓存中，并且任何后续调用都GET /posts/<id>将在这 180 秒的持续时间内从浏览器的缓存中提供服务，之后它将再次访问 CDN 以尝试获取新副本。

这对大多数用户来说是可以的。我不介意任何帖子的更新在传播给所有用户之前延迟最多 3 分钟。但是有一个用户是这篇文章的作者。该用户可以使用PATCH /posts/<id>. 我们称该用户为 The Editor。

这是我现在的一个场景：

编辑器加载帖子页面，然后调用GET /posts/5
CDN 将最新的副本提供给前端。
然后编辑器对帖子进行更改并将其提交到后端通过PATCH /posts/5.
然后编辑器使用 Command-R（或 CTRL-R）刷新他的浏览器选项卡。
结果，前端然后GET /posts/5再次请求 - 但从更改之前获取过时的副本，因为自上次以来还没有过去 180 秒，GET并且GET在PATCH

我想要的体验是：

编辑器加载帖子页面，然后调用GET /posts/5
CDN 将最新的副本提供给前端。
然后编辑器对帖子进行更改并将其提交到后端通过PATCH /posts/5.
在 Command-R 浏览器选项卡刷新后，无论在 180 秒内获得新副本之前，都会立即GET /posts/5返回带有编辑器所做更改的数据副本。PATCHttl
至于其他用户，他们可以等待最多 180 秒，然后帖子中的更改才会传播给他们，当GET /posts/5

我正在使用 Axios，但我不认为 SWR 和 React-Query 支持突变。据我了解，这将允许编辑器为他刚刚PATCH'ed在服务器上的对象声明一个突变，以便他进行的任何后续调用GET /posts/5都将从那里得到服务，直到可以从后端获得更新的版本。

我的问题是：

标签： reactjsswr

TL;DR：只需在请求的末尾附加一个无害的、乱码的查询字符串GET /posts/<id>?version=whatever

好问题。我必须承认我不知道这个问题的完整答案，但我想在前端开发人员中分享一种众所周知的技术。

该技术称为缓存清除。我不确定这是否是最佳做法，但我很确定它已被广泛使用，因为它很容易理解。

想法很简单。当您将更改的查询字符串添加到末尾时，您实际上更改了 URL，因此没有缓存命中，您回避了整个缓存问题。

因此，针对您的特定用例的解决方案的详细步骤如下所示：

通常你只会请求GET /posts/<id>所有用户
当用户登录时，无论何种算法都会生成一个哈希键。为简单起见，我们只使用递增整数并调用它version。您将其存储version在 localStorage 中，以便它可以通过页面刷新而存活。
现在您需要区分用户在查看自己的帖子或其他人的帖子时的场景。当男人在看他自己的时候，你总是用GET /posts/<id>?version=n
每当用户编辑他的帖子并点击保存按钮时，您就会version从nn+1
下次他去发布视图页面时，应用程序会请求GET /posts/<id>?version=n+1未缓存的内容，并会检索最新的内容。
最后一件事，确保您的服务器安全地忽略该?version=n查询字符串。

我确信这个问题还有其他解决方案。我不是服务器配置和 HTTP 标头方面的专家，所以我不会进入该主题，但一定有一些东西需要寻找。

作为纯前端解决方案，有Serivce Worker API供您考虑。该 API 的主要目的是使开发人员能够以编程方式控制缓存策略。

使用此 API，您可以保留当前的应用程序代码，只需安装一个服务工作者，然后您可以在后台使用相同的缓存破坏技术来获取新内容，或者在用户使用时删除缓存（使用Cache API）编辑，甚至伪造用户刚刚发送GET /posts/<id>的回复。PATCH /posts/<id>