无限滚动nextjs ISR或SSR

Question

如何在ISR组件或SSR组件中使用无限滚动获取数据？

我正在尝试使用 nextjs 13.4 中的 ISR 或 SSR 组件来使用无限滚动来获取数据

那么有什么方法可以在 ISR 或 SSR 中使用无限滚动吗？

Answer 1

可以通过“react-intersection-observer”实现无限滚动。对于 SEO 和用户友好的无限排序，我与观察者一起使用分页。观察者返回

inView

标志，触发页面参数更新。

setObserver

设置一个状态来有条件地渲染观察者。

useEffect(() => {
  setObserver(true);
  if (inView) {
    const param = (page + limit).toString();
    setQueryParameter(param);
  }
}, [inView]); // eslint-disable-line

页面是App文件夹中的一个服务器组件，用于获取具有限制和页面（跳过的记录数）的数据。数据被传递到客户端组件，该组件将数据保存在 React 状态中。

export default async function Home({ searchParams }: AppPageProps) {
    const param = searchParams[RouterParamTypes.Page];
    const page = param ? parseInt(param) : 0;
    const docs = await getDocs(page, PAGE_LIMIT);

在客户端上，每次加载新数据时，状态都会在 useEffect 中更新。

网络爬虫渲染页面一次并接收分页列表。可选添加网络爬虫的下一个和上一个参考。