React server-side rendering event listener is not attached with

Question

On the client side, I had the following routing in index.js :

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/login" component={Login}/>
    </Rouuter>
)

where App and Login are 2 React components. Login component has an onSubmit event on the form.

export default Login extends React.Component {

constructor() {
    .....
    this.auth = this.auth.bind(this);
}

auth(e) {
   .....
}

render() {
    return (
        ....
        <form method="post" onSubmit={this.auth}>
        ....
        <input type="submit" value="Log In"/>
        </form>
        ....
    )
}

Running the app on client-side did not have any problem, the submit event was fired successfully. The client-side script is bundled into static/js/bundle.js .

Now I wanted to do server-side rendering with nodejs and express, so a server was created as below.

const express = require('express');
const router = express.router();
var app = express()

const login = require('./routes/login')
const index = require('./routes/index')

app.use('/login', login);
app.use('/', index);
.....

index.js is defined as below (skipping the import portion):

....
const express = require('express');
const router = express.router(); 

router.get('/', (req, res) => {
    const el = React.createElement(App);
    const html = ReactDOMServer.renderToString(el);
    res.render('index', { html, title: 'Portal' });
})

module.exports = router

And login.js is defined similarly (Skipping the import portion):

....
const express = require('express');
const router = express.router(); 

router.get('/', (req, res) => {
    const el = React.createElement(Login);
    const html = ReactDOMServer.renderToString(el);
    res.render('index', { html, title: 'Portal' });
})

module.exports = router

where server-side rendering uses hbs as template engine and the template file is index.html:

.....
<div id="root">{{{ html }}}</div>
<script src="static/js/bundle.js"></script>
....

Running server loaded both index and login pages successfully. However, the submit button did not work on the login form. In other word, the event listener was not attached on the client side.

Do I do anything incorrectly? Thanks.

Answer 1

Use this library https://github.com/gaearon/react-hot-loader if you use webpack, in this repository stays the link to that dpendency.

Reasons? client/server side needs to be rendered one by one.

server render just HTML, and cliente all the logic js code, then react intelligence detect there is a react components that actually were render( cus the server side runs firts) and then update with the necessary ones, now you can interact with