Another term for server-side rendering is isomorphic JavaScript. This is a fancy way of saying JavaScript code that can run in the browser and in Node.js without modification. In this section, we'll go over the basic concepts of isomorphic JavaScript before diving into code.
The beauty of React is that it's a small abstraction layer that sits on top of a rendering target. So far, the target has been the browser, but it can also be the server. The render target can be anything, just as long as the correct translation calls are implemented behind the scenes.
In the case of rendering on the server, we're simply rendering our components to strings. The server can't actually display rendered HTML; all it can do is send the markup to the browser. The idea is illustrated in the following diagram:
We've established that it's possible to render a React component on the server and send the rendered output to the browser. The question is, why...