{"action":"opened","issue":{"url":"https://api.github.com/repos/STRML/react-grid-layout/issues/20","labels_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/20/labels{/name}","comments_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/20/comments","events_url":"https://api.github.com/repos/STRML/react-grid-layout/issues/20/events","html_url":"https://github.com/STRML/react-grid-layout/issues/20","id":55558242,"number":20,"title":"Invalid checksum between server and client","user":{"login":"benoneal","id":4063875,"avatar_url":"https://avatars.githubusercontent.com/u/4063875?v=3","gravatar_id":"","url":"https://api.github.com/users/benoneal","html_url":"https://github.com/benoneal","followers_url":"https://api.github.com/users/benoneal/followers","following_url":"https://api.github.com/users/benoneal/following{/other_user}","gists_url":"https://api.github.com/users/benoneal/gists{/gist_id}","starred_url":"https://api.github.com/users/benoneal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benoneal/subscriptions","organizations_url":"https://api.github.com/users/benoneal/orgs","repos_url":"https://api.github.com/users/benoneal/repos","events_url":"https://api.github.com/users/benoneal/events{/privacy}","received_events_url":"https://api.github.com/users/benoneal/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-01-27T00:24:19Z","updated_at":"2015-01-27T00:24:19Z","closed_at":null,"body":"I get this message:\r\n``` javascript\r\nReact attempted to use 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.\r\n```\r\nWhen using react-grid-layout to manage pages that are rendered on both the server and the client isomorphically. I can visually see that before client-side js loads, the layout looks different to after it loads. And when using .Responsive, it appears to be attempting to always use the smallest possible layout of all breakpoints specified. \r\n\r\nWhen I remove the react-grid-layout component, there is no checksum error. Here is my component: \r\n``` javascript\r\nmodule.exports = React.createClass({\r\n  displayName: 'Home',\r\n\r\n  mixins: [Router.State],\r\n\r\n  getLayout: function() {\r\n    return {\r\n      lg: [\r\n        { x: 0, y: 0, w: 12, h: 3, i: 'home_heading' },\r\n        { x: 0, y: 3, w: 12, h: 3, i: 'home_link' },\r\n        { x: 3, y: 6, w: 6, h: 3, i: 'home_input' }\r\n      ],\r\n      md: [\r\n        { x: 0, y: 0, w: 10, h: 3, i: 'home_heading' },\r\n        { x: 0, y: 3, w: 10, h: 3, i: 'home_link' },\r\n        { x: 2, y: 6, w: 6, h: 3, i: 'home_input' }\r\n      ],\r\n      sm: [\r\n        { x: 0, y: 0, w: 8, h: 3, i: 'home_heading' },\r\n        { x: 0, y: 3, w: 8, h: 3, i: 'home_link' },\r\n        { x: 2, y: 6, w: 4, h: 3, i: 'home_input' }\r\n      ],\r\n      xs: [\r\n        { x: 0, y: 0, w: 4, h: 3, i: 'home_heading' },\r\n        { x: 0, y: 3, w: 4, h: 3, i: 'home_link' },\r\n        { x: 1, y: 6, w: 2, h: 3, i: 'home_input' }\r\n      ],\r\n      xxs: [\r\n        { x: 0, y: 0, w: 2, h: 3, i: 'home_heading' },\r\n        { x: 0, y: 3, w: 2, h: 3, i: 'home_link' },\r\n        { x: 0, y: 6, w: 2, h: 3, i: 'home_input' }\r\n      ]\r\n    };\r\n  },\r\n\r\n  devLayoutDebug: function(layout) {\r\n    console.log(layout);\r\n  },\r\n\r\n  render: function() {\r\n    return (\r\n      <Title title=\"Home\">\r\n        <GridLayout\r\n          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}\r\n          cols={{ lg: 12, md: 10, sm: 8, xs: 4, xxs: 2 }}\r\n          layouts={ this.getLayout() }\r\n          rowHeight={ 40 }\r\n          margin={ [0,0] }\r\n          onLayoutChange={ this.devLayoutDebug }>\r\n          <div style={ style.heading } key={ 'home_heading' }>Charity Profile</div>\r\n          <div style={ style.outline } key={ 'home_link' }><Link to=\"profile\" params={{ charitySlug: \"Test Profile\" }}>Profile</Link></div>\r\n          <div style={ style.outline } key={ 'home_input' }><Input i18n={{ name: 'profile_test', label: 'Input Label' }} /></div>\r\n        </GridLayout>\r\n      </Title>\r\n    );\r\n  }\r\n});\r\n```"}}