0

I am trying to devellop a SSR app using meteor and react. Everything went pretty fine until I got the following error message :

Warning: Did not expect server HTML to contain a <div> in <div>.

which is apparently due to a difference between the tree created on server and the one on client.

I have the following to get and then show the data :

class Index extends Component {
    renderCategories() {
        return this.props.categories.map((category) => {
            return <div key={category._id}>{category.name}</div>
        })
    }

    render() {
        if(!this.props.ready){
            return null
        }
        return (
            <div className="index">
                <div className="index__right">
                    {this.props.categories ? this.renderCategories() : <div></div>}
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({ selectedIndex : state.selectedIndex });

const TrackerIndex = withTracker(() => {
    let ready = true
    if(Meteor.isClient){
        let categoriesSub = Meteor.subscribe('categories');
        ready =  categoriesSub.ready();
    }
    return {
        categories: Categories.find({}).fetch(),
        ready
    }
})(Index)

export default connect(mapStateToProps)(TrackerIndex);

What shows on the screen is actually what I expect (list of categories) and it comes properly from Server as seen in the source code. I think the problem is that on server side I have my collection, then I get nothing on client side, then mysubscription and data again, but I do not get how to manage this difference due to the SSR, ideas how I could solve this ?

Ivo
  • 2,308
  • 1
  • 13
  • 28
  • If the page is rendered properly on server side, then you need to pass the state created on server side and initialize the client side store with that state. You can refer more here: https://stackoverflow.com/questions/33749759/read-stores-initial-state-in-redux-reducer – Sunil Chaudhary Aug 07 '18 at 08:04
  • That's ok if I put all my react state in redux but I am trying to avoid this and keep redux for UI state while data are managed by Meteor withTracker and React. – Ivo Aug 08 '18 at 06:36

0 Answers0