Server-side React with pure components

Question

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:

Requirements

• I want to use react-router
• I am trying to avoid a flux-architecture, because it is overkill for my simple app
• I want my React components to be pure, so they should not store model data in their internal states
• React components should also not fetch the data they need themselves, this data should be passed to them through props
• If a component requires data to be loaded asynchronously, that should happen on the server before the render

Simple Sample Application

I made a little sample application that is supposed to illustrate my problems/confusion: https://github.com/maximilianschmitt/ipman

Basically, the component tree looks like this:

RouteHandler
  App
    RouteHandler
      Home
      Ip

routes.js

'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 = (
  <Route handler={App}>
    <Route name="home" path="/" handler={Home} />
    <Route name="ip" path="/ip" handler={Ip} />
  </Route>
);

module.exports = routes;

components/ip.js

class Ip extends React.Component {
  render() {
    return <div>Your ip is: {this.props.ip || 'undefined'}</div>;
  }
}

My Question/Task is:

• If I navigate to /ip, I want the server to request its own ip address from http://ip.jsontest.com, somehow pass it through to the Ip component and then render everything down to a string for the client to see as HTML.
• I think I want to avoid making HTTP requests inside components, I want to instead pass through the necessary information through props

I understand that libraries such as alt.js and other isomorphic flux-implementations solve this through the concept of stores but I'm wondering if this is not a bit overkill.

Is there a simple way to add the desired functionality?

Answer 1

I got something working that seems like not such a bad solution, based on this article from react-router. You can find the results here: https://github.com/maximilianschmitt/server-side-react