Server rendered routes with async data

Author: revathskumar

.babelrc

@@ -0,0 +1,3 @@
+{
+  presets:['es2015','react', 'stage-0']  
+}

app.js

@@ -1,3 +1,4 @@
+require('babel-register');
 var express = require('express');
 var path = require('path');
 var favicon = require('serve-favicon');
@@ -14,6 +15,7 @@ var app = express();
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'jade');
 
+app.locals.pretty = true;
 // uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));

client/app-root.jsx

@@ -0,0 +1,18 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router';
+
+class AppRoot extends Component {
+  render() {
+    return (
+      <div>
+        <h2>React Universal App</h2>
+        <Link to="/home"> Home </Link>
+        <Link to="/list"> List </Link>
+        <Link to="/about"> About </Link>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default AppRoot;

client/app.jsx

@@ -1,60 +1,11 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {render} from 'react-dom';
-import {Router, browserHistory, Route} from 'react-router';
+// import {Router, history, match} from 'react-router';
 
-class List extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {items: []};
-  }
-
-  componentDidMount() {
-    this.fetchList();
-  }
-
-  fetchList() {
-    fetch('http://jsonplaceholder.typicode.com/users')
-      .then(res => {
-        return res.json();
-      })
-      .then(data => {
-        console.log(data);
-        this.setState({
-          items: data
-        });
-      })
-      .catch(err => {
-        console.log(err);
-      });
-  }
-
-  render() {
-    return (
-      <ul>
-        {this.state.items.map(item => {
-          return <li key={item.id}>{item.name}</li>;
-        })}
-      </ul>
-    );
-  }
-}
-
-const App = () => {
-  return (
-    <div>
-      <h2>React Universal App</h2>
-      <List/>
-    </div>
-  );
-};
-
-const AppRouter = () => {
-  return (
-    <Router history={browserHistory}>
-      <Route path="/" component={App}/>
-    </Router>
-  );
-};
+import AppRouter from './router.jsx';
 
+// match({history, routes}, (error, redirectLocation, renderProps) => {
+// //   render(<Router {...renderProps}/>, document.querySelector('#app'));
+// });
 render(<AppRouter/>, document.querySelector('#app'));
 

client/home.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <div>
+      <h1>Home</h1>
+    </div>
+  );
+};
+
+export default Home;

client/list.jsx

@@ -0,0 +1,43 @@
+import React, {Component} from 'react';
+
+class List extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = this.context.data || window.__INITIAL_STATE__ || {items: []};
+  }
+
+  componentDidMount() {
+    this.fetchList();
+  }
+
+  fetchList() {
+    fetch('http://jsonplaceholder.typicode.com/users')
+      .then(res => {
+        return res.json();
+      })
+      .then(data => {
+        this.setState({
+          items: data
+        });
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  }
+
+  render() {
+    return (
+      <ul>
+        {this.state.items.map(item => {
+          return <li key={item.id}>{item.name}</li>;
+        })}
+      </ul>
+    );
+  }
+}
+
+List.contextTypes = {
+  data: React.PropTypes.object
+};
+
+export default List;

client/router.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Router, browserHistory, Route} from 'react-router';
+
+import AppRoot from './app-root.jsx';
+import Home from './home.jsx';
+import List from './list.jsx';
+
+const AppRouter = () => {
+  return (
+    <Router history={browserHistory}>
+      <Route path="/" component={AppRoot}>
+        <Route path="/home" component={Home}/>
+        <Route path="/list" component={List}/>
+      </Route>
+    </Router>
+  );
+};
+
+export default AppRouter;

package.json

@@ -4,9 +4,11 @@
   "private": true,
   "scripts": {
     "start": "node ./bin/www",
+    "dev": "DEBUG=server-render/* nodemon ./bin/www",
     "webpack:server": "webpack --debug --hot --output-path-info --devtool=eval --display-modules --watch -d"
   },
   "dependencies": {
+    "babel-register": "^6.9.0",
     "body-parser": "~1.13.2",
     "cookie-parser": "~1.3.5",
     "debug": "~2.2.0",
@@ -16,6 +18,7 @@
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
     "react-router": "^2.4.1",
+    "request": "^2.72.0",
     "serve-favicon": "~2.3.0"
   },
   "devDependencies": {
@@ -27,6 +30,7 @@
     "babel-polyfill": "^6.7.2",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "eslint-config-xo": "^0.14.1",
     "eslint-config-xo-react": "^0.7.0",
     "eslint-config-xo-space": "^0.13.0",
@@ -40,6 +44,7 @@
     "esnext": true,
     "space": 2,
     "globals": [
+      "window",
       "document",
       "fetch"
     ],

routes/index.js

@@ -0,0 +1,78 @@
+import express from 'express';
+import request from 'request';
+import React, {Component} from 'react';
+import {renderToString} from 'react-dom/server';
+import {RouterContext, match, createRoutes} from 'react-router';
+
+import appRouter from '../client/router.jsx';
+
+const routes = createRoutes(appRouter());
+
+class DataProvider extends Component {
+  getChildContext() {
+    return {data: this.props.data};
+  }
+  render() {
+    return <RouterContext {...this.props}/>;
+  }
+}
+DataProvider.propTypes = {
+  data: React.PropTypes.object
+};
+DataProvider.childContextTypes = {
+  data: React.PropTypes.object
+};
+
+/*eslint-disable*/
+const router = express.Router();
+/*eslint-enable*/
+
+/* GET home page. */
+router.get('/', (req, res) => {
+  match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
+    if (error) {
+      res.status(500).send(error.message);
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
+    } else if (renderProps) {
+      const content = renderToString(<RouterContext {...renderProps}/>);
+      res.render('index', {title: 'Express', content});
+    } else {
+      res.status(404).send('Not Found');
+    }
+  });
+});
+
+router.get('/home', (req, res) => {
+  match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
+    if (error) {
+      res.status(500).send(error.message);
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
+    } else if (renderProps) {
+      const content = renderToString(<RouterContext {...renderProps}/>);
+      res.render('index', {title: 'Express', content});
+    } else {
+      res.status(404).send('Not Found');
+    }
+  });
+});
+router.get('/list', (req, res) => {
+  match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
+    if (error) {
+      res.status(500).send(error.message);
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search);
+    } else if (renderProps) {
+      request('http://jsonplaceholder.typicode.com/users', (error, response, body) => {
+        const data = {items: JSON.parse(body)};
+        const content = renderToString(<DataProvider {...renderProps} data={data}/>);
+        res.render('index', {title: 'Express', data, content});
+      });
+    } else {
+      res.status(404).send('Not Found');
+    }
+  });
+});
+
+module.exports = router;

routes/index.jsx

@@ -1,5 +1,6 @@
 extends layout
 
 block content
-  h1= title
-  div#app
+  script(type='text/javascript').
+    window.__INITIAL_STATE__ = !{JSON.stringify(data)}
+  div.container#app!= content

views/index.jade

@@ -3,6 +3,9 @@ html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
+    link(rel="stylesheet", href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css")
   body
     block content
+    script(stype='text/javascript', src="https://code.jquery.com/jquery-2.0.0.js")
+    script(stype='text/javascript', src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js")
     script(type='text/javascript', src='/javascripts/app.js')