title: Combining react and jade
body: <p>I am working on an isomorphic javascript app with express + react.  We started out using jade for server side templates for static content, but combining the two is quickly becoming unwieldy. We have ended up with something like this:</p>
  
  <p>In the express routes:</p>
  
  <pre><code>router.get("/", function(req, res) {
    var webpackStats = require('../../config/webpack-stats.json');
    var reactHtml = React.renderToString(HiwApp({}));
    var slideshowHtml = React.renderToString(slideshowApp({}));
    var config = {
      webpackStats: webpackStats,
      reactOutput: reactHtml,
      slideshowHtml: slideshowHtml
    };
    res.render("how_it_works/howitworks", config);
  });
  </code></pre>
  
  <p>In Jade:</p>
  
  <pre><code>body
    .company-logo.center
    #react-main-mount
      != reactOutput
    include ./content_block_1.jade
  
    include ./content_block_2.jade
  
    #slideshow-main-mount
      != slideshowHtml
  </code></pre>
  
  <p>This is very brittle-if we want jsx then a jade template then more jsx, we have to make sure we get the order right.</p>
  
  <p>My idea is to do it <em>all</em> with jsx. I know there is React.renderToStaticMarkup for this sort of thing, but that doesn't solve the problem of mixing dynamic with static pages.  </p>
  
  <p>The big questions: if we decide to do all of this with jsx (say layout.jsx which contains all components), then call <code>React.renderToString(App({});</code>, will this be a major performance hit? If so, is there a better way to do it to easily combine static and dynamic blocks?</p>