在 React 页面之间缓存搜索 (JSON) 结果

Question

我们有一个使用 React 构建的站点。有一个搜索页面会获取我们的服务器以获取 json 格式的搜索结果。然后显示结果。然后用户点击一个结果，将他们带到我们网站上的另一个页面。然后他们单击后退按钮返回搜索页面，但现在所有结果都消失了。

如果我们将结果存储在 localstorage 或 redux 中，当他们进入搜索页面时，结果将始终存在。因此，如果他们转到我们的主页-> 搜索页面，当我们从本地存储中提取时，他们将看到旧内容。

我的问题是，有没有一种方法可以构建代码，以便在进行搜索时缓存结果，但不会缓存太多以至于它们总是出现？

Answer 1

如果您可以控制 server-side，您只需确保正确缓存提取调用即可。 JSON 响应将立即呈现。这是侵入性最小的解决方案，并且会利用默认的浏览器行为。

如果这不是一个选项，您可以遵循一种模式进行 client-side 缓存：

在 redux 中保存任何给定查询的搜索结果。
当用户进入搜索页面时，您会立即显示 redux 为搜索查询存储的内容，同时（当组件挂载时）触发对相同查询的新搜索.
然后搜索会覆盖在 redux 中为相同查询缓存的内容。

如果没有任何缓存，用户将不得不等待第一次提取。
如果自上次获取后结果没有改变，用户根本不会注意到任何东西。
如果结果发生了变化，用户会在短时间内看到旧的缓存结果（聊胜于无，你仍然可以表明正在进行新的搜索）然后页面re-renders，显示 up-to-date 个结果。

示例状态：

const searchResultsState = {
    'query1': [
        {...}, {...}, ... // results
    ],
    'query2': [
        {...}, {...}, ... // results
    ],
};

有几个辅助库可以帮助完成此操作，但简单的 react+redux+thunk 也足以完成此操作。我认为 redux-toolkit 的部分人也采用这种方法。顺便说一句，它确实使一个反应灵敏、感觉活泼的应用程序遵循这样的 cache-first 方法。

在 React 页面之间缓存搜索 (JSON) 结果

Caching search (JSON) results between pages in React

json

web

reactjs

redux