React SSR - React Router Dom staticContext undefined on the client - reactjs

I am creating a blogging application using React with Server Side Rendering functionality. I create the application using Create React App.
I encounter an issue where my data coming from the server is rendered for a second then gone after react takes over the rendering process. I am using React Router Dom to pass the data from the server to the client react. Basically I am following this tutorial to create the application https://www.youtube.com/watch?v=NwyQONeqRXA but the video is lacking some information like getting the data on the API. So I reference this repository for getting the data on the API https://github.com/tylermcginnis/rrssr
Base on resources I gathered I ended up the following codes.
server.js
import express from "express";
import fs from "fs";
import path from "path";
import { StaticRouter, matchPath } from "react-router-dom";
import React from "react";
import ReactDOMServer from "react-dom/server";
import serialize from "serialize-javascript";
import App from "../src/App";
import routes from "../src/routes";
const app = express();
const PORT = 3001;
app.use(express.static(path.resolve(__dirname, "..", "build")));
app.get("*", (req, res, next) => {
// point to the html file created by CRA's build tool
const filePath = path.resolve(__dirname, "..", "build", "index.html");
fs.readFile(
path.resolve(filePath),
"utf-8",
(err, html_data) => {
if (err) {
console.error(err);
return res.status(500).send(`Some error happened: ${err}`);
}
const activeRoute =
routes.find(route => matchPath(req.url, route)) || {};
const promise = activeRoute.fetchInitialData
? activeRoute.fetchInitialData(req.path)
: Promise.resolve();
promise
.then(rawData => {
console.log('rawData', rawData[0]);
const context = { posts: rawData };
const markup = ReactDOMServer.renderToString(
<StaticRouter location={req.url} context={context}>
<App />
</StaticRouter>
);
return res
.status(200)
.send(
html_data
.replace(
'<div id="root" class="container-fluid"></div>',
`<div id="root" class="container-fluid">${markup}</div>`
)
.replace(
"__INITIAL_DATA__={}",
`__INITIAL_DATA__=${serialize(rawData)}`
)
);
})
.catch(next);
}
);
});
app.listen(PORT, () => {
console.log(`App launched at http://localhost:${PORT}`);
});
Node JS Server entry point index.js
require("ignore-styles");
require("#babel/register")({
ignore: [/(node_modules)/],
presets: ["#babel/preset-env", "#babel/preset-react"]
});
require("./server");
Client react index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.css";
import "./index.css";
import "./fonts/VarelaRound-Regular.ttf";
ReactDOM.hydrate(
<BrowserRouter>
<App post_data={window.__INITIAL_DATA__} />
</BrowserRouter>,
document.getElementById("root")
);
Clieant react App.js
import React, { Component } from "react";
import "./App.css";
import { Route, Link, Redirect, Switch } from "react-router-dom";
import routes from "./routes";
class App extends Component {
render() {
return (
<div>
<Switch>
{routes.map(
({ path, exact, component: Component, ...rest }) => (
<Route
key={path}
path={path}
exact={exact}
render={props => (
<Component {...props} {...rest} />
)}
/>
)
)}
</Switch>
</div>
);
}
}
export default App;
When I am trying to output the data on the component it was gone and now staticContext pass from the server is undefined. What seems to be the issue here? Am I missing some configuration or library?
import React from "react";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: this.props.staticContext
? this.props.staticContext.posts
: []
};
console.log("constructor", this.props); // STATIC CONTEXT UNDEFINED ON THIS OUTPUT
}
componentDidMount() {
console.log("componentDidMount", this.props);// STATIC CONTEXT UNDEFINED ON THIS OUTPUT
}
}

Related

ReactSSR: Expected server HTML to contain a matching <div> in <body>

