CODEWITHSUNDEEP
reactjs
BookOfGreg
BookOfGreg

Reputation: 3716

Rendering noscript version serverside without reuse markup warnings in React

In my JS component I currently render the non-js version of the markup for compatibility with old browsers. Then Client-side this is re-rendered to the js-on markup.

This causes the error below where you can see the noscript version triggers this error.

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:

(client) <div class="shortlist ...
(server) <noscript data-reacti ...

Is there a way to resolve this issue where the client gets the fastest experience while maintaining support for noscript browsers?

Upvotes: 4

Views: 1536

Answers (1)

Martin Ždila
Martin Ždila

Reputation: 3219

My solution was to replace <noscript> with <div id="noscript" ref="noscript"> and in componentDidMount call this.refs.noscript.style.display = 'none';.

To hide the noscript div ASAP I've also added <script>try{document.getElementById('noscript').style.display='none'}catch(e){}</script> to the index.html just immediately after placeholder for serverside rendered markup.

Upvotes: 1

Related Questions