Render react on server - Githubissues

emilingerslev commented 9 years ago

One of the really awesome things that react support is server rendered content, making time to glass much shorter. It also leverages basic search engine support. It would be great with a good example on preloading, with data, and hooking the app up when Javascript libs are loaded on the client.

emilingerslev commented 9 years ago

I'd like to add the example on the react.js website, but couldn't find it right now. Will look for it :)

lynnaloo commented 9 years ago

Are you talking about this? https://github.com/mhart/react-server-example

emilingerslev commented 9 years ago

Yeah found that one too. It is some of this stuff, but react documentation had something on this, I'm sure...

It's actually not that complex. I do it like this:

let express = require('express'),
    app = express(),
    React = require('react');

import {MainSection} from './app.jsx';

let reactApp = React.createFactory(MainSection);

app.get('/', function(req, res) {    

  let props = {name: 'world'};
  let currentReactApp = reactApp(props);
  let appHtml = React.renderToString(currentReactApp);

  res.setHeader('Content-Type', 'text/html');

  res.send(
    '<!DOCTYPE html>' +
    '<html><head>' +
    '<script>window.initialData = ' + safeStringify(props) + ';</script>' +
    '</head><body>' +
    '<div id=content>' + appHtml + '</div>' +
    '<script src="/app.js"></script>' +
    '</body></html>'
  );
});

app.use(express.static('./dist'));

function safeStringify(obj) {
  return JSON.stringify(obj).replace(/<\/script/g, '<\\/script').replace(/<!--/g, '<\\!--')
}

app.listen(3000);

As you see, I use express in this example and es6 syntax here, but I'm sure you get the picture.

lynnaloo commented 9 years ago

I'm confused as to what you're asking for in this issue? Are you looking for some examples or suggesting some changes to Mullet? I don't have any plans to make this an isomorphic React app. I'd probably prefer doing that in a separate boilerplate application so I have examples of both.

lynnaloo commented 9 years ago

If you want to fork and create iso-mullet, I'd love to see it!

emilingerslev commented 9 years ago

Sorry for being to vague. My proposal is to add a route that returns a pre-rendered react app. This doesn't require too much since its already already javascript on but sides. But yeah it tastes a bit of an isomorphic react app. I'll consider doing a fork :)

paOol commented 9 years ago

Imo, the ideal isomorphic boilerplate would be

-hapi / react -MVC directory structure -webpack all configured to automatically compile jsx/css on save -react router configured to be a single page app -ES6 optional

I may end up doing it myself.

lynnaloo commented 9 years ago

I would love to see a Mullet fork of that. If either of you do it, please let me know.

I've been working on another application using isomorphic React + React Router and it's a lovely combination. I haven't has a much time to work on this project in the last couple months, so I probably won't get around to creating Iso-mullet in the near future.

lynnaloo / mullet

Render react on server #22