分页加载时如何实现无重复、带回填的反向获取最新记录？

核心思路 #

放弃依赖skip/take的分页逻辑，改用**基于已加载记录的锚点标识（PK/日期）**进行分页查询，同时单独处理新增数据的增量获取，从根源上避免新数据插入导致的偏移问题。

底层伪代码逻辑 #

1. 客户端状态维护 #

需要在客户端保存三个关键状态：

• localLatestId：本地缓存记录中最新一条的PK（或日期）
• localOldestId：本地缓存记录中最旧一条的PK（或日期）
• localRecords：存储本地已加载的所有记录列表

2. 首次加载逻辑 #

function loadFirstPage() {
  // 向服务器请求最新的10条记录
  response = server.query({
    sort: "PK DESC",  // 按PK逆序，确保拿到最新数据
    take: 10
  });

  localRecords = response.data;
  if (localRecords.length > 0) {
    localLatestId = localRecords[0].PK;  // 第一条是最新的
    localOldestId = localRecords[localRecords.length - 1].PK;  // 最后一条是当前页最旧的
  }
}

3. 「加载更多」逻辑 #

async function loadMore() {
  // 步骤1：检查并获取新增记录（可选，若需自动同步最新数据）
  newRecords = server.query({
    sort: "PK DESC",
    where: "PK > ?",  // 只查比本地最新记录更晚的新增数据
    params: [localLatestId]
  });

  if (newRecords.length > 0) {
    // 将新增记录插入到列表顶部
    localRecords = [...newRecords, ...localRecords];
    localLatestId = newRecords[0].PK;  // 更新本地最新记录标识
  }

  // 步骤2：加载更早的历史记录
  olderRecords = server.query({
    sort: "PK DESC",
    where: "PK < ?",  // 只查比本地最旧记录更早的数据
    params: [localOldestId],
    take: 10
  });

  if (olderRecords.length > 0) {
    // 将历史记录追加到列表底部
    localRecords = [...localRecords, ...olderRecords];
    localOldestId = olderRecords[olderRecords.length - 1].PK;  // 更新本地最旧记录标识
  }
}

逻辑优势 #

• 彻底解决skip/take的偏移问题：加载历史数据时仅依赖已加载的最旧记录标识，不受新插入数据的影响，不会出现重复或遗漏
• 新增数据可同步获取：通过增量查询拿到所有新添加的记录，插入到列表顶部，保证用户能看到最新内容
• 适配各类ORM（如EF）：仅需基础的排序、字段比较筛选和取数操作，都是ORM原生支持的功能
• 可灵活控制新增数据的获取时机：既可以在「加载更多」时自动检查，也可以放在用户主动刷新时执行，减少不必要的请求

内容的提问来源于stack exchange，提问作者lonix