Sorry to interrupt you guys to check my question, I have searched abot my question in stackoverflow and read this before: same question as mine
It mentioned this way to solve this warning, but I don't think this is a really good way to handle the question: suppressHydrationWarning={true} prop can also be used on the rendered element. However, as documentation points, this prop must be used scarcely. The better solution is using hydrate() or render() appropriately.
So, here's my trouble when I use React SSR:
I start up nodejs server, and then I request a route in browser.
When server received my request, it should be returned server render
template to browser.
I can see elements are rendered in first screen which means dom are successfully mounted in .
When I click a element which will trigger route in configuration can also render.For now, everything is all right.
Here comes a thing: when I refresh page in browser which route calls '/text1' or '/text2' will also comes a warning like my question's title: Expected server HTML to contain a matching in .
I suspect whether between my route in nodejs and some particular code in client didn't handle well which caused my question.
Here's my particular code[fake]:
// app.js
const http = require('http')
const fs = require('fs')
const path = require('path')
const demo = require('./demo')
const clientScripts = demo('Client')
let scriptsTag = ''
clientScripts.map((script) => {
scriptsTag += `<script src=${script}></script>`
})
const server = http.createServer((req, res) => {
res.setHeader("Access-Control-Allow-Origin","*");
res.setHeader("Access-Control-Allow-Headers","*");
// ssr
const ssrObj = require('./static/entry/serverEntry')
const dom = ssrObj.inital('server').dom
const store = ssrObj.inital('server').store
// const title = ssrObj.inital('server').title
console.log('in: ', dom)
res.setHeader("Content-Type","text/html;charset=utf-8");
res.end(`
<html>
<head>
<title>React & React Router4 SSR</title>
</head>
<body>
<!-- server side -->
<div id="root">${dom}</div>
<script>window.__PRELOADED_STATE__ = ${JSON.stringify(store)}</script>
<!-- ok with client side -->
${scriptsTag}
</body>
</html>
`);
});
server.listen(1234, () => {
console.log('开始监听1234端口')
})
// demo.js
const path = require('path')
const fs = require('fs')
let targetFile = ''
// suppose webpack configuration are ok, its' server output set in '/dist'
const fileList = fs.readdirSync(path.resolve(__dirname, '../dist'))
const container = []
module.exports = (params) => {
fileList.map((file) => {
const ext = path.extname(file).slice(1)
if (ext === 'js') {
const reg = new RegExp(`${params}`,"gim");
if (reg.test(file)) {
container.push(file)
}
}
})
return container
}
// /entry/serverEntry.js
require('babel-polyfill')
require('babel-register')({
presets: [ 'env' ]
})
const App = require('../common/initalEntry')
module.exports = App
// /entry/client.js
require('babel-polyfill')
require('babel-register')({
presets: [ 'env' ]
})
const App = require('../common/initalEntry')
App.inital('client').dom
// /common/initalEntry.js
import React from 'react';
// dom
import {hydrate} from 'react-dom' // client side use hydrate to replace render in react16
import {renderToString} from 'react-dom/server'
// router
import {StaticRouter, BrowserRouter} from 'react-router-dom'
// store
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import * as reducers from '../store/reducers'
import { App } from './App'
export function inital (url = '') {
if (url === 'server') {
console.log(1, url)
const serverStore = createStore(reducers.counter)
return {
dom: renderToString(
<Provider store={serverStore}>
<StaticRouter location={url} context={{}}>
<App type={url} />
</StaticRouter>
</Provider>
),
store: serverStore
}
} else if (url === 'client') {
console.log(2, url, App)
const clientStore = createStore(reducers.counter, window.__PRELOADED_STATE__)
delete window.__PRELOADED_STATE__
return {
dom: hydrate(
<Provider store={clientStore}>
<BrowserRouter>
<App type={url} />
</BrowserRouter>
</Provider>
, document.getElementById('root')
),
store: clientStore
}
}
}
// common/App.js
import React from 'react';
import {Route, Link} from 'react-router-dom'
class Text1 extends React.Component {
constructor (props) {
super(props)
}
render () {
return (
<div>i am text1.</div>
)
}
}
class Text2 extends React.Component {
render () {
return (
<div>i am text2.</div>
)
}
}
export class App extends React.Component {
constructor (props) {
super(props)
}
componentDidMount () {
console.log(this.props, '<<<<<<<')
}
goTo () {
}
render () {
return (
<div>
<Link to="/text1">go text1</Link>
<Link to="/text2">go text2</Link>
<Route path="/text1" component={Text1}></Route>
<Route path="/text2" component={Text2}></Route>
</div>
)
}
}
Above all, these are my configuration about react ssr which causes this question.Thanks to reviewing my question and pls give me some idea to handle this question.I will very apprciated to your help.
Here's my whole code: just viewing and running the server/ directory is ok
Again, thanks for your help.
I deleted the code in App.js, then no longer show the warning, here's my modify:
import React from 'react';
import {Route, Link} from 'react-router-dom'
export class App extends React.Component {
constructor (props) {
super(props)
}
goTo () {
console.log('click me')
}
render () {
return (
<div>
<p onClick={this.goTo.bind(this)}>123</p>
</div>
)
}
}
// I finally solve this problem when I find something a litte bit strange in /common/initalEntry.js
import React from 'react';
// dom
import {hydrate, render} from 'react-dom'
import {renderToString} from 'react-dom/server'
// router
import {StaticRouter, BrowserRouter} from 'react-router-dom'
// store
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import * as reducers from '../store/reducers'
import { App } from './App'
export function inital (type, url = '') {
if (type === 'server') {
const serverStore = createStore(reducers.counter)
return {
dom: renderToString(
<Provider store={serverStore}>
{/* What I pass in location is a empty value which calls 'url' which causes me a lot of time to figure out what happened.The right way is pass the request url received by node.js server to 'location', then no more warning */}
<StaticRouter location={url} context={{}}>
<App />
</StaticRouter>
</Provider>
),
store: serverStore
}
} else if (type === 'client') {
// ...ignore
}
}

