reactjs 如何在服务器端挂起组件，而在客户端呈现它？

hc8w905p 于 2023-02-04 发布在 React

关注(0)|答案(1)|浏览(128)

有没有办法让组件在服务器端保持挂起状态，然后使用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。

reactjs

来源：https://stackoverflow.com/questions/75316236/how-can-i-suspend-component-on-the-server-side-but-render-it-on-the-client-side

1条答案

按热度按时间

polhcujo1#

如果您使用Next.js进行SSR，您可以在文件顶部使用'use client';标记CSR组件，请参阅这些Server and Client Components文档。
Suspense只是异步渲染的一个后备方案，但据我所知，它仍然会在服务器上进行渲染。
useEffect的解决方法：

function Wrapper() {
  const [client, setClient] = useState(false)

  useEffect(() => {
    setClient(true)
  }, [])

  if (!client) return null

  return <Chat />
}

赞(0）回复(0）举报 2023-02-04

我来回答

reactjs 如何在服务器端挂起组件，而在客户端呈现它？

1条答案

相关问题

热门标签

最新问答