Add basic server side rendering

Saluev · Mar 9, 2019 · 8b1f995 · 8b1f995
1 parent 168def1
commit 8b1f995
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 15 deletions.
diff --git a/frontend/index.js b/frontend/index.js
@@ -1,12 +1,19 @@
 import express from 'express'
 import template from './src/template'
+import render from './src/server'
 
 let app = express();
 
 app.use('/dist', express.static('../dist'));
 
 app.get("*", (req, res) => {
-    res.send(template("Habr demo app"));
+    const initialState = {
+        page: {
+            type: "home"
+        }
+    };
+    const {content, preloadedState} = render(initialState, {pathname: req.url});
+    res.send(template("Habr demo app", preloadedState, content));
 });
 
 app.listen(process.env.APP_FRONTEND_PORT);
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/Saluev/habr-app-demo#readme",
   "dependencies": {
+    "cross-fetch": "^3.0.1",
     "express": "^4.16.3",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",

diff --git a/frontend/src/client.js b/frontend/src/client.js
@@ -1,20 +1,12 @@
 import React from 'react'
-import {render} from 'react-dom'
+import {hydrate} from 'react-dom'
 import {Provider} from 'react-redux'
 import App from './components/app'
 import configureStore from './redux/configureStore'
-import {navigate} from "./redux/actions";
 
-let initialState = {
-    page: {
-        type: "home"
-    }
-};
+const store = configureStore(window.__STATE__);
 
-const store = configureStore(initialState);
-store.dispatch(navigate(location));
-
-render(
+hydrate(
     <Provider store={store}>
         <App/>
     </Provider>,

diff --git a/frontend/src/redux/actions.js b/frontend/src/redux/actions.js
@@ -1,8 +1,14 @@
+import {isServerSide} from "../utility";
+import fetch from "cross-fetch";
+
 export const START_FETCHING_CARD = "START_FETCHING_CARD";
 export const FINISH_FETCHING_CARD = "FINISH_FETCHING_CARD";
 export const NAVIGATE = "NAVIGATE";
 
 function apiPath() {
+    if (isServerSide()) {
+        return "http://backend:40001/api/v1";
+    }
     return "http://localhost:40001/api/v1";
 }
 
@@ -39,7 +45,7 @@ export function fetchCardIfNeeded() {
 }
 
 export function navigate(link, dontPushState) {
-    if (!dontPushState) {
+    if (!isServerSide() && !dontPushState) {
         history.pushState({
             pathname: link.pathname,
             href: link.href

diff --git a/frontend/src/server.js b/frontend/src/server.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import {renderToString} from 'react-dom/server'
+import {Provider} from 'react-redux'
+import App from './components/app'
+import {navigate} from "./redux/actions";
+import configureStore from "./redux/configureStore";
+
+
+export default function render(initialState, url) {
+    const store = configureStore(initialState);
+    store.dispatch(navigate(url));
+
+    let app = (
+        <Provider store={store}>
+            <App/>
+        </Provider>
+    );
+
+    let content = renderToString(app);
+    let preloadedState = store.getState();
+
+    return {content, preloadedState};
+};
diff --git a/frontend/src/template.js b/frontend/src/template.js
@@ -1,4 +1,4 @@
-export default function template(title) {
+export default function template(title, initialState, content) {
     let page = `
         <!DOCTYPE html>
         <html lang="en">
@@ -7,7 +7,10 @@ export default function template(title) {
                 <title>${title}</title>
             </head>
             <body>
-                <div id="app"></div>
+                <div id="app">${content}</div>
+                <script>
+                   window.__STATE__ = ${JSON.stringify(initialState)}
+                </script>
                 <script src="/dist/client.js"></script>
             </body>
         </html>

diff --git a/frontend/src/utility.js b/frontend/src/utility.js
@@ -0,0 +1,3 @@
+export function isServerSide() {
+    return process.env.APP_ENV !== undefined;
+}