title: Server-side React with pure components
body: <p>I am trying to build an isomorphic React app that adheres to best practices. I am currently only trying to find a good system for the server. Here are some of my requirements:</p>
  
  <h2>Requirements</h2>
  
  <ul>
  <li>I want to use <a href="https://github.com/rackt/react-router" rel="nofollow">react-router</a></li>
  <li>I am trying to avoid a flux-architecture, because it is overkill for my simple app</li>
  <li>I want my React components to be pure, so they should not store model data in their internal states</li>
  <li>React components should also <strong>not</strong> fetch the data they need themselves, this data should be passed to them through <code>props</code></li>
  <li>If a component requires data to be loaded asynchronously, that should happen on the server before the render</li>
  </ul>
  
  <h2>Simple Sample Application</h2>
  
  <p>I made a little  sample application that is supposed to illustrate my problems/confusion: <a href="https://github.com/maximilianschmitt/ipman" rel="nofollow">https://github.com/maximilianschmitt/ipman</a></p>
  
  <p>Basically, the <strong>component tree</strong> looks like this:</p>
  
  <pre><code>RouteHandler
    App
      RouteHandler
        Home
        Ip
  </code></pre>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>'use strict';
  
  const Router = require('react-router');
  const App = require('./components/app');
  const Home = require('./components/home');
  const Ip = require('./components/ip');
  const Route = Router.Route;
  
  const routes = (
    &lt;Route handler={App}&gt;
      &lt;Route name="home" path="/" handler={Home} /&gt;
      &lt;Route name="ip" path="/ip" handler={Ip} /&gt;
    &lt;/Route&gt;
  );
  
  module.exports = routes;
  </code></pre>
  
  <p><strong>components/ip.js</strong></p>
  
  <pre><code>class Ip extends React.Component {
    render() {
      return &lt;div&gt;Your ip is: {this.props.ip || 'undefined'}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <h2>My Question/Task is:</h2>
  
  <ul>
  <li>If I navigate to <code>/ip</code>, I want the server to request its own ip address from <a href="http://ip.jsontest.com" rel="nofollow">http://ip.jsontest.com</a>, somehow pass it through to the <code>Ip</code> component and then render everything down to a string for the client to see as HTML.</li>
  <li>I think I want to avoid making HTTP requests inside components, I want to instead pass through the necessary information through <code>props</code></li>
  </ul>
  
  <p>I understand that libraries such as <a href="http://alt.js.org/" rel="nofollow">alt.js</a> and other isomorphic flux-implementations solve this through the concept of stores but I'm wondering if this is not a bit overkill.</p>
  
  <p>Is there a simple way to add the desired functionality?</p>