title: Architecture for an isomorphic app using React.js and Flux
body: <p>I'm looking for the best technology/architecture choices for my isomorphic app. 
  Here are my constraints, due to what has already been developed, what we need and what we'd love:</p>
  
  <ul>
  <li>All front-end in <strong>React.js</strong>, with layout(s), child components, etc.</li>
  <li><strong>Flux</strong> architecture</li>
  <li>As I said, <strong>server-side rendering</strong> (the current server is built on express.js, it can change but if we can keep it it would save some time)</li>
  <li>Very <strong>simple/flexible router</strong>, like react-router or even just a json route:component, I don't know</li>
  <li>Each component should be able to <strong>ask for the data it needs before render</strong></li>
  <li>Each component should be able to have a specific <strong>context</strong> (set page title, insert specific css, set meta tags, etc.)</li>
  </ul>
  
  <p>To be clear, we need to be able to add a page/feature on the app by simply saying in the router file "This route needs to render this component, inside this layout" and the component should be independent, asking "ok, before everything, I need these data from the api, then, I need this css file, my title is 'title', ect.".</p>
  
  <p><strong>The architecture we currently have is a mess, not maintainable, not scalable, not flexible enough</strong>:</p>
  
  <p>With and Express.js router, on each route we set context information, make an api call and then render a jade file with specific css and js, in which we insert the jsx component. Here is an exemple:</p>
  
  <p>router.js</p>
  
  <pre class="lang-js prettyprint-override"><code>router.get('/profile', function(req, res, next) {
      // make the api call
      api.getProfile(function(err, profile) {
          if (err) {
              next(err);
          }
          // set props for the react component
          var props = {
              profile: profile
          };
          // render the react component
          var ProfileEditor = React.createFactory(
              require('path/to/components/profile.jsx')
          );
          var profileEditor = React.renderToString(
              ProfileEditor(props)
          );
          // render the jade file
          res.render('profile', {
              props: safeStringify(props),
              profile:profileEditor
          });
      });
  });
  </code></pre>
  
  <p>profile.jade</p>
  
  <pre class="lang-jade prettyprint-override"><code>// extend a layout
  extends ../layout   
  
  // ask for specific styles if need
  block styles
  
  // insert the server side rendered component
  block component
      #profile 
          != profile
  
  block scripts
      // ask for specific scripts if needed
      script(src="https://maps.googleapis.com/maps/api/js?key=key&amp;libraries=places")
      // print props for the client side rendering
      script(id="props" type="application/json")
          |!{ props }
      // set the react component
      script(src="/bundles/profile.js")
  </code></pre>
  
  <p>profile.jsx</p>
  
  <pre class="lang-jsx prettyprint-override"><code>var React = require("react");
  var store = require ('../stores/profile');
  var actions = require ('../actions/profile');
  
  var Profile = React.createClass({
  
      // As usual
  
      render: function(){
          return(
          &lt;div&gt;
                  // Profile component
          &lt;/div&gt;
          )
      }
  
  });
  
  // re-render client side using the same props from the script tag
  if (typeof window !== 'undefined') {
      var ProfileFactory = React.createFactory(Profile);
      var mountNode = document.getElementById("profile");
      var props = JSON.parse(document.getElementById("props").innerHTML);
      React.render(new ProfileFactory(props), mountNode);
  }
  
  module.exports = Profile;
  </code></pre>
  
  <p>Over the project grows, the less we are satisfied with that.</p>
  
  <p>The solutions we've been trying to explore are :</p>
  
  <ul>
  <li><p>yeoman generator react-fullstack: <a href="https://github.com/kriasoft/react-starter-kit/tree/yeoman-generator" rel="nofollow noreferrer">https://github.com/kriasoft/react-starter-kit/tree/yeoman-generator</a> > we find it very complicated and we didn't managed how to simply fetch data for each component. Although it's exactly what we need about context for each component. </p></li>
  <li><p>express.js + react-router: <a href="https://stackoverflow.com/questions/28553904/client-routing-using-react-router-and-server-side-routing">Client Routing (using react-router) and Server-Side Routing</a>, <a href="http://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/" rel="nofollow noreferrer">http://putaindecode.fr/posts/js/reactjs-et-rendu-serverside/</a>  > same problem with data, and we've not been able to set context. Also we are not so comfortable with the initial render server-side and then everything client side, at the opposite of what we currently have.</p></li>
  </ul>
  
  <p>We feel like nothing is really adapted while we don't develop something really particular, just a platform to read/write data from an api.</p>
  
  <p>What would be the best, simple, flexible, limpid architecture for us regarding our constraints? What choices do we need to do?</p>