React Particulars#

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.

Warning/FYI: componentWillMount is the only lifecycle method called during renderToString, so any behavior that depends on other lifecycle methods will not work

Troubleshooting#

There's no checksum in the HTML from prerender.cloud for my React app#

  1. Ensure you're using React 13, 14 or 15
  2. Run your app, locally, on your machine through renderToString and make sure it works
    • you shouldn't see any errors
    • you should see all of the HTML that is currently in the DOM within your app root (if only a little bit of HTML was returned, something went wrong)
    • if it works locally, it should be working on prerender.cloud, email us if it isn't.

React attempted to reuse markup in a container but the checksum was invalid.#

  • The actual error in your JavaScript console reads:

    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

Hosted on Roast.io