When developing isomorphic apps you may bump into this issue when a third-party UI library that you need to include into your project does not support server-side rendering. If you try to include it in any of your React components, the ReacDOMServer.renderToString()
will throw an exception when you try to render your app on the server. This often happens because a third-party library uses global variables such as window
, document
, and navigator
, which is not available in the Node.js environment.
Often, rendering such components on the server doesn't give you much benefit. For example, it can be a WYSIWYG editor, an autocomplete box, and so on. Do you really need to pre-render that stuff on the server? If not, you just need to make sure that these components are referenced and initialized only on the client side.
The following is an example of a popular text editor codeMirrorintegrated
into a React component:
classTextEditor extends Component { componentDidMount...