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

Question

我正在尝试构建一个 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 页的查询。

如何正确对数据进行分页？

Answer 1

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

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

如果您想使用 Firestore “正确”对数据进行分页，则必须从第一页开始，并使用 循环显示结果startAfter()，提供最后一页结束处的文档的详细信息。文档中对此进行了说明。