Server-side rendering question.

[chemoish]

I am trying to understand how, in the demo, modifying containers or components (HMR) after the server-side rendering doesn't fire this error.

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:

I noticed something is managing the differences between the initial server-side rendering and any hot-updates there after, even after page refresh.

Any insight or direction would be much appreciated.

(Not sure if it has anything to do with Babel version, I am trying to piece together version 6)

[oyeanuj]

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:

To add to that, if anyone has insight on what mistakes usually cause this error to show up? I keep seeing this error but am not sure where to even start debugging this.

[chemoish]

@oyeanuj I have read that extraneous spacing, or any difference whatsoever, can cause this error. I have also read that one way to get around this is through setTimeout, then a rerender with updated data (But that doesn't seem like a good solution).

( don't know where/how the spans are being generated)

And every other isomorphic example I have looked at has this same problem.

• https://github.com/rackt/redux/tree/master/examples/universal
• https://github.com/acdlite/redux-router/tree/master/examples/server-rendering
• https://github.com/bananaoomarang/isomorphic-redux

[sliminality]

@oyeanuj One benefit of server-side rendering is that client-side updates don't have to rewrite the entire DOM; instead, they can hook into the server-rendered DOM and make their changes on top of that. But if your component renders differently depending on whether it's client- or server-side, React can't cheaply update the client-side DOM.

For example, suppose you have a component that hooks into the DOM (and thus requires access to the navigator or window global). You can't just import this component unconditionally, because navigator is not defined on the server-side. So your component render() function might include the following:

return (
    { canUseDOM && require('client-side-component') }
)

However, this means the server-rendered version of the page does not contain client-side-component, whereas the client-rendered version does, throwing the error. Granted, it's pretty finicky, and here are a couple common bugs:

1. If you use separate templates for the server and client side, have your server-side render() wrap everything in an extra single div (ReactDOM creates an extra injection div)
2. On the client-side template, if you're injecting into document.documentElement, use document instead
3. Make sure you're passing the same props to both versions of the component
4. Double-check for dynamically-generated values (timestamps, random numbers, etc.) that might differ between the client and server side

If the issue is something else: the error message displays the line where the diff occurs (both versions), and you can use that as your entry point for debugging. You can start by console logging the innerHTML of your component before and after render(), and diffing the results.

[oyeanuj]

Hi @sarahlim! That was just the response I was looking for - very helpful, thank you! This is good information to start debugging. One more question based on what you said:

For example, suppose you have a component that hooks into the DOM (and thus requires access to the navigator or window global). You can't just import this component unconditionally, because navigator is not defined on the server-side. So your component render() function might include the following:

I feel like this might be the problem in my case, given the libraries that I might be using. In case of using these external plugins which depend on the DOM, what is a good strategy to avoid the server-side render being overwritten and result in different server and client side code?

[sliminality]

@oyeanuj You can trigger a state update with componentDidMount() like this:

componentDidMount() {
    // Re-render for isomorphic purposes
    requestAnimationFrame(() => {
      this.setState({ appIsMounted: true });
      // Do whatever you did in your old componentDidMount here
    });
  }

render() {
    return (
      <div className="MyComponent">
        { this.state.appIsMounted && <ClientSideComponent /> }
      </div>
    );
}

Since we can't render ClientSideComponent on the server side, we choose not to initially render it on the client side either. This way, the initial checksums match between server and client. Then, once our component has finished its initial client-side render -- at which point window, navigator, etc. variables will be available -- we can update the state, which triggers a re-render, which finally injects the ClientSideComponent.

Hope that makes sense!

[janhoogeveen]

In my apps I can simply check for the CLIENT variable, works like a charm so far...

componentWillUpdate() {
  if (__CLIENT__) {
    this.someFunction();
  }
}

[trueter]

Going with __CLIENT__ is the favourable solution because the webpack strip-loader can remove dead code from bundles.

[gabriel-miranda]

Same here on fresh install

[joostaafjes]

I get this error (Warning: React attempted to reuse markup in a container but the checksum was invalid....) as well but don't how to fix this. Any help is appreciated.

1. I have a route defined for a city guide like this:
   <Route path="/cityguide/:city" component={Cityguide}/>
2. Based on the city parameter in the url I update the state in componentWillMount of the Cityguide component:

componentWillMount() {
    if (this.props.params.city) {
      this.props.updateMapCenter(this.props.params.city);
    }
  }

This works fine in the browser but on the server it looks like the render method is called before componentWillMount because in the server html (using wget) I see the initial state of city appearing and I see this react warning.

So I need to find a way that the server side rendering will be called after componentWillMount has been executed. I have read that this should in general be the case but not apparently not on the server. Does anyhow know how to fix this?

Thx

[chrisblossom]

@joostaafjes Did you find a solution? If so, please share.

[gabriel-miranda]

@joostaafjes @chrisblossom have in mind that if you use any lifecycle methods it will only be called on the browser. When the server does renderToString its not rendering a component, its just as its name, a string. So any lifecycle methods will be called on the client. You should call updateMapCenter inside asyncConnect.
EDIT: I misspelled the library

[joostaafjes]

The workaround I used is:

render() { // determine city(needed for server side rendering, at client not needed) let realCity = city; if (this.props.params.city) { realCity = this.props.params.city; }

And later call updateMapCenter. So this part is called server side, the componentWillMount is used at the client. I hope to find a nicer solution sometime. @gabriel-miranda: the asyncProps solution is not clear to me. Do I need to include https://github.com/ryanflorence/async-props ?