[nextjs] 从 trpc 的 useInfiniteQuery 开始，在项目中学习和使用 “无限滚动加载” 和 “游标分页查询” [trpc文档](https://trpc.io/docs/client/react/useInfiniteQuery) 这次之所以用到这个，是因为项目中要实现数据库查询所有数据。但获取所有数据展示为列表显然不太科学，ai编程助手给出了无限滚动查询的方案，用到了这个hook。于是深入研究了下去。除了这个，后面还会提到这个页面用到的 useDebounded（settimeout包裹） 和 useLocalstore（浏览器kv存储）。 这个hook其实核心在于三个：后端指针分页查询、前端数据获取和维护、前后端协调指针。可以实现分批次小量地请求数据库数据，在前端全部展示。 1. 后端利用 指针 + where + limit 实现数据库查询。维护一个指针 cursor 来作为 where 的参数，排除那些已经获取过的数据，再取 limit 个数据。 这里的逻辑是这样：获取 cursur 和 limit -> 用 cursur 作为参数 where -> 取 limit + 1 条数据 -> pop 多出来的那条数据作为新的 cursor -> 回传新的 cursur 和 数据。 这里是深分页优化一些内容，面试鸭有看到。原理在于 offset + limit的方案其实是“数前10000条数据，再取后10个”。造成性能浪费。而 where + limit 是 “排除前面的数据，再取10个”，大大减少性能开销。 不过和 deepseek 探讨后，要注意 where 和 order 涉及的字段要建索引，否则每次查询都要扫描整表新建索引，反而更慢。 2. 前端接收和维护接收到的所有数据并协助维护cursor，最后设置一个触发继续请求数据的函数。 前端一方面接收和保存返回的数据，拼接成一整个数据并渲染，每次查询时还需要保存好上一次数据库返回的那个新 cursor，继续获取数据时回传。 触发继续获取的函数的情形根据情景定，加载更多按钮、识别滚动位置、或者更复杂的条件 3. 协调。其实已经提到了，维护好那个 cursor 是重点，来回传递和更新。感觉在前后端都行，where 的 less than 和 less 的区别。