Running React on the Server Side

In this tutorial, we will explore how to set up and run React components on the server side. By doing this, you can improve the rendering performance of your application and make it more flexible. We'll focus on configuring React to work on the server, and also touch on some best practices for maintaining code that can be shared between both client and server.

Introduction to Server-Side Rendering (SSR)

Server-side rendering (SSR) involves running JavaScript code on the server to generate HTML that can be sent to the client. This technique provides a fast initial load and improved SEO, which can be beneficial for content-heavy websites.

Here, we will not create idiomatic JavaScript (i.e., code that runs seamlessly on both the client and server), but we will explore how to run the same React components on both sides. The ultimate goal is to develop components that are capable of running in both environments, and we leave that part as a challenge for you to explore.

Note: This tutorial was created in 2016, and there have been significant advancements in SSR frameworks, such as Next.js. If you're looking for a modern approach to SSR, consider using a framework like Next.js, which offers a lot of built-in functionality.

Setting Up React for Server-Side Use

Step 1: Install React and Dependencies

First, you need to install the necessary dependencies for React and server-side rendering:

npm install react react-dom

Additionally, you need to install react-dom/server, which allows you to render React components as static markup on the server.

Step 2: Setting Up Your Server

Let's configure our server to use React components. Below is a simplified example using Express and EJS for rendering templates:

1. Import react and react-dom/server modules:

   const React = require('react');
   const ReactDOMServer = require('react-dom/server');
   

2. Set up a route to render a React component on the server:

   app.get('/register', (req, res) => {
       const RegisterComponent = require('./components/Register');
       const registerHTML = ReactDOMServer.renderToString(
           React.createElement(RegisterComponent)
       );
       res.render('layout', { body: registerHTML });
   });
   

   In the above example, we use React.createElement to create a component instance and ReactDOMServer.renderToString to convert it to HTML.

Note: Since this tutorial was made, React has introduced hooks and improved rendering performance through features like concurrent rendering. It's advisable to check the React documentation for the latest updates on SSR.

Step 3: Structuring Code for Reusability

In order to use the same React component on both the client and the server, you need to ensure that no server-specific or client-specific logic is directly inside the component code. Instead, keep such logic in separate modules and import them as needed.

For instance, anything related to browser APIs should be isolated in a client-only script, while server-only code should be kept in modules that the server uses explicitly.

Hint: Think about separating rendering logic from data fetching, as server-side components should not directly interact with browser APIs.

Homework Assignment

As an assignment, consider making a React component idiomatic by ensuring it runs both on the client and server. To do this, you need to abstract away the parts of your component that are client-specific (e.g., event listeners, window access) into separate utility files.

Conclusion

Running React on the server helps improve the initial user experience and boosts SEO. In this tutorial, we explored the basic steps required to set up React for server-side use. We also touched on how to improve reusability by abstracting client-specific and server-specific logic.

Next Steps: In the next tutorial, we will cover integrating Babel for transpiling JavaScript and optimizing your server-side rendering workflow without using Webpack.