React server side rendering page source is not updating

I'm working with server side rendering for my React Js App.showing page content and routes are working fine.but when i hit 'page source',it's not showing all content inside html.also when i navigate to another page and hit 'page source',it's not updated old html.
Any idea about this issue?
server.js
import 'babel-polyfill';
import express from 'express';
import { matchRoutes } from 'react-router-config';
import Routes from './client/Routes';
import renderer from './helpers/renderer';
import createStore from './helpers/createStore';
const app = express();
app.use(express.static('public'));
app.get('*', (req, res) => {
const store = createStore(req);
const promises = matchRoutes(Routes, req.path)
.map(({ route }) => {
return route.loadData ? route.loadData(store) : null;
})
.map(promise => {
if (promise) {
return new Promise((resolve, reject) => {
promise.then(resolve).catch(resolve);
});
}
});
Promise.all(promises).then(() => {
const context = {};
const content = renderer(req, store, context);
res.send(content);
});
});
app.listen(3000, () => {
console.log('Listening on prot 3000');
});
renderer.js
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-javascript';
import { Helmet } from 'react-helmet';
import Routes from '../client/Routes';
export default (req, store, context) => {
const content = renderToString(
<Provider store={store}>
<StaticRouter location={req.path} context={context}>
<div>{renderRoutes(Routes)}</div>
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
return `<!doctype html>
<html lang="en">
<head>
${helmet.title.toString()}
${helmet.meta.toString()}
</head>
<body>
<div id="root">${content.toString()}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
`;
};
App.js
import React from 'react';
import { renderRoutes } from 'react-router-config';
import { fetchHomeSliders } from './actions/home';
const App = ({ route }) => {
return (
<div>
{renderRoutes(route.routes)}
</div>
);
};
export default {
component: App,
loadData: ({ dispatch }) => dispatch(fetchHomeSliders())
};
Routes.js
import React from 'react';
import App from './App';
import HomePage from './components/home';
import About from './components/about';
export default [
{
...App,
routes: [
{
...HomePage,
path: '/',
exact: true
}
,
{
...About,
path: '/about-us'
}
]
}
];
fetchHomeSliders API
export const fetchHomeSliders = () => async (dispatch, getState, api) => {
const request = await api.get(`https://example.com/api/contents/ABOUT`);
dispatch ({type: FETCH_HOME_SLIDERS, payload: request});
console.log("request request",request)
};
The reason why it might be happening is that on doing view page source only the server rendered page is shown in SSR website.
So anything you do on the client like add an html element or listener will be seen only it the inspect element.The inspect
element is kind of dynamic meaning that it updates itself to server as well as client side changes.So whenever you are doing anything like
show/hide a div/button, it will be shown in the inspect element. Whereas when you try to View page souce what happens is it hits the server and
whatever HTML content the server returned it will show.
As an example you can check https://preactjs.com/. If you do View page souce in it the html content is very less and won't contain
majority of elements compared to inspect element.So here only a part of the html is sent by Server and majority of things happen on
client side.
For your case I think you need to hydrate elements rendered by server.It will ensure that the content is the same on
the server and the client and won't override it.
Something like
import React from 'react'
import {hydrate} from 'react-dom'
import {Provider} from 'react-redux'
import configureStore from './redux/configureStore'
import App from './components/app'
const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state)
//Here we are hydrating.
hydrate(
<Provider store={store} >
<App />
</Provider>,
document.querySelector('#app')
)
Also you can check in network request if server is returning content.toString()
Hope that helps.

