Is data-reactroot relevant to the hydrate function in React?

时光总嘲笑我的痴心妄想 提交于 2021-02-19 04:10:34

问题


I was trying to understand what's the difference between ReactDOMServer.renderToString() and ReactDOMServer.renderToStaticMarkup() on React 16.8.6.

This is what I understood:

  • renderToStaticMarkup() is used on the server side when you just want to render the markup and don't want to hydrate it on the client side. (https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup)

  • renderToString() is used on the server side when you want to use the ReactDOM.hydrate() function to hydrate the application on the client side. (https://reactjs.org/docs/react-dom-server.html#rendertostring)

So, if I'm right, the only difference between this two methods is that renderToString() adds the data-reactroot on the main element of the application. React reinforces this on the renderToStaticMarkup() documentation:

Similar to renderToString, except this doesn’t create extra DOM attributes that React uses internally, such as data-reactroot. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.

If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrate() on the client.

But, I was reading this issue on React's repository where Dan Abramov said:

Instead, use hydrate() to explicitly tell React to hydrate existing HTML. Then it won't depend on whether data-reactroot exists or not.

And:

...The suggested migration path is to use ReactDOM.hydrate() which completely sidesteps the problem because it doesn't rely on the data-reactroot attribute.

So, my question is: Is data-reactroot relevant to the hydrate function in React or is the documentation wrong?

Understanding this will be really helpful to fix a bug I'm having while hydration.

来源:https://stackoverflow.com/questions/57787670/is-data-reactroot-relevant-to-the-hydrate-function-in-react

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!