Q:

Meteor subscribe first fetch empty data then real data

I published data on the server side, but when I subscribe the data, I first got empty and then real data. How can I subscribe the real data at first?
class BlogItem extends Component{
  render(){
      console.log(this.props.posts);
      return(
        this.props.posts.map(post =>{
          return(
            <li className="list-group-item" key={post._id}>
              title:{post.title}
            </li>
          );
        })
      );
  };
}

export default createContainer((props) => {
  Meteor.subscribe('posts');
  return { posts: Posts.find({}).fetch() };
}, BlogItem);

publish on server:
Meteor.startup(() => {
  Meteor.publish('posts', function() {
   return Posts.find({});
 });
});

A:

There is no way to make the data get to the client faster. That is how a subscription works. To deal with it, use the subscription handle to test if it is ready and show a loader in the meantime.
class BlogItem extends Component {
  render() {
    const {ready, posts} = this.props;
    if (!ready) return (<div>loading...</div>);
    return (
      <ul>
        posts.map(post => (
          <li className="list-group-item" key={post._id}>
            title:{post.title}
          </li>
        ));
      </ul>
    );
  }
}

export default createContainer(() => {
  const handle = Meteor.subscribe('posts');
  return {
      ready: handle.ready(),
      posts: Posts.find({}).fetch(),
  };
}, BlogItem);

