javascript - Combining react and jade -

i working on isomorphic javascript app express + react. started out using jade server side templates static content, combining 2 becoming unwieldy. have ended this:

in express routes:

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); }); 

in jade:

body   .company-logo.center   #react-main-mount     != reactoutput   include ./content_block_1.jade    include ./content_block_2.jade    #slideshow-main-mount     != slideshowhtml 

this brittle-if want jsx jade template more jsx, have make sure order right.

my idea all jsx. know there react.rendertostaticmarkup sort of thing, doesn't solve problem of mixing dynamic static pages.

the big questions: if decide of jsx (say layout.jsx contains components), call react.rendertostring(app({});, major performance hit? if so, there better way combine static , dynamic blocks?

although may tiny bit off topic: we stuck jade templates.

basically wanted flexibility use non-react + flux architecture areas of site when , if need arose. our site made of number of smaller sp apps: site, useraccount, team , admin.

why did this?

• smaller filesize , overhead users not accessing sections of site.

• option "opt out" of react , flux if , when need arises.

• simpler, server side authentication.