Hi again everyone,
To continue on my quest to SSR with Meteor/React/Redux I am facing another issue. I know where the issue is, just don’t know how to solve it without “deactivating” SSR for this page (which would kinda loose the point of SSR). Here is the code I am trying to render:
class Index extends Component {
render() {
const categories = this.props.categories.map((category) => {
return <div key={category._id}>{category.name}</div>
});
if(!this.props.ready){
return null
}
return (
<div className="index">
<div className="index__left"> content here</div>
<div className="index__right">
<div>{this.props.categories ? categories : undefined}</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);
I thought it was ok, and it actually renders ok, but with a strange error in the console :
Warning: Did not expect server HTML to contain a <div> in <div>.
From my research it means the tree rendered on server side and client side is not the same… which is true as on client siee it first renders with no category and then with category when sub is ready.
Here are my question or my request for help:
- any idea how to solve this while keeping the sub/pub system ?
- a way to solve this without the sub/pub system ? (static rendering from server ? but I still need the data on client I guess ?)
Thanks a lot for the help !