SSR - withTracker - Did not expect server HTML to contain a <div> in <div>

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 !

From my continuous researches I should find a way to feed the data I get on the server directly to the client before rendering. Apparently it is doable with redux but I would like to keep redux only for my UI state and use React state and / withTracker for my data states, any idea how I could feed the data from the server to the client rendering ?

Interesting. I’m having this problem too.
I’ve found an article which may solve this problem. I’ve not tested yet but it looks promise.

Thanks for the lead, but somehow did not manage t osolve my problem… I am dying here, no one has any idea how to help ?

You might check out react-server if you’re interested in pulling in data server-side before sending to the client

I guess you just have to live with that error since technically, that is the expected behavior with meteor’s reactivity.

Well I had to go to the road where I put my data state in Redux… Sad I couldn’t find a better solution.

@sh4d0w : the server-side rendering worked just fine, it’s the first client side rendering without data beeing fed to the component that created the error.