使用 NextJS13 服务器组件无限滚动（应用程序目录）

Question

目前正在尝试重构我们的项目以使用服务器组件（app 目录），第一个挑战是如何使用新的“app”目录实现无限滚动分页。

这是一个过于简化的页面示例：

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。

Answer 1

您绝对可以在服务器上使用初始批次的项目进行预渲染，然后当用户滚动页面时在客户端获取其他项目。

以下是一些带有具体示例的想法。

1. 在 API 路由下实现数据检索逻辑，并在服务器和客户端组件中从该 API 路由获取数据。

沙箱 - https://codesandbox.io/p/sandbox/adoring-browser-vk5k0d?file=%2Fapp%2Fpage.tsx

2. 将数据获取功能实现为服务器操作（免责声明：服务器操作当前处于 alpha 阶段），并将其传递给客户端组件。

async function fetchItems() {
  "use server";
    
  return ...
}

export default async function Home() {    
  const items = await fetchItems();
    
  return <Items initialItems={items} fetchItems={fetchItems} />;
}

沙箱 - https://codesandbox.io/p/sandbox/stackoverflow-76266563-server-actions-f2gt3o?file=%2Fapp%2Fpage.tsx