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);
  // (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).

Notes#

  • React 14, 15 will include a checksum. React >= 16 does not use checksums (just a note as you look through the HTML output)
  • Since prerender.cloud calls ReactDOMServer.renderToString, be aware that componentWillMount is the only lifecycle method called during renderToString, so any behavior that depends on other lifecycle methods will not work

Troubleshooting#

meta/script tags from react-helmet aren't showing up#

If using react-helmet >= v5, make sure you have the defer setting enabled

<Helmet defer={false}>

or

Helmet.defaultProps.defer = false;

see https://github.com/nfl/react-helmet/pull/297 or https://github.com/nfl/react-helmet/issues/336

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

  1. Ensure you're using React 14 or 15 (React >= 16 no longer use checksums)
  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__ or window.__PRELOADED_STATE_PLAIN__, see our docs on state

Hosted on Roast.io