Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it ok I put random things in div.root?

See original GitHub issue

Can I put some initial text in div.root element? (eg. p tag with text, div, canvas…) Because I saw many people put their entire rendered markup in div.root to hack seo. So when ReactDOM.render( <App />, document.getElementById('root')); What will happen with div.root? Is it’s childNode all being erased? If it is, then I can put random things in it, am I right? Thank for your patience!!

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

awearycommented, Feb 14, 2018

Because I saw many people put their entire rendered markup in div.root to hack seo.

Most search engine crawlers have no problem parsing client-rendered applications, but you can definitely send down rendered markup using ReactDOMServer.

If it is, then I can put random things in it, am I right?

You can feel free to put whatever you want inside the root container, as React will simply clear out any child nodes before rendering.

https://github.com/facebook/react/blob/1fd205ad2d101f441622c9bb7e2ccb480281e0a0/packages/react-dom/src/client/ReactDOM.js#L1002-L1023

If you did server rendering with ReactDOMServer you would instead use [ReactDOM.hydrate](https://reactjs.org/docs/react-dom.html#hydrate), which would avoid the cost of throwing away all the markup and starting from scratch.

0reactions

rockmandashcommented, Feb 15, 2018

@aweary Thank you very much!!

Top Results From Across the Web

Why do we use <div>#root instead of <body>? - Stack Overflow

In the cases where that is happening it's often because they are adding something that needs to be rendered, which means it has...

Stop using so many divs! An intro to semantic HTML

First and foremost, it's almost definitely fine! The point here isn't to totally get rid of <div> s, it's to stop using them...

Bounce Element Around Viewport in CSS - CSS-Tricks

Then I want the elements to bounce around viewport randomly. The problem is that positioning interferes with the @keyframes animation and ...

The Perils of Rehydration - Josh W Comeau

Server-side rendering can be a performance win, but the thing is, that work still needs to be done on-demand. When you request your-website.com, ......

Material UI (MUI) Box component vs div : r/reactjs - Reddit

it would render the same thing, yes, but not compile down. compilation is a build-time thing and it doesn't have implications on runtime ......