React has built-in support for server-side rendering, try it yourself:
import React from 'react'; import ReactDOMServer from 'react-dom/server'; const App = <div>Hello world</div>; ReactDOMServer.renderToString(App); // "<div data-reactroot="" data-reactid="1" data-react-checksum="999625590">Hello World</div>"
...and in fact, prerender.cloud will use
ReactDOMServer.renderToString, unless it throws an error, in which case it falls back to plain DOM serialization, which means no checksums, and forces React to rebuild the entire DOM when the client takes over.
So, it's important that you do try it with your app (in development, on your local machine), and fix any bugs that return out of that response. Not fixing it isn't a show stopper, but it means you're missing out on the performance improvement from not having to rebuild the DOM when the client is initialized.
componentWillMount is the only lifecycle method called during renderToString, so any behavior that depends on other lifecycle methods will not work
renderToStringand make sure it works
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
This means that the checksum is being generated but the checksum generated on the server is not matching the checksum generated on the client.
The most common root cause is you're fetching async data, and Prerender.cloud's Ajax-Preload monkeypatch is caching some of that data, but even though it's cached, there's still a "nextTick" before the cache is returned, which is just enough time for React to render without any state being available.
To fix it, you'll have to save the app state to
window.__PRELOADED_STATE__, see our docs on state