using ReactDOM.hydrate to bootstrap SSR content (#787)

* using `ReactDOM.hydrate` when content is rendered server side * freeze on yeoman-test@1.7.0 since 1.7.1 contains breaking changes * Revert "freeze on yeoman-test@1.7.0 since 1.7.1 contains breaking changes" This reverts commit 705c798. * fixing unit tests, changed bad-routes to do not have return statement, returning string is a valid syntax with React 16 * re-added react and react-dom as peer dependency for redux-router package * remove direct react dependency from PWA template, switch to newer react-notify-toast that uses React 16
electrode-io · May 17, 2018 · 27bb19b · 27bb19b
1 parent d13afed
commit 27bb19b
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 16 deletions.
diff --git a/packages/electrode-redux-router-engine/package.json b/packages/electrode-redux-router-engine/package.json
@@ -31,8 +31,8 @@
     "babel-preset-stage-0": "^6.0.15",
     "babel-register": "^6.5.2",
     "electrode-archetype-njs-module-dev": "^2.1.0",
-    "react": "^15.3.1 || ^0.14.8",
-    "react-dom": "^15.3.1 || ^0.14.8",
+    "react": "^16.0.0 || ^15.3.1 || ^0.14.8",
+    "react-dom": "^16.0.0 || ^15.3.1 || ^0.14.8",
     "xstdout": "^0.1.1"
   },
   "dependencies": {

diff --git a/packages/electrode-redux-router-engine/test/bad-routes.jsx b/packages/electrode-redux-router-engine/test/bad-routes.jsx
@@ -3,13 +3,11 @@ import { Route, IndexRoute } from "react-router";
 
 class Home extends React.Component {
   render () {
-    return "Home";
   }
 }
 
 class Page extends React.Component {
   render () {
-    return "Page";
   }
 }
 

diff --git a/packages/electrode-redux-router-engine/test/spec/redux-router-engine.spec.js b/packages/electrode-redux-router-engine/test/spec/redux-router-engine.spec.js
@@ -143,7 +143,7 @@ describe("redux-router-engine", function () {
       intercept.restore();
       expect(result.status).to.equal(500);
       expect(result._err.message)
-        .to.contain("Page.render(): A valid React element (or null) must be returned");
+        .to.contain("Nothing was returned from render");
     });
   });
 
@@ -177,7 +177,7 @@ describe("redux-router-engine", function () {
     testReq.url.path = "/test";
 
     return engine.render(testReq).then((result) => {
-      expect(result.html).to.contain("data-reactid");
+      expect(result.html).to.contain("data-reactroot");
     });
   });
 
@@ -186,7 +186,7 @@ describe("redux-router-engine", function () {
     testReq.url.path = "/test";
 
     return engine.render(testReq).then((result) => {
-      expect(result.html).to.not.contain("data-reactid");
+      expect(result.html).to.not.contain("data-reactroot");
     });
   });
 
@@ -223,7 +223,7 @@ describe("redux-router-engine", function () {
     testReq.url.path = "/test";
 
     return engine.render(testReq, { withIds: false }).then((result) => {
-      expect(result.html).to.not.contain("data-reactid");
+      expect(result.html).to.not.contain("data-reactroot");
     });
   });
 

diff --git a/packages/generator-electrode/generators/app/templates/_package.json b/packages/generator-electrode/generators/app/templates/_package.json
@@ -42,7 +42,7 @@
     "koa-router": "^5.4.0",
     "koa-send": "^3.2.0",
     "koa-static": "^2.0.0", <% } if (isPWA) { %>
-    "react-notify-toast": "^0.4.0",<% } if (isAutoSSR) {%>
+    "react-notify-toast": "^0.4.1",<% } if (isAutoSSR) {%>
     "electrode-auto-ssr": "^1.0.0", <% } %>
     "lodash": "^4.10.1"
   },

diff --git a/packages/generator-electrode/generators/app/templates/src/client/app.jsx b/packages/generator-electrode/generators/app/templates/src/client/app.jsx
@@ -3,7 +3,7 @@
 //
 
 import React from "react";
-import { render } from "react-dom";
+import { render, hydrate } from "react-dom";
 import { routes } from "./routes";
 import { Router, browserHistory } from "react-router";
 import { createStore } from "redux";
@@ -29,11 +29,14 @@ require.ensure(
 
 window.webappStart = () => {
   const initialState = window.__PRELOADED_STATE__;
+  const jsContent = document.querySelector(".js-content");
+  const reactStart = (initialState && jsContent.innerHTML) ? hydrate : render;
+
   const store = createStore(rootReducer, initialState);
-  render(
+  reactStart(
     <Provider store={store}>
       <Router history={browserHistory}>{routes}</Router>
     </Provider>,
-    document.querySelector(".js-content")
+    jsContent
   );
 };
diff --git a/samples/universal-react-node/package.json b/samples/universal-react-node/package.json
@@ -40,7 +40,7 @@
     "es6-promise": "^4.0.5",
     "isomorphic-fetch": "^2.2.1",
     "mongojs": "^2.4.0",
-    "react-notify-toast": "^0.4.0",
+    "react-notify-toast": "^0.4.1",
     "uuid": "^3.0.1"
   },
   "devDependencies": {

diff --git a/samples/universal-react-node/src/client/app.jsx b/samples/universal-react-node/src/client/app.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import {render} from "react-dom";
+import {render, hydrate} from "react-dom";
 import {routes} from "./routes";
 import {Router, browserHistory} from "react-router";
 import {createStore, compose, applyMiddleware} from "redux";
@@ -23,14 +23,17 @@ const enhancer = compose(
 
 window.webappStart = () => {
   const initialState = window.__PRELOADED_STATE__;
+  const jsContent = document.querySelector(".js-content");
+
   const store = createStore(rootReducer, initialState, enhancer);
-  render(
+  const reactStart = (initialState && jsContent.innerHTML) ? hydrate : render;
+  reactStart(
       <Provider store={store}>
         <div>
           <Router history={browserHistory}>{routes}</Router>
           <DevTools />
         </div>
       </Provider>,
-    document.querySelector(".js-content")
+    jsContent
   );
 };