Ssr

package.json

@@ -1,9 +1,10 @@
 {
-  "homepage": "https://denkondratiev.github.io/react_table",
+  "homepage": "/",
   "name": "react_table",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/register": "^7.10.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -14,9 +15,14 @@
     "@types/react-redux": "^7.1.9",
     "@types/uuid": "^8.0.0",
     "bootstrap": "^4.5.0",
+    "express": "^4.17.1",
+    "ignore-styles": "^5.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-loadable": "^5.5.0",
+    "react-loadable-ssr-addon": "^0.2.3",
     "react-redux": "^7.2.0",
+    "react-router": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-test-renderer": "^16.13.1",
     "redux": "^4.0.5",
@@ -26,6 +32,7 @@
     "uuid": "^8.2.0"
   },
   "scripts": {
+    "server": "node server/index.js",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -48,9 +55,12 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.7.1",
-    "@typescript-eslint/parser": "^3.7.1",
-    "eslint": "^7.6.0",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.11.0",
+    "@babel/node": "^7.10.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-node": "^11.1.0",

server/index.js

@@ -0,0 +1,13 @@
+require('ignore-styles')
+
+require('@babel/register')({
+  ignore: [/(node_modules)/],
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript'
+  ],
+  extensions: ['.ts', '.tsx', '.js', '.json']
+})
+
+require('./server')

server/server.js

@@ -0,0 +1,43 @@
+import express from 'express'
+import React from 'react'
+import App from '../src/App'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import { rootReducer } from '../src/store/reducers'
+
+import ReactDOMServer from 'react-dom/server'
+import path from 'path'
+import fs from 'fs'
+
+const app = express()
+const PORT = 5000
+
+app.use(express.static(path.resolve(__dirname, '..', 'build')))
+// app.use('/static', express.static(path.join(__dirname, 'public')))
+
+function serverRenderer (req, res) {
+  const store = createStore(rootReducer)
+
+  const html = ReactDOMServer.renderToString(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  )
+
+  const preloadedState = store.getState()
+
+  fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
+    if (err) {
+      console.error('Something went wrong:', err)
+      return res.status(500).send('Oops, better luck next time!')
+    }
+    return res.send(
+      data.replace('<div id="root"></div>', `<div id="root">${html}</div>`)
+        .replace('.window.__PRELOADED_STATE__', `.window.__PRELOADED_STATE__= ${JSON.stringify(preloadedState)}`)
+    )
+  })
+}
+
+app.use('^/$', serverRenderer)
+
+app.listen(PORT, () => console.log(`Example app listening on port ${PORT}!`))

src/components/Form/Form.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { generateTable } from '../../helpers/generate'
 import { useDispatch, batch } from 'react-redux'
-
 import './Form.css'
 import {
   setParams,

src/index.tsx

@@ -1,13 +1,21 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import store from './store/store'
+import { rootReducer } from './store/reducers'
+import { createStore } from 'redux'
+// import store from './store/store'
 import App from './App'
 
 import 'bootstrap/dist/css/bootstrap.css'
 import './index.css'
 
-ReactDOM.render(
+const preloadedState = (window as any).window.__PRELOADED_STATE__
+
+delete (window as any).window.__PRELOADED_STATE__
+
+const store = createStore (rootReducer, preloadedState)
+
+ReactDOM.hydrate(
   <Provider store={store}>
     <App />
   </Provider>,

tsconfig.json

@@ -20,6 +20,6 @@
     "jsx": "react"
   },
   "include": [
-    "src"
+    "src", "server"
   ]
 }