React server rendering --> Replacing React-rendered children with a new root component

Question

I'm trying to render react isomorphicaly, and it renders but I get the Warning/Error in client saying:

I'm using jspm and npm as package managers;

warning.js:25 Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.

The source outputed by server renderToString:

<div id="reactRoot"><div data-reactroot="" data-reactid="1" data-react-checksum="845161664"><marquee data-reactid="2"><h1 data-reactid="3">App</h1></marquee></div></div>

The source replaced by react after render:

<div id="reactRoot"><div data-reactid=".0"><marquee data-reactid=".0.0"><h1 data-reactid=".0.0.0">App</h1></marquee></div></div>

The express server middleware:

import App from './components/App/App.jsx';
// [...] Express code removed for brevity
app.use('*', (req, res, next) => {
  try {
    res.render('index.html', {
      reactHtml: renderToString(
        <App />
      )
    });
  } catch (err) {
    next(err);
  }
});

The index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>App</title>
  <script>
    console.log('Running on <%- @env %> environment!');
    <% if (@env == 'development') : %>
    System.import('systemjs-hot-reloader/default-listener.js');
    <% end %>
    System.import('/app.jsx!')
    .catch(console.error.bind(console));
  </script>
</head>
<body>
  <div id="reactRoot"><%- reactHtml %></div>  
</body>
</html>

I'm using ect as templating engine here;

The app.jsx:

import { render } from 'react-dom';
import App from './components/App/App.jsx';
const mountPoint = document.getElementById('reactRoot');
render(
  <App />,
  mountPoint
);

The App/App.jsx:

import React from 'react';

const App = () => (
  <div>
    <marquee><h1>App</h1></marquee>
  </div>
);

export default App;

For me was something about the initial state differing from server to the client. I've added much to the stack, so I can't find precisely what was causing the error, but as it was not stopping my app I was able to proceed. Now I have a lot of stuff as react-router-component, redux, react-look... So I can't tell what solved this issue... In a minute I'll post a gist here with some of my setup hoping it can help. — wesleycoder, Apr 20 '16 at 02:06
[Here is the gist](https://gist.github.com/wesleycoder/e1c87bcac6f44df922ea1ac7156c84ba) — wesleycoder, Apr 20 '16 at 02:17

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Use renderToStaticMarkup

// render the dynamic code of the page to a string.
var appHtml = React.renderToString(<Application/>);

// now use React as a static templating language to create the <html>, 
// <head>, and <body> tags
var fullPageHtml = React.renderToStaticMarkup(<HtmlPage content={appHtml}/>);

res.write(fullPageHtml);

Full Issue resolution discussion can be found here. https://github.com/aickin/react-dom-stream/issues/4

React server rendering --> Replacing React-rendered children with a new root component

1 Answers1

Use renderToStaticMarkup

Linked