diff --git a/src/components/Html.js b/src/components/Html.js index 2fc844a..d44059c 100644 --- a/src/components/Html.js +++ b/src/components/Html.js @@ -21,9 +21,11 @@ function Html({ css, js, html, head, initialState }) {
- @@ -35,7 +37,7 @@ Html.propTypes = { js: PropTypes.string.isRequired, html: PropTypes.string, head: PropTypes.object.isRequired, - initialState: PropTypes.object.isRequired + initialState: PropTypes.object }; export default Html; diff --git a/src/env/development.json b/src/env/development.json index 37358a2..2b220f9 100644 --- a/src/env/development.json +++ b/src/env/development.json @@ -1,5 +1,6 @@ { // Env files support comments "CLIENT_ENV": "development", - "API_ENDPOINT": "http://localhost:6060/api" + "API_ENDPOINT": "http://localhost:6060/api", + "DISABLE_UNIVERSAL_RENDERING": true } diff --git a/src/server.js b/src/server.js index dca30ae..95b92b5 100644 --- a/src/server.js +++ b/src/server.js @@ -1,12 +1,26 @@ import React from 'react'; import { renderToString, renderToStaticMarkup } from 'react-dom/server'; -import { match, RouterContext } from 'react-router'; -import { Provider } from 'react-redux'; import Helmet from 'react-helmet'; -import configureStore from './store/configureStore'; -import routes, { NotFoundComponent } from './routes'; import Html from './components/html'; +let match; +let RouterContext; +let Provider; +let configureStore; +let routes; +let NotFoundComponent; + +if (!process.env.DISABLE_UNIVERSAL_RENDERING) { + match = require('react-router').match; + RouterContext = require('react-router').RouterContext; + Provider = require('react-redux').Provider; + configureStore = require('./store/configureStore').default; + routes = require('./routes').default; + NotFoundComponent = require('./routes').NotFoundComponent; +} + +const DOCTYPE = ''; + function fetchComponentData(renderProps, store) { const requests = renderProps.components // filter undefined values @@ -45,28 +59,31 @@ function getCssFromStats(stats) { return stats.assetsByChunkName.client.find(asset => /\.css$/.test(asset)); } -function render(stats, renderProps, store) { - const js = getJsFromStats(stats); - const css = getCssFromStats(stats); - - const markup = renderToString( +function renderApp(renderProps, store) { + const html = renderToString( ); + const state = store.getState(); + + return [html, state]; +} + +function render(stats, html = '', state) { + const js = getJsFromStats(stats); + const css = getCssFromStats(stats); const head = Helmet.rewind(); - const html = renderToStaticMarkup( + return renderToStaticMarkup( + initialState={state} /> ); - - return html; } /** @@ -74,7 +91,7 @@ function render(stats, renderProps, store) { * @param {object} stats Webpack stats output * @return {function} middleware function */ -export default stats => { +export default (stats) => { /** * @param {object} req Express request object @@ -82,6 +99,17 @@ export default stats => { * @return {undefined} undefined */ return (req, res, next) => { + if (process.env.DISABLE_UNIVERSAL_RENDERING) { + let html; + try { + html = render(stats); + } catch (ex) { + return next(ex); + } + return res.status(200) + .send(`${DOCTYPE}${html}`); + } + match({ routes, location: req.url @@ -96,12 +124,13 @@ export default stats => { .then(() => { let html; try { - html = render(stats, renderProps, store); + const [markup, state] = renderApp(renderProps, store); + html = render(stats, markup, state); } catch (ex) { return next(ex); } res.status(isNotFound(renderProps) ? 404 : 200) - .send(`${html}`); + .send(`${DOCTYPE}${html}`); }); } });