arunoda / react-komposer

Feed data into React components by composing containers.
MIT License
732 stars 70 forks source link

What about SSR in Meteor Tracker? #135

Open simsim0709 opened 7 years ago

simsim0709 commented 7 years ago

I have a question regarding SSR section

I am using Meteor, React with React Router, and I have implemented getTrackerLoader code from the documentation.

Do I need to take care of SSR on getTrackerLoader?? Something like this.

function getTrackerLoader(reactiveMapper) {
  // here
  if (Meteor.isServer) {
    return;
  }

  return (props, onData, env) => {
    let trackerCleanup = null;
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        // assign the custom clean-up function.
        trackerCleanup = reactiveMapper(props, onData, env);
      });
    });

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}
arunoda commented 7 years ago

You don't need to change here for SSR. But inside your reactiveMapper code.

Like this:

function reactiveMapper(props, onData) {
    if (Meteor.isServer) {
       const post = return Posts.findOne({_id: props.id});
       return onData(null, { post })
    }

    const handle = Meteor.subscribe('post', props.id);
    if (handle.ready()) {
        const post = return Posts.findOne({_id: props.id});
        return onData(null, { post })
    }

    // Indicate a loading screen otherwise
    return onData();
}

I didn't try this. But it should be something like this.

achtan commented 7 years ago

@arunoda this code const post = return Posts.findOne({_id: props.id}) is invalid, can you please explain

@simsim0709 any luck with SSR ?

my code is:

function reactiveMapper(props, onData, {Meteor, FlowRouter, collections}) {
  const list = collections.Estates.find({}).fetch();
  console.log('list', Meteor.isServer, list.length)
  onData(null, {
    loading: !Meteor.subscribe('estates.search', routerParamsToObject(FlowRouter)).ready(),
    list
  });
}

log on server: list true 0 log on client: list false 44

achtan commented 7 years ago

its working, when i put subscription before find call

function reactiveMapper(props, onData, {Meteor, FlowRouter, collections}) {
  const loading = !Meteor.subscribe('estates.search', routerParamsToObject(FlowRouter)).ready() // subscribe first
  const list = collections.Estates.find({}).fetch() // than fetch
  console.log('list', Meteor.isServer, list.length)
  onData(null, {
    loading,
    list
  });
}