How do we replace an element with DOM instead of inserting a DOM into an element when hydrating?

[lightnet328]

I think we have the following issue.

https://stackoverflow.com/questions/55611192/reactdom-hydrate-replace-container-instead-of-inserting-into

In preact, a new feature was added to solve this issue.

preactjs/preact#1557

It would be useful for partial server-side rendering if we can do this. Can we replace an element with DOM instead of inserting a DOM into an element when hydrating? Or, do you have any plans to implement new features to solve this?

[threepointone]

React doesn't currently have a way to partially hydrate elements, leading to issues like the one you mention.

A workaround for the specific example mentioned, is to render a fragment with the articles on the client side. Something like-

const container = document.querySelector('main');
ReactDOM.hydrate(
<React.Fragment>
  <Article {...} />
  <Article {...} />
  <Article {...} />
</React.Fragment>, container);

That said, I hope you take care to reproduce the same state and context for the alternately rendered components.

Closing this issue. In the future, we will share more on how we plan on supporting different server rendering scenarios.