diff --git a/common/js/pages/Todos/index.js b/common/js/pages/Todos/index.js index 84c876f..357d5bf 100644 --- a/common/js/pages/Todos/index.js +++ b/common/js/pages/Todos/index.js @@ -3,6 +3,8 @@ import Loadable from 'react-loadable'; import { Loading } from 'components/common'; import { fetchTodos } from 'actions/todos'; +// NOTE: To turn off dynamic imports, import this container normally using: +// import TodosContainer from 'containers/Todos'; const TodosContainer = Loadable({ loader: () => import('../../containers/Todos'), loading: Loading diff --git a/config/index.js b/config/index.js index 94f2dbb..1bbb101 100644 --- a/config/index.js +++ b/config/index.js @@ -1,6 +1,9 @@ const { mapValues, keyBy } = require('lodash'); module.exports = { + // Enable or disable server-side rendering + enableSSR: true, + // Enable or disable dynamic imports (code splitting) enableDynamicImports: false, diff --git a/nodemon.json b/nodemon.json index 19dd079..74efac5 100644 --- a/nodemon.json +++ b/nodemon.json @@ -1,8 +1,8 @@ { "watch": [ + "config/**/*.js", "server/**/*.js", "server/**/*.json", - "server/templates/**/*.html", - "common/js/**/*.js" + "server/templates/**/*.html" ] } diff --git a/server/renderer/handler.js b/server/renderer/handler.js index b455bae..dd67f06 100644 --- a/server/renderer/handler.js +++ b/server/renderer/handler.js @@ -32,6 +32,12 @@ export default function handleRender(req, res) { // Grab the initial state from our Redux store const finalState = store.getState(); + // If SSR is disabled, just render the skeleton HTML. + if (!config.enableSSR) { + const markup = render(null, finalState, []); + return res.send(markup); + } + // See react-router's Server Rendering section: // https://reacttraining.com/react-router/web/guides/server-rendering const matchRoutes = routes => { @@ -88,20 +94,30 @@ export default function handleRender(req, res) { let context = {}, modules = []; - const component = ( - modules.push(moduleName)}> + const getComponent = () => { + let component = ( - - ); + ); + + if (config.enableDynamicImports) { + return ( + modules.push(moduleName)}> + {component} + + ); + } + + return component; + }; // Execute the render only after all promises have been resolved. Promise.all(fetchData).then(() => { const state = store.getState(); - const html = renderToString(component); + const html = renderToString(getComponent()); const bundles = stats && getBundles(stats, modules) || []; const markup = render(html, state, bundles); diff --git a/webpack/development.hot.js b/webpack/development.hot.js index ca6470c..67759c4 100644 --- a/webpack/development.hot.js +++ b/webpack/development.hot.js @@ -18,6 +18,7 @@ const entry = [ // Additional plugins let plugins = [ + ...baseConfig.plugins, new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new webpack.NamedModulesPlugin() @@ -31,9 +32,6 @@ if (!config.enableDynamicImports) { })); } -// Additional loaders -const loaders = []; - const webpackConfig = { ...baseConfig, devtool: 'eval', @@ -44,18 +42,7 @@ const webpackConfig = { ...baseConfig.entry.app ] }, - plugins: [ - // don't use the first plugin (isomorphic plugin) - ...baseConfig.plugins, - ...plugins - ], - module: { - ...baseConfig.module, - rules: [ - ...baseConfig.module.rules, - ...loaders - ] - } + plugins }; console.info('Firing up Webpack dev server...\n');