javascript - React.js Serverside rendering and Event Handlers

Question

I am learning to use react.js and have some issues to use the event handlers. The final question would be: Is it possible to use server side rendering and send event handlers to the client automaticly?

Here is my example: I have an index.jsx which I render server side and send to the client

var React = require("react");
var DefaultLayout = require("./layout/default");

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false}; 
  }, 
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  }, 
  render: function() {
    var text = this.state.liked ? 'like' : 'haven't liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  } 
});

var IndexComponent = React.createClass({
   render: function(){
       return (
           <DefaultLayout title={this.props.name}>
                <div>
                        <h1>React Test</h1>
                </div>

                <div id="testButton">
                    <LikeButton/>
                </div> 

                <script type="text/babel" src="/js/react.js"></script>
           </DefaultLayout>
       )
   }   
});

But the "Like Button" does not have any interaction. To make it do something on click I have to add this code client side.

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven't liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('testButton')
);

I only started out with react.js and maybe I am just missing some major concept here. But why does react.js not just create the code (which I now have to add manually to the client) when rendering the page server side? Like this, I have redundant code and it feels like this will be a mess in larger applications. At least react.js is smart enough to not draw two LikeButtons but to "bind" the one created server side to the client side component.

Answer 1

This behaviour is because of what exactly server side rendering is. Firstly you will have to run the exact same code both on client side and server side. This is what is called an isomorphic application. One that runs both on server and client.
So, on doing ReactDOM.renderToString(<Component>) only the HTML is rendered as a string. The render method of your component is evaluated and the HTML required for initial rendering is generated.
When the same code is run on client, react looks up the HTML rendered and attaches JS at required places. React is smart this way, it doesn't re-render everything again at client side. Just evaluates the code and identifies where all to attach the code based on react-id each DOM element is given. (You'll react-id if you inspect element any react app)

Now one might ask what is the benefit of rendering the same thing twice?
and the answer is perceived loading time by the user. And also some minimal viewing for users who disabled JS.

Client rendered application
This is how a solely client rendered application works. (client rendered React application too)

The User will only see content after all skeleton HTML, JS bundles(which are often pretty big), and data is fetched and evaluated. Which means the user will often have to stare at a spinner or loading screen for a while until everything loads.

Isomorphic application (runs both on client and server)
How an Isomorphic application works,

In this case the server generates the full HTML by evaluating your component. And the user will see content immediately as soon as the HTML is downloaded. Although the app will only function fully once the JS bundles are also downloaded and evaluated. So the JS has to run on both sides
Thus the user sees content much faster than before. Hence the huge decrease in perceived loading time.