title: Fetching data before rendering server side
body: <p>Right now I'm discovering <strong>Este.js</strong> and I have a little issue with isomorphic apps. I don't understand how to make api call before rendering server side with renderToString().</p>
  
  <p>One solution consists in doing all the data fetching at the router level using React Router. Depending on the top level route, I can predict which data will be needed, make the api call, and then call React.renderToString.</p>
  
  <p>Great, but I still have to declare the data dependencies at the component level AND in the router level. I end up writing the same code twice, and I don't believe it's the best way to do it.</p>
  
  <p>EDIT : Ok, for now I'm able to do somewhat what I want. Using React-Router and this <a href="http://rackt.github.io/react-router/#Router.run" rel="noreferrer">link</a> I've been able to made the following : </p>
  
  <p>Giving this global app state, I want to prefetch todos when pointing /todos </p>
  
  <h2>initialstate.js</h2>
  
  <pre><code>{
    auth: {
      data: null,
      form: null
    },
    examples: {
      editable: {
        state: null,
        text: 'Some inline-editable text.'
      }
    },
    i18n: {
      formats: {},
      locales: initialLocale,
      messages: messages[initialLocale]
    },
    pendingActions: {},
    todos: {
      editables: {},
      newTodo: {
        title: ''
      },
      list: [{
        id: 1,
        title: 'first todo yipiyo'
      }]
    },
    users: {
      viewer: null
    }
  }
  </code></pre>
  
  <h2>todos.react.js</h2>
  
  <p>In todo component I declare a static function fetchData. Because I want to retrieve the correct key in my appState, I pass 'list' as a param. Feels dirty.</p>
  
  <pre><code>class Todos extends Component {
  
    static fetchData(){
      return actions.loadAllTodos('list');
    }
  
    componentDidMount(){
      Todos.fetchData();
    }
  
    render() {
      ...
    }
  
  }
  </code></pre>
  
  <h2>actions.js</h2>
  
  <p>Api call and stuff, I pass the key to the promise - Feels hacky</p>
  
  <pre><code>export function loadAllTodos(key) {
  
    const promise = new Promise((resolve, reject) =&gt; {
  
      Api.get()
      .then(res =&gt; {
        res.key = key; //hacky time
        resolve(res)
      })
      .catch(err =&gt; {
        reject(err);
      })
  
    });
  
    return dispatch(loadAllTodos, promise);
  
  }
  </code></pre>
  
  <h2>render.js</h2>
  
  <pre><code>router.run((Handler, routerState) =&gt; {
  
    var promise = Promise.all(routerState.routes
          .filter(route =&gt; route.handler.fetchData)
          .map(route =&gt; {
            return route.handler.fetchData();
          })
        );
  
    promise.then(resp =&gt; {
  
      console.log(resp);
  
      //Displays : 
      [ { id: 2, title: 'Im a second todo' },{ id: 3, title: 'I like todo' },
      cursor: 'list' ]
  
      //Some stuff to add resp to appState, using the correct key, yey iso+api=win
      appState = mergeThisWithMagic(appState, resp);
  
      const html = preloadAppStateThenRenderHtml(Handler, appState);
      const notFound = routerState.routes.some(route =&gt; route.name ===
        'not-found');
      const status = notFound ? 404 : 200;
      res.status(status).send(html);
      resolve();
  
    });
  
  
  });
  </code></pre>
  
  <p>As you can see, I'll create a function to update appState with the updated todoList.</p>
  
  <p>Is this ok to do all of this ? I would like to have some feedback please, because I feel like I'm going in a dark path :(.</p>