title: React fetch data in server before render
body: <p>I'm new to reactjs, I want to fetch data in server, so that it will send page with data to client.</p>
  
  <p>It is OK when the function getDefaultProps return dummy data like this {data: {books: [{..}, {..}]}}.</p>
  
  <p>However not work with code below. The code execute in this sequence with error message "Cannot read property 'books' of undefined"</p>
  
  <ol>
  <li>getDefaultProps</li>
  <li>return</li>
  <li>fetch</li>
  <li>{data: {books: [{..}, {..}]}}</li>
  </ol>
  
  <p>However, I expect the code should run in this sequence</p>
  
  <ol>
  <li>getDefaultProps</li>
  <li>fetch</li>
  <li>{data: {books: [{..}, {..}]}}</li>
  <li>return</li>
  </ol>
  
  <p>Any Idea?</p>
  
  <pre><code>statics: {
      fetchData: function(callback) {
        var me = this;
  
        superagent.get('http://localhost:3100/api/books')
          .accept('json')
          .end(function(err, res){
            if (err) throw err;
  
            var data = {data: {books: res.body} }
  
            console.log('fetch');                  
            callback(data);  
          });
      }
  
  
  getDefaultProps: function() {
      console.log('getDefaultProps');
      var me = this;
      me.data = '';
  
      this.fetchData(function(data){
          console.log('callback');
          console.log(data);
          me.data = data;      
        });
  
      console.log('return');
      return me.data;            
    },
  
  
    render: function() {
      console.log('render book-list');
      return (
        &lt;div&gt;
          &lt;ul&gt;
          {
            this.props.data.books.map(function(book) {
              return &lt;li key={book.name}&gt;{book.name}&lt;/li&gt;
            })
          }
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>