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 handler

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() 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.