fix: content population on server, hydrate on client

Author: jeremenichelli

src/components/Page/Page.jsx

@@ -11,8 +11,28 @@ import Gitter from '../Gitter/Gitter';
 import './Page.scss';
 
 class Page extends React.Component {
-  state = {
-    content: this.props.content instanceof Promise ? 'Loading...' : this.props.content
+  constructor(props) {
+    super(props);
+
+    const { content } = props;
+
+    this.state = {
+      content: content instanceof Promise ? 'Loading...' : content.default || content
+    };
+  }
+
+  componentDidMount() {
+    const { content } = this.props;
+
+    if (content instanceof Promise) {
+      content
+        .then(module => this.setState({
+          content: module.default || module
+        }))
+        .catch(error => this.setState({
+          content: 'Error loading content.'
+        }));
+    }
   }
 
   render() {
@@ -66,18 +86,6 @@ class Page extends React.Component {
       </section>
     );
   }
-
-  componentDidMount() {
-    if ( this.props.content instanceof Promise ) {
-      this.props.content
-        .then(module => this.setState({
-          content: module.default || module
-        }))
-        .catch(error => this.setState({
-          content: 'Error loading content.'
-        }));
-    }
-  }
 }
 
 export default Page;

src/index.jsx

@@ -6,9 +6,11 @@ import Site from './components/Site/Site';
 // TODO: Re-integrate <GoogleAnalytics analyticsId="UA-46921629-2" />
 // Consider `react-g-analytics` package
 
+const render = process.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render;
+
 // Client Side Rendering
 if ( window.document !== undefined ) {
-  ReactDOM.render((
+  render((
     <BrowserRouter>
       <Route
         path="/"