如何在Next 13服务器组件中实现短轮询方法

7kqas0il  于 2023-04-30  发布在  其他
关注(0)|答案(1)|浏览(154)

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

const Home = async () => {
 let customers = await getCustomers();
 setInterval(async () => customers = await getCustomers(), 3000);
 return (
  <>
   {customers.length > 0 && customers.map(customer => 
   (<p>{customer.name}<p>))}
  </>
 )
}

目前页面不会自动更新,除非我手动刷新页面,这在用户体验方面很糟糕。任何老年人有任何关于如何使适当的轮询后端使用服务器组件的想法?
我尝试了普通的控制台日志记录,当我用控制台日志替换setInterval方法中的代码表达式时,它可以工作。我理解如果它是客户端组件,它会使用useEffect()重新呈现整个组件,但由于这是主要的根组件,因此在Next 13中默认情况下它必须是服务器组件。

0aydgbwb

0aydgbwb1#

服务器组件的设计目的不是维护与客户端的连接,因此,要解决此问题,您必须将服务器组件转换为客户端组件。
在您的情况下,我将保留该组件,删除setInterval并提供另一个使用React Query或SWR的客户端组件。
我会将初始数据传递给查询方法,然后使用这些库重新验证数据。
https://tanstack.com/query/v4/docs/react/guides/initial-query-data www.example.com
在那里,你可以找到一些如何使用React Query和SWR实现该功能的示例。

相关问题