Merge pull request #46 from combine/feature/optional-ssr

Feature: Optional SSR

Author: calvinl

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

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,
 

nodemon.json

@@ -1,8 +1,8 @@
 {
   "watch": [
+    "config/**/*.js",
     "server/**/*.js",
     "server/**/*.json",
-    "server/templates/**/*.html",
-    "common/js/**/*.js"
+    "server/templates/**/*.html"
   ]
 }

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 = (
-    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
+  const getComponent = () => {
+    let component = (
       <Provider store={store}>
         <StaticRouter context={context} location={req.baseUrl}>
           <App />
         </StaticRouter>
       </Provider>
-    </Loadable.Capture>
-  );
+    );
+
+    if (config.enableDynamicImports) {
+      return (
+        <Loadable.Capture report={moduleName => modules.push(moduleName)}>
+          {component}
+        </Loadable.Capture>
+      );
+    }
+
+    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);
 

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