title: Isomorphic flux render on server after all requests
body: <p>I am having trouble figuring out the best way for the serve to render my react components only after the http requests have been resolved.</p>
  
  <p>For example:</p>
  
  <p>component A &lt;- component B &lt;- component C (C triggers an action which makes a call to the API and returns data to render, in the mean time just renders 'loading'). </p>
  
  <p>When inspecting my source code, I only see 'loading' and would like, for SEO purposes, the server to wait till component C's call has resolved and rendered. </p>
  
  <p>In theory, that sounds easy because the server should call that action itself and wait till the action is finished then call <code>react.renderToString()</code>, like this:</p>
  
  <pre><code>server.get('/', function (req, res, next) {
      showMessages({}, function showMessagesCallback() { //add a callback
          var html = React.renderToString(ChatComponent());
          res.send(html);
      });
  });
  </code></pre>
  
  <p>But what if multiple components make action calls and I need to wait for multiple actions to solve and then call <code>renderToString</code></p>
  
  <p>Instead, the requests are picked up on the client side. My server file:</p>
  
  <pre><code>/**
   * This leverages Express to create and run the http server.
   * A Fluxible context is created and executes the navigateAction
   * based on the URL. Once completed, the store state is dehydrated
   * and the application is rendered via React.
   */
  
  import express from 'express';
  import path from 'path';
  import serialize from 'serialize-javascript';
  import {navigateAction} from 'fluxible-router';
  import debugLib from 'debug';
  import React from 'react';
  import app from './app';
  import HtmlComponent from 'components/Html';
  const htmlComponent = React.createFactory(HtmlComponent);
  
  const debug = debugLib('quran-com');
  
  const server = express();
  server.set('state namespace', 'App');
  server.use('/public', express.static(path.join(__dirname, '/build')));
  server.use('/images', express.static(path.join(__dirname, '/client/images')));
  server.use('/fonts', express.static(path.join(__dirname, '/client/styles/fonts')));
  
  server.use((req, res, next) =&gt; {
      let context = app.createContext();
  
      debug('Executing navigate action');
      context.getActionContext().executeAction(navigateAction, {
          url: req.url
      }, (err) =&gt; {
          if (err) {
              if (err.status &amp;&amp; err.status === 404) {
                  next();
              } else {
                  next(err);
              }
              return;
          }
  
          debug('Exposing context state');
          const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
  
          debug('Rendering Application component into html');
          const html = React.renderToStaticMarkup(htmlComponent({
              context: context.getComponentContext(),
              state: exposed,
              markup: React.renderToString(context.createElement())
          }));
  
          debug('Sending markup');
          res.type('html');
          res.write('&lt;!DOCTYPE html&gt;' + html);
          res.end();
      });
  });
  
  const port = process.env.PORT || 8000;
  server.listen(port);
  console.log('Listening on port ' + port);
  
  export default server;
  </code></pre>
  
  <p>what's the best way to do this?</p>