如何在 Next.js SSR 应用程序中对 Firebase 中的数据进行分页？答案

【问题标题】：How to paginate data in Firebase in Next.js SSR app?如何在 Next.js SSR 应用程序中对 Firebase 中的数据进行分页？
【发布时间】：2020-09-26 11:37:12
【问题描述】：

我正在尝试构建一个 next.js 服务器端呈现的博客。为此，我需要对帖子数据进行分页。但是，我还没有找到一种方法来使用 firebase 提供的查询游标对数据进行分页。建筑查询代码为：

let postsQuery = firebase.firestore().collection('/posts').orderBy('postedOn', 'asc').limitToLast(10);
if (currentTagFilter !== 'All') {
  postsQuery = postsQuery.where('tag', '==', currentTagFilter);
}

现在，这适用于第一页，但我不知道如何请求接下来的 10 个帖子。我本可以保存查询的第一个文档并使用 .endBefore(firstPost)。但是，如果我在 _app.js 中创建一些状态并将第一个文档保存在一个数组中，例如，我无法找到如何在 getServerSideProps 中使其可访问。更不用说，如果用户直接进入/page/2，则不会向他显示任何内容，因为尚未执行对第1页的查询。

如何正确分页数据？

【问题讨论】：

标签： firebase google-cloud-firestore next.js

【解决方案1】：

您可能需要完全重新考虑您的分页策略。 Firestore 不支持按索引或页码分页。您必须提供上次看到的文档的文档快照或文档详细信息才能获得下一页。

鉴于这些限制和要求，用户不可能直接进入第 2 页（或除第一个以外的任何页面）。因此，提供一个链接或机制来做到这一点是个坏主意。

如果您想使用 Firestore“正确”分页数据，则必须从第一页开始，然后使用 startAfter() 循环浏览结果，并提供最后一页结束处的文档的详细信息。这在documentation 中有说明。

【讨论】：

那你有什么建议？我需要服务器端分页不是出于某种开发原因，而是为了我正在写的论文。但是，我没有附加到 Firebase，它只适用于博客的 SPA 版本，所以我想我也可以将它用于 SSR。如果您能推荐一些 Firebase 的替代品，我很乐意实施。
正如我所说，您将强制用户从头开始并从那里向前翻页。除非您想以某种方式预先计算页面并将该信息存储在某处以供查询，否则您实际上没有其他选择。