如何在动态填充页时进行分页

Question

我有一个页面，其中我列出了一些基于搜索数据的产品。所显示的产品不是保存在本地数据库中，而是使用API实时获取的(这就是它必须保持的方式)。

当页面加载时，它首先列出来自一个提供者的产品(第一个API调用)。在页面完成加载后，使用Ajax对第二个提供者进行第二次调用，产品列表将出现并附加到页面中。

考虑到每个api调用都需要2+秒才能返回数据，我不能在页面加载上留下超过一个调用。

我的问题是:在这种情况下如何分页？

Idea 1

执行静态分页:分页是在浏览器中完成的。这确实很简单，但是在大的结果集上，它可能会减慢设备的速度，甚至使页面崩溃。

Idea 2

在第一次加载时，缓存所有结果并使用缓存文件进行分页(dificulty: medium，也不能将缓存的文件保存太久，因为数据可能经常变化)。

Idea 3

没有缓存，在服务器上分页。在这里我不知道该怎么做。

要考虑的事情

在找出分页背后的想法之后，我还需要添加过滤器和排序。

使用php，mysql，js。

Answer 1

让我们回顾一下您的选择：

• 如果结果集非常大，则选项1是不可行的，页面可能会变得没有响应性，用户会提示停止脚本。这在几千个元素之上才是正确的。但是，如果在某些搜索结果中出现这种情况，则不能考虑。
• 选项2-缓存解决了延迟问题，但没有解决卷问题，缓存中的巨大数据集仍然是一个巨大的数据集。我真的不明白缓存是如何简化分页问题的。
• 选项3没有相同的缺点，只需要服务器处理能力。这就是为什么应该考虑这一问题。

在使用数据库时，直接通过向数据库发送动态限制参数来处理分页。在这里，您只能选择后置处理，所以当在后端调用api时，在page * pagesize和(page + 1) * pagesize结果下面裁剪任何内容。您可能需要解析html才能做到这一点。

稍后，您可以添加选项2，它允许您在请求第2页时不使用相同的搜索请求API，而是为第1页获得缓存的请求。库应该让这份工作变得很容易。