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); // (only React v <= 15 has checksums, >= 16 no longer uses checksums) // "<div data-reactroot="" data-reactid="1" data-react-checksum="999625590">Hello World</div>"
and Prerender.cloud has special support for React - it will return the output from
ReactDOMServer.renderToString. But if that throws an error, it falls back to normal HTML output (which is almost the same).
ReactDOMServer.renderToString, be aware that
componentWillMountis the only lifecycle method called during renderToString, so any behavior that depends on other lifecycle methods will not work
If using react-helmet >= v5, make sure you have the
defer setting enabled
Helmet.defaultProps.defer = false;
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_PLAIN__, see our docs on state