如何在Next 13 Server Component中实现Short Polling方法

Question

我目前正在使用 setInterval 方法创建一个每 3000 毫秒获取一次的 API，我注意到该组件不会使用最新数据重新渲染。下面是代码块

const Home = async () => {
 let customers = await getCustomers();
 setInterval(async () => customers = await getCustomers(), 3000);
}

return <>
 {customers.map(customer => (<p>{customer.name}<p>))}
</>

目前页面不会自行更新，除非我手动刷新页面，这从用户体验的角度来看是不好的。有哪位前辈知道如何使用服务器组件对后端进行适当的轮询吗？

我确实尝试了普通的控制台日志记录，当我用控制台日志替换 setInterval 方法内的代码表达式时，它就可以工作。我知道如果它是客户端组件，它会使用 useEffect() 重新渲染整个组件，但由于这是主要根组件，因此在 Next 13 中默认情况下它必须是服务器组件。

Answer 1

服务器组件并不是为了维护与客户端的连接而设计的，因此，要解决此问题，您必须将服务器组件转换为客户端组件。

在你的情况下，我会维护该组件，删除 setInterval 并提供另一个使用 React Query 或 SWR 的客户端组件。

我会将初始数据传递给查询方法，然后使用这些库重新验证数据。

https://tanstack.com/query/v4/docs/react/guides/initial-query-data https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data

您可以找到一些如何使用 React Query 和 SWR 实现该功能的示例。