Next.js: Partial Hydration

[oguzzkilic]

Question about Next.js

Hello,

I am trying to obtain information regarding how "partial hydration" can be done on next.js. I haven't found any clear information in official documentation. Is there any solution produced on this subject or will there be any?

[timneutkens]

Please follow the issue template in the future.

---

Eventually with React Concurrent mode Next.js will be able to do this by default, however currently it's non-trivial, I know of one post that talks about it: https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5

It's definitely something that will be addressed in the future.

[thuringia]

@timneutkens Sorry to piggyback on this. If you want, I can move this to a new issue based on the template.
As far as I understood Dan Abramov's examples and discussions on this topic, this should be possible right now, given the changes of #9207.
I can, right now, activate concurrent mode, and Next will create a hydrating root, however when using <Suspense> as in Dan's example (https://codesandbox.io/s/floral-worker-xwbwv) I get a ReactDOMServer-related error.

Could you clarify "how much" of concurrent mode is currently supported in Next? The PR, and the release notes, are not very clear about that.

[timneutkens]

@devknoll is working on progressive/partial hydration in next.

[devknoll]

@thuringia Make sure you're using an experimental version of react and react-dom, and you shouldn't see any ReactDOMServer errors. If you still do, please post it and I could try to help out.

Generally, there shouldn't be anything in Next.js preventing you from using Concurrent mode. It's just not optimized, and you may get subpar results. This is what I'm working to address now.

[timneutkens]

Generally, there shouldn't be anything in Next.js preventing you from using Concurrent mode. It's just not optimized, and you may get subpar results. This is what I'm working to address now.

Do note that none of the frameworks out there are currently optimized for concurrent mode.

[LukasBombach]

@devknoll is working on progressive/partial hydration in next.

@timneutkens That is so awesome. Is there any way I can see this (maybe even contribute if that's wanted)?

[dennisroethig]

@devknoll is working on progressive/partial hydration in next.

@timneutkens @devknoll Is this still WIP? I was looking for something like that and ended up here and was wondering what the current state of this is 😅

[tk-o]

Hey @devknoll 👋 Would you be able to share an update on this issue, please?

[devknoll]

There are still some optimizations that we can do in Next.js to further improve performance, but generally speaking, you should already be able to use react@experimental and react-dom@experimental along with the experimental reactMode: "concurrent" option in Next.js and get partial + incremental hydration across <Suspense> components.