React-router server-side data fetching with nested routes

Frontpage.jsx

var Frontpage = React.createClass({
  getAsyncState: function() {
    var params = this.getParams()
    var query = this.getQuery()
    var getAsyncState = this.constructor.getAsyncState

    if (getAsyncState) {
      var asyncState = getAsyncState(params, query, this.setAsyncState)

      return resolveAsyncState(asyncState, this.setAsyncState)
    }
  },

  setAsyncState: function(state) {
    if (this.isMounted()) {
      this.setState(state)
    }
  },

  componentWillMount: function() {
    var initialData = this.props.initialData && this.props.initialData[this.constructor.displayName]

    if (initialData) {
      this.setState(initialData)
    } else {
      this.getAsyncState()
    }
  },

  statics: {
    getAsyncState: function() {
      return {
        products: ProductAPI.list('frontpage'),
        categories: CategoryAPI.list()
      }
    }
  }
}

server.js

function fetchInitialData(routes, params, query) {
  var promises = routes.reduce(function(promises, route) {
    var getAsyncState = route.handler.getAsyncState

    if (getAsyncState) {
      promises[route.handler.displayName] = Promise.props(getAsyncState(params, query))
    }

    return promises
  }, {})

  return Promise.props(promises)
}

var router = Router.create({
  routes: routes,
  location: request.path
})

router.run(function(Handler, state) {
  fetchInitialData(state.routes, state.params, state.query).then(function(initialData) {
    var html = React.renderToString(<Handler initialData={initialData} />)

    res.render('main', {
      html: html,
      initialData: initialData
    })
  })
})