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

For a client side interactive React app, you need to render the app client side too. Usually this code is identical to the code you run on the server, so there is no redundant code. It's just the same code. You may ask yourself if rendering on both client and server might be overkill, but from a performance and SEO point of view it makes perfect sense.

ReactDOMServer.renderToString(<MyApp foo={bar} />) basically just renders a string with markup. There is no javascript or any magic going on there. Just plain old HTML. However, the rendered markup has lots of React ID attributes that are later used on the client to generate the initial Virtual DOM and attach events.

When you render your application again on the client, on the same DOM element in which your server side rendered markup was injected on the server, React doesn't need to redraw the entire application. It just creates a new Virtual DOM tree, diffs it with the initial Virtual DOM tree, and does the necessary DOM operations, if any. This concept of the virtual DOM is what makes React so fast in the first place. In the same process, any event listeners you have defined in your application will be attached to the already rendered markup.

All of this happens really fast. And you have the benefit of a server side rendered page (that can be cached on the server, using Varnish or something similar) that search engines will crawl, users don't need to wait for anything to see the initial render, and the page basically works for users who have disabled javascript.