Server-side rendering using react-router 4, how to render client version?

I'm learning developing react.js server-side rendering web app, I'm using Express.js and Swig for the server-side
Code
server.js
import express from 'express'
import path from 'path'
import React from 'react'
import { StaticRouter } from 'react-router'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import setupSwig from 'setup.swig'
import { setupStore } from '../shared/redux/store'
import { ajaxFunction } from '../shared/services/Customer'
import App from '../shared/components/App'
const app = express()
app.use(express.static(path.resolve(__dirname, '..', '_public')))
setupSwig(app)
app.use((req, res) => {
const url = req.url
ajaxFunction()
.then(({ data: customers }) => {
const context = {}
const store = setupStore({
customers
})
const html = renderToString(
<Provider store={ store }>
<StaticRouter location={ url } context={ context }>
<App />
</StaticRouter>
</Provider>
)
const initState = store.getState()
res.render('./index.swig', { html, initState })
})
}
})
app.listen(3000)
client.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { setupStore } from '../shared/redux/store'
import App from '../shared/components/App'
const initState = window.__INIT_STATE__
delete window.__INIT_STATE__
const store = setupStore(initState)
render(<Provider store={ store }>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>, document.getElementById('reactApp'))
Question
On the server.js I use <StaticRouter location={ url } context={ context }> but I have no ideas how to make ((what props to pass with) the <BrowserRouter> on client.js redirect to specific URL e.g. /customers, /about
If I did things wrong way please also guide
Thanks

React + Redux Server initialize with store and history

I've the following app:
Client
index.js
import React from "react";
import ReactDOM from "react-dom";
import Root from "./containers/Root";
import configureStore from "./store/configureStore";
import { browserHistory } from "react-router";
import { loginUserSuccess } from "./actions/auth";
import { syncHistoryWithStore } from "react-router-redux";
const target = document.getElementById("root");
const store = configureStore(browserHistory, window.__INITIAL_STATE__);
// Create an enhanced history that syncs navigation events with the store
const history = syncHistoryWithStore(browserHistory, store)
const node = (
<Root store={store} history={history} />
);
let token = localStorage.getItem("token");
if (token !== null) {
store.dispatch(loginUserSuccess(token));
}
ReactDOM.render(node, target);
Root.js
import React from "react";
import {Provider} from "react-redux";
import AppRouter from "../routes/appRouter";
export default class Root extends React.Component {
static propTypes = {
store: React.PropTypes.object.isRequired,
history: React.PropTypes.object.isRequired
};
render () {
return (
<Provider store={this.props.store}>
<AppRouter history={this.props.history}>
</AppRouter>
</Provider>
);
}
}
AppRouter (routes/appRouter.js
import React from "react";
import routes from "./routes";
import { Router } from "react-router";
export default (
<Router routes={routes} history={this.props.history}></Router>
)
routes (routes/routes.js)
import React from "react";
import {Route, IndexRoute} from "react-router";
import { App } from "../containers";
import {HomeView, LoginView, ProtectedView, NotFoundView} from "../views";
import {requireAuthentication} from "../components/core/AuthenticatedComponent";
export default (
<Route path='/' component={App} name="app" >
<IndexRoute component={requireAuthentication(HomeView)}/>
<Route path="login" component={LoginView}/>
<Route path="protected" component={requireAuthentication(ProtectedView)}/>
<Route path="*" component={NotFoundView} />
</Route>
)
requireAuthentication (/component/core/AuthenticatedComponent.js)
import React from "react";
import {connect} from "react-redux";
import { push } from "react-router-redux";
export function requireAuthentication(Component) {
class AuthenticatedComponent extends React.Component {
componentWillMount () {
this.checkAuth(this.props.isAuthenticated);
}
componentWillReceiveProps (nextProps) {
this.checkAuth(nextProps.isAuthenticated);
}
checkAuth (isAuthenticated) {
if (!isAuthenticated) {
let redirectAfterLogin = this.props.location.pathname;
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
}
}
render () {
return (
<div>
{this.props.isAuthenticated === true
? <Component {...this.props}/>
: null
}
</div>
)
}
}
const mapStateToProps = (state) => ({
token: state.auth.token,
userName: state.auth.userName,
isAuthenticated: state.auth.isAuthenticated
});
return connect(mapStateToProps)(AuthenticatedComponent);
}
configureStore.js
import rootReducer from "../reducers";
import thunkMiddleware from "redux-thunk";
import {createStore, applyMiddleware, compose} from "redux";
import {routerMiddleware} from "react-router-redux";
import {persistState} from "redux-devtools";
import createLogger from "redux-logger";
import DevTools from "../dev/DevTools";
const loggerMiddleware = createLogger();
const enhancer = (history) =>
compose(
// Middleware you want to use in development:
applyMiddleware(thunkMiddleware, loggerMiddleware, routerMiddleware(history)),
// Required! Enable Redux DevTools with the monitors you chose
DevTools.instrument(),
persistState(getDebugSessionKey())
);
function getDebugSessionKey() {
if(typeof window == "object") {
// You can write custom logic here!
// By default we try to read the key from ?debug_session=<key> in the address bar
const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
return (matches && matches.length > 0)? matches[1] : null;
}
return;
}
export default function configureStore(history, initialState) {
// Add the reducer to your store on the `routing` key
const store = createStore(rootReducer, initialState, enhancer(history))
if (module.hot) {
module
.hot
.accept("../reducers", () => {
const nextRootReducer = require("../reducers/index");
store.replaceReducer(nextRootReducer);
});
}
return store;
}
Server
server.js
import path from "path";
import { Server } from "http";
import Express from "express";
import React from "react";
import {Provider} from "react-redux";
import { renderToString } from "react-dom/server";
import { match, RouterContext } from "react-router";
import routes from "./src/routes/routes";
import NotFoundView from "./src/views/NotFoundView";
import configureStore from "./src/store/configureStore";
import { browserHistory } from "react-router";
// import { syncHistoryWithStore } from "react-router-redux";
// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "./"));
// define the folder that will be used for static assets
app.use("/build", Express.static(path.join(__dirname, "build")));
// // universal routing and rendering
app.get("*", (req, res) => {
const store = configureStore(browserHistory);
match(
{ routes, location: req.url },
(err, redirectLocation, renderProps) => {
// in case of error display the error message
if (err) {
return res.status(500).send(err.message);
}
// in case of redirect propagate the redirect to the browser
if (redirectLocation) {
return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
}
// generate the React markup for the current route
let markup;
if (renderProps) {
// if the current route matched we have renderProps
// markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
markup = renderToString(
<Provider store={store} >
<RouterContext {...renderProps} />
</Provider>
);
} else {
// otherwise we can render a 404 page
markup = renderToString(<NotFoundView />);
res.status(404);
}
// render the index template with the embedded React markup
const preloadedState = store.getState()
return res.render("index", { markup, preloadedState });
}
);
});
// start the server
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || "production";
server.listen(port, err => {
if (err) {
return console.error(err);
}
console.info(`Server running on http://localhost:${port} [${env}]`);
});
I don't know if I'm initializing correctly my store on the server-side.
How do I know this? Because renderProps is always null and thereby it returns NotFoundView.
However I made some modifications since I understood that my routes were being initialized incorrectly.
This made me use my configureStore(...) (which I use on client-side and it's working) on the server-side.
Now I'm getting the following error:
TypeError:Cannot read property 'push' of undefined
This error happens on AuthenticatedComponent in the following line:
this.props
.dispatch(push(`/login?next=${redirectAfterLogin}`));
It's strange since this works on client-side and on server-side it just throws this error.
Any idea?
PS
Am I doing it correctly by using the same Routes.js in client and server?
And the same for my configureStore(...)?
All the examples I see, they use a different approach to create the server-side store, with createStore from redux and not their store configuration from client-side.
PS2
I now understand that push may not work on server, only client (right?). Is there any workaround for this?
PS3
The problem I was facing was happening because I was rendering <Router /> into server, and my routes.js should only contain <Route /> nodes.
However, after a while I discovered that history shouldn't be configured in server and I just configured my store and passed it to the <Provider /> being rendered.
But now I need to compile my JSX and it throws:
Error: Module parse failed: D:\VS\Projects\Tests\OldDonkey\OldDonkey.UI\server.js Unexpected token (46:20)
You may need an appropriate loader to handle this file type.
| // markup = renderToString(<Provider store={preloadedState} {...renderProps}/>);
| markup = renderToString(
| <Provider store={store} >
| <RouterContext {...renderProps} />
| </Provider>

Add Server Side Rendering to create-react-app

i am studying create-react-app and SSR.
I have add redux and react-router in this repo => https://github.com/sarovin/StarteKit.
Now i want add SSR ( server side rendering ) without any modification to create-react-app.
I have a PR where i try to implement it => https://github.com/sarovin/StarteKit/pull/1
But i have some error because the function onClick() not work in my example:
// App.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { switcher } from './actions/switcher';
import logo from './logo.svg';
import './App.css';
const propTypes = {
switch: PropTypes.bool,
dispatch: PropTypes.func,
};
class App extends Component {
constructor(props) {
super(props);
this.onClick = this.onClick.bind(this);
}
onClick() {
console.log('onClick');
this.props.dispatch(switcher());
}
render() {
console.log('Switch', this.props.switch);
return (
<div className="App">
<div className="App-header">
{this.props.switch ? <img src={logo} className="App-logo" alt="logo" /> : null }
<h2>Welcome to React</h2>
</div>
<label className="switch" >
<input checked={this.props.switch} type="checkbox" onChange={this.onClick} />
<div className="slider round"></div>
</label>
</div>
);
}
}
function mapStateToProps(state) {
return {
switch: state.switcher.get('switch'),
};
}
App.propTypes = propTypes;
export default connect(mapStateToProps)(App);
//server.js
import express from 'express';
import path from 'path';
import bodyParser from 'body-parser';
import hbs from 'express-hbs';
import cors from 'cors';
import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { renderToStaticMarkup } from 'react-dom/server';
import { RouterContext, match } from 'react-router';
import routes from './routes';
import * as reducers from './reducers';
console.log('info', 'Init App');
const app = express();
app.set("port", process.env.PORT || 8080);
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
// Make index false, so that it is not resolved by default.
app.use(express.static(path.resolve('build'), {index: false}));
app.set("views", path.resolve('build'));
app.set("view engine", "html");
app.engine("html", hbs.express4());
app.use((req, res, next) => {
match({routes: routes, location: req.url}, (err, redirectLocation, renderProps) => {
if (err) {
return res.status(500).send(err.message);
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search);
} else if(renderProps){
res.status(200);
console.log(renderProps);
const reducer = combineReducers(reducers);
const initialState = {};
let store = createStore(reducer, initialState);
let html = renderToStaticMarkup(
<Provider store={store}>
<RouterContext {...renderProps}/>
</Provider>
);
console.log('store', store.getState());
res.render('index.html', { content: html });
}
else res.status(404).send('Page not found');
});
});
app.listen(app.get("port"), () => {
console.log("Express server starting on port: " + app.get("port"));
});
Have any suggestion?
If you need server side rendering, I would suggest Next.js instead of create-react-app:
https://github.com/zeit/next.js/
I'll strongly recommend razzle for your project. it abstracts all the required tooling for your universal JavaScript application into a single dependency which is a great gain doing SSR.
I've been thinking about the same thing. I ended up with a project https://github.com/haukurk/cra-ssr-ts-recipe. It's an isomorphic web app that allows you to do server rendering for React (with support for React Router and Redux). You simply add fetchData function to your route component if you want to do any pre-fetching of data.
SSR is not something that is trivial nor built into React/CRA and will always include some extra work for your web app.
I've also been looking into NextJS, as people seem to be praising it a lot. I encourage you to look at that.
Please try
https://github.com/antonybudianto/cra-universal
No need to eject and it's zero config by default (v3.0.x)

Resources