React 18如何实现服务端挂起组件仅客户端渲染且无报错？

我在React 18中尝试让组件仅在客户端渲染，服务端保持挂起状态。按照官方文档的Suspense模式实现后，功能正常，但存在问题：多个组件使用该模式时，服务端抛出的组件挂起错误会填满控制台，且错误还会传递到客户端。

现有代码示例 #

<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)

项目使用express + react-dom/server实现SSR，不想使用Next.js等第三方SSR库，求实现相同功能且避免控制台报错的方法。

解决方案 #

1. 封装通用ClientOnly组件（推荐） #

通过useEffect在客户端挂载后再渲染目标组件，服务端渲染时返回null或占位内容，从根源避免抛出错误：

import { useEffect, useState } from 'react';

function ClientOnly({ children, fallback = null }) {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient ? children : fallback;
}

2. 搭配Suspense使用 #

把客户端组件用ClientOnly包裹后放进Suspense，服务端不会触发错误，客户端 hydration 完成后才渲染目标组件，Suspense的fallback会在加载过程中正常展示：

<Suspense fallback={<Loading />}>
  <ClientOnly>
    <Chat />
  </ClientOnly>
</Suspense>

原理说明 #

• 服务端渲染阶段，useEffect不会执行，isClient保持false，返回fallback或null，不会抛出任何错误。
• 客户端hydration完成后，useEffect触发，isClient变为true，才渲染目标组件，完全实现仅客户端渲染的需求。
• 这种方式既保留了Suspense的加载态展示，又彻底解决了控制台被错误信息填满的问题。

内容的提问来源于stack exchange，提问作者zimex