How to Implement Server Side Rendering in React Applications

What is Server Side Rendering?

Server Side Rendering, or SSR, is a way to make web applications faster and improve their visibility on search engines. Instead of sending only JavaScript to the browser, the server sends back complete HTML pages. This means users can see content right away, rather than waiting for JavaScript to load. For applications built with React, this can be a game-changer.

Why Use Server Side Rendering?

The big benefits of SSR are speed and SEO. When a user goes to your site, they get a fully rendered page quickly. This improves their experience. Also, search engines will better understand your content, which helps with ranking. So, here's what this really means: more visitors and better performance.

Setting Up Your Server

First, you'll need a server. Node.js is a popular choice for this. It's built on JavaScript, so it works well with React. To start, you'll want to install Node.js if you haven't already. Then, you'll set up a new project.

mkdir my-react-ssr-app
cd my-react-ssr-app
npm init -y

Next, install Express, which is a web framework for Node.js. It helps you build server applications easily.

npm install express

Creating the Server

Now, let's create a simple server using Express. Create a file called server.js in your project folder. Here’s a basic example of how you can set it up:

const express = require('express');
const path = require('path');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./src/App').default; // if App is an ES module export default

const app = express();

// serve static assets from build
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', (req, res) => {
  const appString = ReactDOMServer.renderToString(React.createElement(App));

  res.send(`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>My React App</title>
      </head>
      <body>
        <div id="root">${appString}</div>
        <script src="/bundle.js"></script> 
      </body>
    </html>
  `);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

This code does a few things:

It requires the necessary packages.
It serves static files from the build folder where your React app is built.
When a user visits the root URL, it renders the App component to a string.
Finally, it sends HTML back to the browser.

Building Your React App

Before everything works, make sure your React app is ready. Use create-react-app for quick setup. If you already have an app, ensure it is simple and can be rendered on the server. Make sure to build your app by running:

npm run build

Adding Client-Side Hydration

Once the server sends the HTML, it needs to connect with the React app on the client side. This is called hydration. It makes the static HTML interactive. In your main JavaScript file, add this code:

import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(, document.getElementById('root'));

Testing Your Server Side Rendering

Now that everything is set up, you can test your app. Start the server by running:

node server.js

Go to http://localhost:3000 in your browser. You should see your React app rendered as a full HTML page. This means your SSR setup is working.

Conclusion

Implementing Server Side Rendering in React applications is a smart way to enhance performance and improve search engine visibility. With just a few steps, you can make your app more user-friendly. Remember to keep optimizing as your app grows. Now, you have the tools to create faster and better React applications with SSR!