Render client (browser) only components with suspense fallback on server

[alexandernanberg]

Goals

1. Rendering server fallback for browser only components triggers the error overlay when following the official docs

Non-Goals

No response

Background

https://react.dev/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content

Proposal

Either by Next providing a custom error class that won't trigger the error overlay.

E.g.

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

function Chat() {
  if (typeof window === 'undefined') {
    throw ClientOnlyError('Chat should only render on the client.');
  }
  // ...
}

or by exposing a component that hides this completely for consumers

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

[Chanki-Min]

Same problem here. client-only component shoud throw error in server-side runtime. Next.js should give developer a workaround to do not display non-nessesary error overlay.