React-meteor-data with flow-router-ssr

help
1

Hello,

I would like to use react-meteor-data with flow-router-ssr but in the sample app of @arunoda (https://github.com/kadira-samples/meteor-data-and-react), it is react-komposer that “fetch” data.

Can we use react-meteor-data with flow-router-ssr ? what the difference beetween react-komposer and react-meteor-data ?

2

You can take a look at https://github.com/studiointeract/tracker-component/#comparison for a brief comparison and alternatives.

3

Thx for the link but it doesn’t really help me to answer my main question.

Meanwhile, the Tracker-component approach is fine but i don’t understand the reason of two autorun :

this.autorun(() => {
  this.subscribe( 'brand', this.state.brand );
});
this.autorun(() => {
  this.setState({
    ready: this.subscriptionsReady(),
    cars: Models.find({ brand: this.state.brand }).fetch()
  });
 });

And also for the server side rendering part : the guide ask us to install npm package react-mounter but in the example use ReactLayout.render. So i’m little bit confused.

concerning my main question :

  • note that i’m making a meteor package with it’s own routes.
  • I was able to render my layout with createContainer from react-meteor-data. But, the content of my layout component is underneath the content coming from myproject/client/main.html, can someone explain me why ?
4

You have to think of an autorun as a function being executed (and re-executed) when its content is changing.

The first autorun is re-executed once when the subscription is finalized.

The second autorun is re-executed once when the subscription is ready and re-executed again and again each time the content of the collection is changed.

That’s the purpose of using reactive variables inside autorun function.

Hope that help clarify your vision.

PS : I use tracker-component with flow-router-ssr. They work really well together :wink:

5

thx @pierreeric, i understand the double autorun, but why the server side rendering add react-mounter but use ReactLayout.render ?

6

As explained here

If you prefer React 15.x you can use react-mount-layout for that, a fork of react-mounter: npm i --save react-mount-layout@^15.x (for React 15.x, will replace with react-mounter when supporting React 15.x)

7

Well, that’s pretty simple. When you are using ReactDOM client side, you count on an already setup DOM (well, at least, the body, which is always automatically created by browsers). Server side, you can’t count on an already setup DOM, you insert your react components in a stream. react-mounter acts as an umbrella for having an isomorphic API.

8

the react-mounter 1.2.0 bring React 15.x

9

thx ! i think i understand how react-mouter work now, but to be sure, concerning the problem of my components mounted in my package coming underneath the content of myproject/client/main.html, is that because react-mounter add my component server side ?

ps : the myproject/client/main.html is the file that is created when you do a “meteor create super-project”

10

Well, without seeing the code, it’s hard to tell. On my projects, there’s no difference between client side and server side rendered DOM. That would beat the purpose of SSR, as in these cases, React isn’t able to re-user the code generated by the server when the client side is started. Generally, React informs you if there are such discrepancies.