有没有办法让组件在服务器端保持挂起状态,然后使用React 18在客户端呈现它?我尝试使用此模式https://beta.reactjs.org/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content。它按预期工作,但问题是,如果我在多个组件中使用此模式,则控制台将充满组件在服务器端引发的错误,因此它将保持挂起状态。稍后,所有这些错误都会传递到客户端
<Suspense fallback={<Loading />}>
<Chat />
</Suspense>
function Chat() {
if (typeof window === 'undefined') {
throw Error('Chat should only render on the client.');
}
// ...
}
服务器端错误:
Error: Chat should only render on the client.",
"at Chat (/Users/Chat.tsx:86:19)
客户端错误:
Uncaught Error: Chat should only render on the client.
at updateDehydratedSuspenseComponent (react-dom.development.js:20662:1)
at updateSuspenseComponent (react-dom.development.js:20362:1)
at beginWork (react-dom.development.js:21624:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25738:1)
at workLoop (scheduler.development.js:266:1)
at flushWork (scheduler.development.js:239:1)
是否有一种方法可以在不使用第三方SSR库(如Next.js)的情况下实现相同的功能,但防止控制台中出现错误?我的项目使用express和react-dom/server来执行SSR。
1条答案
按热度按时间polhcujo1#
如果您使用Next.js进行SSR,您可以在文件顶部使用
'use client';
标记CSR组件,请参阅这些Server and Client Components文档。Suspense只是异步渲染的一个后备方案,但据我所知,它仍然会在服务器上进行渲染。
useEffect
的解决方法: