Making Sense of Server-side Rendering (SSR)

When working with React, SSR refers to the process of rendering web pages, and therefore your React components, on the server that handles the incoming HTTP request when a user visits your website.

With SSR enabled, the server will render your React component tree and hence produce the actual HTML code yielded by your components and their JSX instructions. It’s this finished HTML code that’s then sent back to the client. As a result, website visitors will receive an HTML file that’s not empty anymore but that instead contains the actual page content. Search engine crawlers will also see that content and index the page accordingly.

Figure 15.2: React SSR in action

Best of all, you don’t lose the client-side advantages of React because, when enabling SSR, React still works on the client side as it did before! It’ll take over control once that initial HTML document has been received and provide...