ReactDOMServer does not yet support Suspense

[m-sterspace]

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

14.17.5

What browser are you using?

Edge, Chrome

What operating system are you using?

Windows

How are you deploying your application?

export

Describe the Bug

I tried adding Recoil to my project for state management and used async selectors for datafetching, but as soon as I try and use a Suspense boundary in my project with them, I get thid "ReactDOMServer does not yet support Suspense" error coming from the _document.js file used with Material UI: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

Expected Behavior

I expect to be able to use Suspense in my project with Material UI without it crashing.

To Reproduce

Start a project, add Material UI and the _document file from here: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js, then add a Suspense boundary to your React tree and refresh the page.

[m-sterspace]

This seems to have cropped up before when a translation module started using Suspense, but the solutions seem to boil down to disabling Suspense on it, which doesn't help me if I'm trying to use Suspense.

[awareness481]

but as soon as I try and use a Suspense boundary in my project with them

React Suspense isn't yet supported on the server so you can't use it

[m-sterspace]

Even though my site is purely static And client side using next export?

Edit: never mind, I guess it's still using ssr in dev mode...

[ijjk]

Hi, as mentioned above Suspense is not yet available for SSR which is used while prerendering pages, you can ensure Suspense is only used on the client by waiting to render these components until after hydration (after useEffect(() => {}, []) has been called)

I'm gonna close this as this doesn't appear to be a bug in Next.js.

[yagudaev]

This seems to work in next@12.0.8.

What happen to me is I did:

yarn upgrade react@rc

however, react-dom package wasn't upgraded.

Doing:

yarn upgrade react-dom@rc

Fixed it.

Take a look at other dependencies and make sure they are up to date as well.

[jonsmithers]

Based on what @ijjk said, I thought an easy/elegant solution would be to just drop in a Suspense replacement that waits until after hydration:

const SuspensePostHydration = function(props: SuspenseProps): JSX.Element {
  const [postHydration, setPostHydration] = useState(false);
  useEffect(() => {
    setPostHydration(true);
  }, []);
  return postHydration 
    ? (<Suspense {...props} />) 
    : <></>;
}

And use it like so:

const DynamicNoSsrComponent = dynamic(() => import('./DynamicComponent'), { ssr: false });

// ...

return (
  <SuspensePostHydration
    fallback={(
      <h1>loading...</h1>
    )} 
  >
    <DynamicNoSsrComponent />
  </SuspensePostHydration>
);

But for some reason it never renders the fallback property.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.