目前正在尝试重构我们的项目，以使用服务器组件（应用程序目录），第一个挑战是如何实现无限滚动分页与新的“应用程序”目录。
这是一个过于简单的页面示例：

import OrganisationInterface from "@/interfaces/OrganisationInterface";

async function getData() {
  const res = await fetch('http://api.test/v1/organisations?page=1');

  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const { data } = await getData();

  return (
      <>
        <div className="mx-auto in-h-screen ">
          {data && data.map((organisation: OrganisationInterface) => (
              <div key={organisation.id}>
                {organisation.attributes.title.lt}
              </div>
          ))}
        </div>
      </>
  );
}

我在服务器上预取了10个初始结果，现在我需要向客户端请求添加另外10，20，30个......
或者我应该在服务器端以某种方式做它？我需要一些如何正确实现这一点的想法或例子，以前的解决方案是基于客户端的，使用SWR或ReactQuery。