Enabling Concurrent Mode in NextJS

[cyrus-za]

Via: #10643

I'd like to test out concurrent mode in my current nextjs project, now that its been released in experimental mode. The way to enable it in a normal react app is quite straght forward by switching ReactDom.render(<App />, rootEl) to ReactDom.createRoot(rootEl).render(<App />)

The problem is nextjs does that part for each page under the hood. It would be nice to have a option in next.config.js to turn concurrent mode on, or even better a way to opt-in per page (e.g. if there are a few old legacy pages that will not work in react strict mode, those dont get opted in, but we can opt in the ones that are ready for this).

[timneutkens]

You can enable it as experimental under:

// next.config.js

module.exports = {
  experimental: {
    reactMode: 'concurrent'
  }
}

There is no way to do per-page opt-in as the React tree can't be rendered in two different modes (also the entrypoint is different).

So to start you should enable strict mode and make all pages are compatible:

// next.config.js
module.exports = {
  reactStrictMode: true
}

[controversial]

@salazarm No; every major feature of the Next.js 13 App Router is built using concurrency / suspense

[salazarm]

@controversial I understand, but I'm using the pages router for now as we incrementally adopt the latest features.

[salazarm]

I guess I should stick to nextjs 12?

[salazarm]

Nextjs13 has other good features that don't involve the AppRouter, like transpilePackages, performance and memory improvements, etc. So it'd be nice to be able to use next.js 13 with the pages router and without React concurrent mode as an incremental upgrade path. Please consider it :)

[controversial]

I’m not sure whether there’s a way to use the Next.js 13 pages router without concurrent mode; you should open a new discussion for visibility.

[controversial]

I can't seem to enable concurrent mode without breaking all client-side React functionality. In my own app, when I set experimental.reactMode to either "blocking" or "concurrent," my app still renders server-side, but React never mounts on the client side, so all interactivity is gone. I reproduced this issue with more minimal apps from the included examples, as well—enabling concurrent mode seems to break React on the client side altogether. I'm not sure if I'm doing something wrong, or whether this is just the stage that the experimental concurrent mode support is currently at. What could cause this?

[devknoll]

Are you replacing your react-dom and react versions in package.json with 0.0.0-experimental-aae83a4b9?

[ghost]

I am facing the same issues. I changed those versions too.

[devknoll]

@controversial Could you try the suggestion in #11405 and see if it addresses your issue too?

[controversial]

I had replaced react with the experimental version but not react-dom. Replacing both fixes my problem. Thanks so much!

[EricKit]

I can't get this to work anymore with React 17.0.0-rc.2, it produces the error

Uncaught TypeError: _reactDom.default.unstable_createRoot is not a function

Which doesn't make sense to me because in React 17, unstable_createRoot should be right.

[hosmelq]

You have to use the experimental.

yarn add react@experimental react-dom@experimental

[EricKit]

Makes complete sense I moved off of experimental, I assumed it'd be included in the RC for 17... bad assumption, thanks!

[enes-get-local]

I run my next project at concurrent mode but it is super slow now. That caused since it is still experiemental version or i need to configure something else ?

Basically added these options to next.config.js :

experimental: {
    reactRoot: 'concurrent',
    reactStrictMode: true
  }

dependencies here :

"react": "^0.0.0-experimental-63927e084",
"react-dom": "^0.0.0-experimental-63927e084",

Now project is super jittery and slow

[saminnet]

reactStrictMode: true needs to be in outer scope of experimental, like this:

reactStrictMode: true,
experimental: {
  reactRoot: 'concurrent',
},