As you saw Chapter 1, Getting Started with Isomorphic Web Apps, the core concept of server-side rendering is very simple. The React
library provides just two API methods for that:
ReactDOMServer.renderToString(ReactElement)
ReactDOMServer.renderToStaticMarkup(ReactElement)
They both accept a single React element as they input a parameter and return an HTML string. You can use either of these two methods on the server to generate HTML code for your JavaScript app and send the markup down on the initial request for faster page loads and to allow search engines to crawl your web app for SEO purposes.
Most of the time, you will use the renderToString()
method as it not only generates HTML markup but also appends some metadata to the HTML (in a form of data-reactid
attributes). This makes it possible to reuse generated markup on the client so that when you bootstrap the same JavaScript app in a browser, React will just verify that the checksum of the generated...