Document server side rendering

andreypopp commented 10 years ago

Possibly needs a nice API instead of a couple of function calls.

ahdinosaur commented 10 years ago

+1. until the nice API, what's the couple of function calls?

andreypopp commented 10 years ago

@ahdinosaur https://github.com/andreypopp/rrouter/blob/master/lib/routing/Routing.js#L30-L34

ahdinosaur commented 10 years ago

thanks! :)

ahdinosaur commented 10 years ago

server side rendering example: https://github.com/derekrazo/directory-ui/blob/30a369288603b07a8b7f789d3943473b45edc509/src/server.coffee#L30-L47. please excuse the coffeescript. :P

andreypopp commented 10 years ago

That's awesome! I think we just need to make it into a reusable connect/express middleware for now.

stereosteve commented 10 years ago

Example with Express + latest version of RRouter:

var React = require('react')
var RRouter = require('rrouter')
var routes = require('./app/routes')

app.use(function (req, res, next) {
  var path = req.path
  var query = req.originalUrl.substr(path.length + 1)
  RRouter.route(routes, path, query).then(function(execute) {
    execute(function(view) {
      if (!view) {
        // no route match 
        return next()
      }
      var html = React.renderComponentToString(view)
      res.send(html)
    })
  })
})

langpavel commented 10 years ago

@stereosteve Thanks for example, It works for me on server until I use <Link to="...">.:

  Error: Invariant Violation: no routing found in context
      at invariant (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/lib/invariant.js:52:19)
      at RoutingContextMixin.getRouting (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/lib/RoutingContextMixin.js:51:5)
      at boundMethod [as getRouting] (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactCompositeComponent.js:1434:21)
      at LinkMixin.href (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/lib/LinkMixin.js:37:19)
      at boundMethod [as href] (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactCompositeComponent.js:1434:21)
      at React.createClass.render (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/lib/Link.js:19:31)
      at null.<anonymous> (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactCompositeComponent.js:1394:34)
      at null._renderValidatedComponent (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactPerf.js:57:21)
      at null.<anonymous> (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactCompositeComponent.js:947:14)
      at null.mountComponent (/home/langpavel/Projects/react/koa-react-fluxxor-rroute-demo/node_modules/rrouter/node_modules/react/lib/ReactPerf.js:57:21)

What I'm doing bad? Does anybody know?

Source of routes.jsx:

/** @jsx React.DOM */

var React = require('react')
var RRouter = require('rrouter')
var Routes = RRouter.Routes
var Route = RRouter.Route
var Link = RRouter.Link

var MainPage = React.createClass({
  render: function() {
    return (
      <html>
        <title>Main</title>
        <body>
          {'Main '}
          <Link to="about">About</Link>
        </body>
      </html>
    );
  }
});

var AboutPage = React.createClass({
  render: function() {
    return (
      <html>
        <title>About</title>
        <body>
          About
        </body>
      </html>
    );
  }
});

module.exports = (
  <Routes>
    <Route name="main" path="/" view={MainPage} />
    <Route name="about" path="/about" view={AboutPage} />
  </Routes>
);

Snippet from server/app.js (unsing Koa)

var app = koa();

app.use(function *(next) {
  var path = this.request.url;
  //var query = this.req.originalUrl.substr(path.length + 1);
  var execute = yield RRouter.route(routes, path, '' /*, query*/);

  var markup = yield function(cb) {
    execute(function (view, match) {
      if (!view)
        return cb();
      cb(null, {
        view: view,
        match: match
      })
    });
  }

  if (markup && markup.view)
    this.body = React.renderComponentToString(markup.view);
  else
    yield next
})

andreypopp / rrouter

Document server side rendering #10