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');